CSSだけで作成、シンプルなコードでグラフィカルな画像ギャラリーを作るコード 『CSS/HTML Only Carousel』
左右に表示されるサムネイルをクリックすることで、隣の画像を大きく中央に表示させる画像ギャラリーです CSSだけで作られており、さらにコードもとてもシンプルです
CSSで作ったリボンデザインのボタン Ribbon Btn
CSSだけで作られたリボンで、hoverアクションもあるボタンとなっています コードはコピペで使えるようにまとめられています
テキストエリアのプレースホルダ(消える文字)を複数行対応させる方法 multi-line placeholder text (webkit)
目からウロコが落ちる webkit系限定なのですが、こういう使い方があったんですね テキストエリアに複数行の消えるテキストを表示させる方法です 一行じゃ収まりが悪い時に使えますね
[CSS] 無限にちぎれるトイレットペーパー Endless Paper Roll
ほのぼの系のCSSデザインです 使いドコロはかなり限られますが、トイレットペーパーの上辺のカーブのアニメーション演出がうまいなと思う作品
パステルカラーの付箋風のWEBデザインが魅力的 Sticky notes without images
背景は画像を利用しているものの、他はCSSでデザインされています。ブロックを付箋で表現したデザインがとてもいいですね。新着記事一覧等にこれを利用するのも有りかと思います
ポップでかわいい テキストベースのローディングアニメーション
カラフルでポップなデザインのローディングアニメーションです #containerLoaderのところを調整すれば、コピペで使えますね
床屋さんに有るクルクル回るアレが CSSだけで作られたアニメーション Barbershop Loader
床屋さん、理容室美容室にある外においてあってクルクル回るサインポールってやつです それがCSSのアニメーションで表現されたものです。
画像なしで、CSSだけで作られた質感が良いスイッチボタン Toggle button in pure CSS
CSSだけで画像を使わず作られたスイッチボタンです、とても質感がよく出来ています このリアルな質感のボタンを見つけ人はついついスイッチを押しっちゃうんじゃないでしょうか
ハートがドクドクと鼓動しているCSSで作られたアニメーション css3 beating heart
ハートがドクドクと動いているように表現したCSSアニメーションです キュートな何かのローディング画面に使ったりも出来そうですね
飛び上がっていくような動作が楽しい SNSボタン
SNSボタンをアイコンのフタのようなもので覆い、マウスオーバーするとそれがクルクルと回転しながら上の方へ消えていくアニメーションです。
レスポンシブなサイトをわかりやすく表現するのに良いアニメーションで魅せるアイディア
レスポンシブサイトを人に紹介するときに、その場にいて実際にブラウザのサイズを変更して見せてやることができればベストですが、こんな表現の方法もあります
CSSだけで雲をかき分けて進むかのような演出をアニメーションで表現
幾つもの雲の画像を使って遠近感を出しながら、アニメーションするものです javascriptは使われておらずCSSのアニメーション効果で作られています
CSSだけで作られた目玉のモンスターっぽくデザインされたスイッチ(チェックボックス) Toggle Switch
ものすごくユニーク、とても楽しいスイッチボタンになっています クリックすると目玉のタイプ・色・方向がアニメーションして変わります。
マウスオーバーでパカっとカバーが開くキュートな SNS・ソーシャルボタンのデザイン Social Button
ボタンにマウスポインターを乗せると、パカっとカバーが開いて中にあるSNSのボタンが見えるという仕組みです ロゴ(アイコン)はウェブフォントで表示されていますので、レイアウトだけ変えてそのまま使えそうです。
CSSを使って描かれたオリンピックの輪 Olympic rings
Olympic rings http://codepen.io/MattSmith/pen/cHjIC 今の時期らいしいものですね オリンピックの五輪の輪をCSSで作成したものです あのリングとリングの重なりを表現してい […]
複数のてtext-shadowを使ってデコレーションされたテキストとアニメーション Trembling text
テキストシャドーをいくつも使うことで、文字に立体感をつけ、アニメーションでブルブルさせたものです ブルブルするアニメーションはちょっと使いドコロを選びますが、text-Shadowをうまく使った文字の装飾はいい勉強になりますね。
3Dにメリーゴーランドの様に回転する 画像ギャラリー 3D images gallery
遊園地に有るメリーゴーランドのように回転する 3Dに出来た画像ギャラリーです 画像をマウスオーバーすれば、回転がとまり、画像に掛けられたグレースケールのフィルターが解除されてカラーの写真になり画像が枠内に収まったまま少し拡大します
ラジオボタンを使った、画像にエフェクトを与えるフィルタリングのアイディア Visual Database In Pure CSS
input type radio をうまく使って、選択中のものにCSSの内容を変化させることで表示に変化を与えています。 画像とinputの内容がうまく連動するように作られていて、絞り込みがされているかのようになっています
CSSだけで作られた、砂嵐も再現されたアナログテレビ Pure CSS TV
CSSのみで作られたアナログテレビです、画面にはアニメーションで砂嵐も流れるようになっています 画面部分にはYOUTUBEとかの動画を埋め込んでも面白いのではないかなと思います
CSSとWEBフォントを巧みに使ったテキスト文字をまるでロゴのように表現されたデザイン
CSSでここまで出来る。CSSとWEBフォントをうまく使って、少しレトロ感があるロゴを作ったコード。文字を入れ替えれば、独自のロゴとしても使えそう
