シンプルで使いやすい検索フォーム、検索窓のCSSデザインのサンプルとサンプルコードを紹介しています。 ※このサンプルでは検索ボタンのアイコンにFont Awesomeのフリーアイコンを利用しています。 シンプルな検索フォームのデザインサンプル シンプルな検索フォーム・検索窓のデザイン、CSSコードサンプルでカスタマイズや配色も簡単にできて汎用性が高いデザインです。 サンプルでは royalblue（#4169e1）、limegreen（#32cd32）、tomato（#ff6347）の3色を用意しています。 See the Pen CSS | Search form Design – simple colors by yochans (@yochans) on CodePen. HTMLでは「.search」という親要素、検索文字入力フォームに「input type=”text”」、検索ボ

それぞれ適当に透過させたりしています。 特に難しい事はしていませんので簡単にカスタマイズできると思います。 .container { width: 100%; height: 260px; background: #000; } .fried-egg { position: relative; top: 0; left: 50%; width: 0; height: 100%; transform: scale(1); } .white { position: absolute; top: 130px; width: 260px; height: 170px; background: #d3d3d3; border-radius: 50% 50% 50% 70%/50% 50% 70% 60%; transform: translate(-50%, -50%); } .white::bef

CSSでtransform-styleのpreserve-3dを使って、3Dなサイコロを作成する方法を紹介しています。 See the Pen CSS | 3D Dice by yochans (@yochans) on CodePen. 主にダイスの目の設定などについて書いています。 角丸にしたり、隙間をあけたりと多少サイコロっぽく（努力は）していますが、サイコロデザインの元としている立方体の作成方法と殆ど同じです。 立方体の作り方は別記事で紹介しています。 CSS | 3Dな立方体の作り方 3Dサイコロの作り方 この記事はCSSの「transform-style」に「preserve-3d」を指定した立体的なサイコロの作成手順となります。 本体（コンテナ）側面×6サイコロの出目 本体と側面については省略しますが、CSS | 3Dな立方体の作り方 | ONE NOTESにて書いていますの

CSSで立体感のある地球儀を作成する方法を紹介しています。 See the Pen CSS | Globe by yochans (@yochans) on CodePen. シンプルな球体の作り方について、以下記事でも紹介しています。 CSS | 3Dな球体の作り方2 地球儀の作り方 HTML構造 動作サンプルで紹介している地球儀に使っているHTML構造です。 <div class="globe"></div> 円と地図 円を作成して、背景に世界地図の画像ファイルを指定、地図の画像は2つ分繋げています。 background-sizeで「auto 100%」と指定して要素サイズに画像の高さを合わせます。 .globe { width: 150px; height: 150px; margin: 30px; border-radius: 50%; position: relative; b

CSSで立体感のあるサッカーボールを作成してクルクル回す方法を紹介しています。 See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen. （エセ）球体の作り方について以下の記事で紹介しています。 CSS | 3Dな球体の作り方2 立体的なサッカーボールを作成する方法 立体的なサッカーボールを作成してCSSアニメーションで回転させるサンプルコードです。 3D、立体と記述していますが、サッカーボール柄を移動させてそれっぽく見せているだけです。 <div class="soccer-ball"></div> テクスチャ画像として適当に作ったシームレスなサッカーボール柄を利用しています。 background: urlで画像ファイルのパスとrepeatを指定する事で繰り返し描画に設定します。 background-sizeで画像

CSSでテキストや要素を拡大や縮小させるCSSアニメーションのサンプルコードです。 マウスホバーでの拡大・縮小、マウスクリックでの拡大・縮小、animationプロパティでの拡大・縮小などそれぞれの方法のCSSアニメーションの実装パターンを紹介しています。 scale()の使い方と、その他の方法 このページでのサンプルは要素のサイズ変更にscale()を利用して紹介しています。 scale()にて指定できる値は横幅・縦幅の拡縮率を指定します。 transform: scale(2); 横幅・縦幅の拡縮率はカンマで区切ることで、それぞれ別々に指定することも可能です。 transform: scale(2, 1); また、scaleX()、scaleY()といった書き方もできます。 transform: scaleX(2); transform: scaleY(2); scale()を使わない

マウスホバーでテキストが一文字ずつ回転するCSSアニメーションの紹介です。 See the Pen CSS | scroll-snap-type: y mandatory by yochans (@yochans) on CodePen. マウスホバーで一文字ずつ回転させる テキスト上をマウスホバー際に、一文字ずつ回転させたい場合のサンプルコードです。 CSSではn文字目という指定はできませんので、各文字を<span>で記述する必要があります。 <div class="container"> <p class="text"> <span>O</span><span>N</span><span>E</span> <span>N</span><span>O</span><span>T</span><span>E</span><span>S</span> </p> </div> <span>のマ

CSSでテキストを左から流れるように表示するアニメーションを作成する方法を紹介しています。 言葉のチョイスの問題ですが、もし「流れるテキスト」という意味合いでこのページにアクセスしてしまった場合は以下の記事が目的のものかもしれません。 流れる文字のCSSアニメーションサンプル集 流れるようにテキストを表示する See the Pen CSS | Slice Text by yochans (@yochans) on CodePen. HTMLにはテキストを表示する為のpタグを設置しています。 <p class="flowing">HELLO WORLD</p> 今回のCSSアニメーションは横幅を可変させて左側から順に表示するようにしています。 横幅がテキストの幅より短い時にデフォルトでは折り返してしまいますので「white-space: nowrap」を指定して折り返さないようにしています

ピュアなCSSのみで雪を降らせてみたアニメーションサンプルです。 以前作成して紹介している雨が降るの雪バージョンになります。 CSSのみで雨が降るアニメーションサンプル 雪が降るCSSアニメーションサンプル CSSのanimationプロパティを使って出来るだけランダムな感じで雪が降るアニメーションを作成してみた動作サンプルとサンプルコードになります。 See the Pen CSS | Alternately change colors in Table by yochans (@yochans) on CodePen. HTMLには雪の他、必要に応じて背景画像やテキストを入れれるように親要素 .container を配置しています。 今回は画像、テキストともに適当ですがサンプルとして入れてあります。 <div class="container"> <img src="https://1

ピュアなCSSのみで色とりどりの紙吹雪が舞うアニメーションサンプルです。 別記事で紹介している雨が降る、雪が降るなどのシリーズになります。 CSSのみで雪が降るアニメーションサンプル CSSのみで雨が降るアニメーションサンプル 紙吹雪が舞うCSSアニメーションサンプル CSSのanimationプロパティを使って出来るだけランダムな感じでカラフルな紙吹雪が舞うアニメーションを作成してみました。 以下は動作サンプルとサンプルコードになります。 See the Pen CSS | Snow Animation by yochans (@yochans) on CodePen. HTMLには紙吹雪の他、必要に応じて背景画像やテキストを入れれるように親要素 .container を配置しています。 画像、テキストともに適当ですがサンプルとして入れてあります、不要なら削除して下さい。 <div cl

CSSのみで作成した桜（サクラ）が舞い落ちるCSSアニメーションのサンプルコードになります。 「紙吹雪が舞う」や「雨が降る」のCSSアニメーションシリーズのひとつです。 サクラが舞うCSSアニメーションサクラが舞うCSSアニメーションの動作サンプルとサンプルコードです。 サンプルでは背景画像はいつもサンプルに使っているものを適当に使っていますが、サクラの雰囲気が出る背景をチョイスすれば良い感じになるかもしれません。 See the Pen CSS | Confetti Animation by yochans (@yochans) on CodePen. HTMLにはサクラの他、背景画像やテキストを格納するコンテナ要素をdivタグで作成しています。 サクラはdivタグの中にspanタグひとつを一枚の花びらとして設置、サンプルでは桜の花びらの数は50個としています。 <div class="

弧を描きながら移動するCSSアニメーションを作成する方法を紹介しています。 transformのtranslateだけでXY移動させようとすると斜めの直線移動になってしまいます。 検索からこのページにアクセスした方はおそらくそこで困っているのではないでしょうか。 弧を描いて移動するCSSアニメーション CSSのみで弧を描いて移動するアニメーションの動作サンプルとサンプルコードです。 動作サンプルでは半円に沿って弧を描くCSSアニメーションを各方向別に4種類設置しました。 各方向セットなのとアニメーションの終了後に逆再生を付けていますので、正直ちょっと弧を描いている感が伝わりにくいサンプルになったと反省、ひとつひとつを見ると弧を描いて移動している事がわかります。 See the Pen CSS Slide animation (basic) by yochans (@yochans) on

矢印が伸びるCSSアニメーションCSSだけで作成する矢印が画面外、あるいは要素の外側から伸びてくるアニメーションデザインの実装サンプルとサンプルコードになります。 伸びる矢印アニメーション。 これまた需要があるのかわからないモノを作りましたが、いつもの事ですか。 4方向分セットで記述していますので、わかりにくいかもですが下部にて個別にも紹介しています。 See the Pen CSS | Arc move animation by yochans (@yochans) on CodePen. HTML部分にはコンテナとなる親要素「.container」をdivで作成しています。 矢印はクラス名「.arrow」を作成し、4方向分の追加クラス名を付けています。 <div class="container"> <div class="arrow left-to-right"></div> <di

円に沿って移動するCSSアニメーション 円の縁に沿って周りながら移動するCSSアニメーションサンプルになります。 円も描画していますが、要素の移動に必要なものではありませんので、無くても大丈夫です。 See the Pen CSS | Arc move animation by yochans (@yochans) on CodePen. HTML HTMLにはコンテナとして親要素class名「.container」を作成、その中に円の枠になる「.circle」と回転する要素「.item」を設置しています。 <div class="container"> <div class="circle"></div> <div class="item"></div> </div> 円、要素ともにpositionプロパティを使って絶対値で配置しています。 また、ともに起点は円の中心点になっています。

要素を移動させた時に残像が残る感じにしたCSSアニメーションのサンプルコードになります。 要素がテキストや画像だとそのままでは使えませんし、このページに検索からアクセスされた方は、おそらくはこれ以外の方法を探している方だと思われーー 残像はGoogle翻訳で「Afterimage」ですが、そのあたりで検索しても良い情報は見つからず。 もっと良い英単語があるのか、いや、そもそも「残像」という言葉の類義語があって、実は皆その言葉を私の知らないところでヒソヒソ楽しんでいるのかい？ @keyframesをめちゃくちゃ細かく設定すれば、ひとつのHTML要素でも一瞬戻したりして残像を演出できそうでしたけど、もうJavaScript使いますよねってレベルで、、、今回はこれで^^ 要素の移動時に残像が残るCSSアニメーション See the Pen CSS | Move along a circle an

マウスホバー時にリストのテキストの下に下線がにょきっと広がるように伸びるCSSアニメーションを紹介しています。 マウスホバーでリストに下線が広がるCSSアニメーション サンプルでは、リストはリンクではありませんがヘッダーメニューやタブメニューなどでもそのまま利用可能です。 アニメーションは、リストのテキスト部分にマウスカーソルを置くと、ニョキッと中央から下線が広がり、マウスカーソルが離れると元に戻るようになっています。 See the Pen CSS | Afterimage animation by yochans (@yochans) on CodePen. HTMLはシンプルなリストタグを設置しています。 <ul> <li>PHP</li> <li>Python</li> <li>CSS</li> <li>JavaScript</li> </ul> 本題とは直接関係ありませんが、リス

色とりどりの円が次々に広がる爆発エフェクトをCSSだけで実装するアニメーションを紹介しています。 CSSだけで実装するにあたり、「円を移動させながら」か「円の色を変えながら」か迷いましたが、今回は後者にしました。 円の位置は固定で、爆発毎に色を変える事でランダムな感じのアニメーションを作成しています。 カラフルな爆発エフェクトのCSSアニメーション カラフルな円の爆発エフェクトのCSSアニメーションです。 HTML、CSS共に出来るだけシンプルな構造で作成しています。 動作サンプルでは白背景ですが、黒背景の方が映えるかもしれません。 See the Pen CSS | Border expand animation by yochans (@yochans) on CodePen. HTMLにはコンテナとなる親要素「.container」、爆発の部分を「.explosions」として中に各