タグ on CodePen
人気順 5 users 50 users 100 users 500 users 1000 usersCSSスニペット:シャドウもグラデーションにする | かちびと.net
Result See the Pen Simple button with gradient shadow in CSS by kachibito ( @kachibito ) on CodePen . ボタンがグラデーションなのでシャドウもグラデーションにしよう、みたいな提案 疑似要素に、グラデーションとblurを加えてグラデーションな影を生成しています css html, :root {/*C... 続きを読む
CSSスニペット:テーブルのセルが空だった場合にハイライトしたり文字を挿入したり | かちびと.net
Result See the Pen GQKmMW by kachibito ( @kachibito ) on CodePen . 5年前に jQueryでテーブル内で空の要素をハイライトさせる 、という記事を書いたのを偶然確認したのでCSS版みたいなものを書いておきます。 特別なことはしてなくて、今は:emptyを使える時代になった、みたいな内容です。 セル毎に異なるスタイルや文字にしたい場合... 続きを読む
インライン用のオープンソース国産WYSIWYGエディタ・「Lite Editor」 | かちびと.net
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
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年9月14日 CSS 要素を横並びにする時に便利なFlexbox(フレックスボックス)。みなさん、使いこなせていますか?今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します! 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana ( @manabox ) on CodePen . ... 続きを読む
[jQuery] レスポンシブWebデザイン対応のメガメニュー - かちびと.net
Result See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek ( @riogrande ) on CodePen . ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィ... 続きを読む