SVGで作成した漫画のフキダシをCSSでのカスタマイズを可能にしたデザインサンプルになります。 こちらは円形に尻尾があるノーマルバージョンになります。 漫画のフキダシ（ノーマルバージョン） CSSで加工可能にした漫画のフ […]…
CSS | 目玉焼き（Fried egg）のCSSデザインサンプル
ピュアなCSSだけでシンプルな目玉焼きを作成してみました。サイトデザインなどに、もし需要があるならば是非ご利用ください。 完成した時は美味しそうにできたと思ったのですが、改めてみると全然火が通ってない感がありますね・・・ […]…
CSS | 太陽（Sun）のCSSデザインサンプル
ピュアなCSSだけでポップな太陽を作成してみました。サイトパーツなどで需要があれば、是非ご利用ください。 太陽（Sun） CSSで作成した太陽の表示サンプルとサンプルコードです。 前回の雪だるまと顔がよく似ていますが、決 […]…
CSS | 雪だるま（Snowman）のCSSデザインサンプル
ピュアなCSSだけで雪だるまを作成してみました。これは結構可愛くできたと思っています。 もし、サイトデザインなどで需要があれば是非ご利用ください。 雪だるま（Snowman） CSSで作成した雪だるまの表示サンプルとサン […]…
CSS | シンプルで使いやすい検索フォームのCSSデザインサンプル
シンプルで使いやすい検索フォーム、検索窓のCSSデザインのサンプルとサンプルコードを紹介しています。 ※このサンプルでは検索ボタンのアイコンにFont Awesomeのフリーアイコンを利用しています。 シンプルな検索フォ […]…
2022年、注目しておきたいCSSの新機能のまとめ
2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加…
ポタポタと雫・水滴が落ちるCSSアニメーションサンプル
ポタポタと雫が落ちるCSSアニメーションを作成しましたのでサンプルを紹介していきます。 完全に余談ですが「雫」は英語で「drop」ですし日本語での意味も「水や液体のしたたり。」とある。これは「雫」の時点で既に「落ちる」と […]…
マウスホバーでクルッと裏返るCSSアニメーションサンプル
CSSだけでマウスホバー時に画像などのHTML要素がクルッと裏返るフリップアニメーションのサンプルを紹介しています。 マウスホバーで裏返るCSSアニメーション フリップアニメーションを出来るだけシンプルに作成した動作サン […]…
マウスホバーでクルッと裏返るCSSアニメーションサンプル
CSSだけでマウスホバー時に画像などのHTML要素がクルッと裏返るフリップアニメーションのサンプルを紹介しています。 マウスホバーで裏返るCSSアニメーション フリップアニメーションを出来るだけシンプルに作成した動作サン […]…
CSS | マウスホバー時にdisplay:noneで要素を消したらどうなるのか
CSSの疑似クラス :hover を使ってマウスホバー時にdisplay:noneでその要素を消したらどうなるのか、ふと、気になりました。 この疑問は明日になれば忘れてしまい、きっと2度と思い出せないと感じて記事にしてい […]…