CSSスニペット：シャドウもグラデーションにする | かちびと.net

2018/03/26 21 users シャドウ グラデーション CSSスニペット net Blur

Result See the Pen Simple button with gradient shadow in CSS by kachibito ( @kachibito ) on CodePen . ボタンがグラデーションなのでシャドウもグラデーションにしよう、みたいな提案 疑似要素に、グラデーションとblurを加えてグラデーションな影を生成しています css html, :root {/*C... 続きを読む

CSSスニペット：テーブルのセルが空だった場合にハイライトしたり文字を挿入したり | かちびと.net

2018/01/29 11 users CSSスニペット セル net テーブル jQuery

Result See the Pen GQKmMW by kachibito ( @kachibito ) on CodePen . 5年前に jQueryでテーブル内で空の要素をハイライトさせる 、という記事を書いたのを偶然確認したのでCSS版みたいなものを書いておきます。 特別なことはしてなくて、今は:emptyを使える時代になった、みたいな内容です。 セル毎に異なるスタイルや文字にしたい場合... 続きを読む

インライン用のオープンソース国産WYSIWYGエディタ・「Lite Editor」 | かちびと.net

2017/12/30 17 users net エディタ a-blog cms フロッグダイブ

Lite Editor See the Pen Lite Editor – demo by appleple ( @appleple ) on CodePen . Lite Editorはインライン要素に特化したオープンソース国産WYSIWYGエディタです。国産CMSとして名高いa-blog cmsを提供するappleple社さんの開発されたエディタで、a-blog cmsのようなブロックタイプの... 続きを読む

Metaballs

2017/10/17 35 users

finder of new ways to confuse myselfVarun Vachhar finder of new ways to confuse myself 16th October, 2017 Metaballs See the Pen amoeba by Varun Vachhar ( @winkerVSbecks ) on CodePen . Metaballs, not t... 続きを読む

かゆいところに手が届く！Flexboxを使った便利な小技 | Webクリエイターボックス

2017/09/14 100 users Flexbox Mana 互い違い かゆいところ テキスト

2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana ( @manabox ) on CodePen . ... 続きを読む

[jQuery] レスポンシブWebデザイン対応のメガメニュー - かちびと.net

2016/02/02 25 users jQuery ウインドウサイズ アコーディオン ウィ net

Result See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek ( @riogrande ) on CodePen . ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィ... 続きを読む