●Top
●Category
●Contact
●About
CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ
サイト構築 -CSS
218
689
Post on:2014年12月22日
sponsors
これからのプロジェクトに使ってみたくなるような素敵なアイデア満載のクリエイティブなスタイルシートのテクニックを紹介します。
今年もCSSの進化がすごかったですね。
Form Buttons with Love
ホバー・クリックすると愛に溢れるボタン。
※classの変更にスクリプトを使用しています。
Blackout
もうこれ、僕の知ってるCSSじゃないｗ 100% CSSの美しい光を使ったシネマというかアート。
途中で表示される﹁Begin﹂をクリックすると、更にBlackoutの映像︵と言っていい︶を楽しめます。
Blackoutの説明ページもあります。
isometric Block Effect
ブロックがぼこっと盛り上がるアイソメトリックエフェクトのボタン。
Bouncy Button
バウンドのアニメーションがかわいいボタン、影もリアルです。
※スクリプト使用。
Rogie
弾けるようなアニメーションでロゴが表示されます。ホバー時にも。
Animated Fold Out Menu Labels
ソーシャルサービスのアイコンをホバーすると、折り畳まれていたラベルが表示されます。
Gradiance 2
背景のグラデーションが美しくアニメーションします。
Timeline Dummy
画像無しで作られたタイムライン。レスポンシブ対応でレイアウトも変更されます。
Scroll down that hole.
パララックスの面白い見せ方、ホールの中にコンテンツがスクロールで表示されます。
Slice link text
ホバーでリンクのテキストが変わります。アニメーションも実装方法も面白いアイデアです。
Floating labels -CSS only
入力欄をフォーカスするとラベルが浮き上がるのをCSSのみで実装。
Pure CSS, annotated linear carousel
CSSで実装された水平タイプのカルーセル。
Crazy Angled Button
マンガみたいな面白い形状をしたボタン。ホバーするとアニメーションで形状が変わります。
Brad Frost
落書き風のデザインや動きをCSSで実装。
Progressive blur with CSS
普通の画像にCSSで放射状や線状のブラーエフェクトを適用。
Perspective Background
背景にパースをつけ、映画のエンドロールのようにアニメーションで動かします。
Embossed inpur
エンボススタイルのかっこいい入力欄。
Pure CSS Blurred Video Background Login Box
動画を背景に使った半透明のパネルに配置したログインフォーム。
3d nested navigation
3Dのアニメーションでパカッとひらく多階層のナビゲーション。
Happy Text
ちろちろ動くテキストが、ホバーするとウェーブします。
Newton's Cradle Loader
かわいいアニメーションで動くローダー。画像やアイコンフォントは無し。
CSS3 Pseudo Sound Bars
かわいいアニメーションで動くローダー。画像やアイコンフォントは無し。
Border Fun
ページいっぱいに斜めの対角線で区切った半透明のパネルを配置します。
Better bullets for lists
リストで配置した各項目をホバーするとハイライトします。
CSS fullscreen sections
縦長ページの各セクションをブラウザいっぱいやちょっとだけ次を表示する高さに設定します。
Dynamic Sticky Footer
フッタを常に同じ高さで表示します。
CSS Centering Methods
CSSで天地中央に配置する7つの方法。
Halvsies Hover
ホバーで斜めの区切りをアニメーションでスライドさせます。
CSS only picture wall
CSSで実装されたアニメーションで動くピクチャウォール。
rotate panel
パネルをぶらーんとアニメーションで表示します。
CSS Image Zoom
ホバーすると画像を拡大し、テキストをフェードさせます。
Image hover effect
アニメーションgifにしたら大容量になってしまったので静止画で。美しいフェードのエフェクトで画像を変更します。
Gradient Ghost Buttons
ソリッドなラインのゴーストボタンに美しいグラデーションを与えます。
sponsors
Related Posts
関連記事が見つかりませんでした。
218
689
top of page
Sponsors
誰よりも先をリードするWordPressテーマTCD
coliss
Recnet Entry
●FigmaのAIによる学習﹁コンテンツのトレーニング﹂をオフにする方法、独自性・機密性の高いデザインを扱っている場合は注意が必要です
●ゴシック体の素晴らしい世界が広がる！ 商用利用無料、可読性に優れたフリーフォント﹁永代ゴシック﹂がリリース
●Web制作・デザイン・イラスト関連のこんな大規模Kindleセールは初めて！ 本日終了のもあるので、お見逃しないように
●2024年のAmazonプライムデーで、見逃しがちなお買い得品を紹介します
●国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
●Amazonで、2024年プライムデーの先行セールが開催！ 私が購入して本当によかったものを紹介します
●CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
●Affinityを使ってみたかった人に朗報！ Win, Mac, iPadのDesigner、Photo、Publisherが6ヵ月無料で使用できる
Pickup Entry
●2024年用、日本語のフリーフォント707種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
●手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ
●おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
●商用利用無料、国内のフリーイラスト素材の総まとめ
●商用利用無料、おしゃれでシンプルなかわいい海外のフリーイラスト素材の総まとめ
●フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
●いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
●背景素材に困った時に！ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ
●2024年のトレンドカラーは、癒やしのカラー﹁ピーチファズ︵Peach Fuzz︶﹂
●色々な色の名前、伝統色の名前が分かるサイトのまとめ
●VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利
●最近の実装に合わせたHTMLテンプレート
●5分で完璧に分かる！CSS Gridの基本的な使い方を解説
●独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
●CSS Flexbox の各プロパティの使い方を詳しく解説
●CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
●CSSの中央揃えで、最も万能で信頼できる実装テクニック
●2024年、現在の環境に適したリセットCSSのまとめ
●2024年版、CSSフレームワークのまとめ
●Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
●Font Awesome アイコンの使い方と便利な機能のまとめ
●Photoshopの新機能がかなり便利！かゆいところに手が届く改善点が盛りだくさん
●Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
●UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介
●2023年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
●ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
●フォントやタイポグラフィの知識・テクニックを学ぶまとめ
●無料で高品質！レスポンシブ対応のWordPressのテーマファイルのまとめ
●プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
●写真がもっと楽しくなる！写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ
●黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
●黄金比をサイトのデザインに取り入れる簡単な3つの方法
●フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集
● 美しい日本語を使いたい、ワンランク上のビジネスメールの作法
●著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
Recommend
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書︵レビュー記事︶
Adobeの進化がすごすぎる！ 生成AIによるデザインの新しい作り方が学べるデザイン書︵紹介記事︶
top of page
Category
●サイト構築 -調査・分析
●サイト構築 -設計
●サイト構築 -制作
●サイト構築 -ユーザビリティ
●サイト構築 -ライティング
●サイト構築 -デザイン
●サイト構築 -CSS
●サイト構築 -JavaScript
●サイト構築 -スタイル ガイド
●サイト構築 -検証
●サイト構築 -運用・更新
●SEO対策・検索エンジン
●WordPress
●WordPressのプラグイン
●Freebies︵無料素材︶
●ウェブ サービス
●ハードウェア
●ソフトウェア・アプリケーション
●ブラウザ
●ブラウザ -Internet Explorer
●ブラウザ -Firefox
●ブラウザ -Opera
●ブラウザ -Safari
●ブラウザ -Chrome
●書籍紹介、書評
●Life︵ライフハック︶
●Digress︵雑記・お知らせ︶
●Sitemap︵記事一覧︶
Blog Info
●follow me on Twitter
●subscribe to my RSS
●Powered by WordPress
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
©2024 coliss
Form Buttons with Love
ホバー・クリックすると愛に溢れるボタン。
※classの変更にスクリプトを使用しています。
Blackout
もうこれ、僕の知ってるCSSじゃないｗ 100% CSSの美しい光を使ったシネマというかアート。
途中で表示される﹁Begin﹂をクリックすると、更にBlackoutの映像︵と言っていい︶を楽しめます。
Blackoutの説明ページもあります。
isometric Block Effect
ブロックがぼこっと盛り上がるアイソメトリックエフェクトのボタン。
Bouncy Button
バウンドのアニメーションがかわいいボタン、影もリアルです。
※スクリプト使用。
Rogie
弾けるようなアニメーションでロゴが表示されます。ホバー時にも。
Animated Fold Out Menu Labels
ソーシャルサービスのアイコンをホバーすると、折り畳まれていたラベルが表示されます。
Gradiance 2
背景のグラデーションが美しくアニメーションします。
Timeline Dummy
画像無しで作られたタイムライン。レスポンシブ対応でレイアウトも変更されます。
Scroll down that hole.
パララックスの面白い見せ方、ホールの中にコンテンツがスクロールで表示されます。
Slice link text
ホバーでリンクのテキストが変わります。アニメーションも実装方法も面白いアイデアです。
Floating labels -CSS only
入力欄をフォーカスするとラベルが浮き上がるのをCSSのみで実装。
Pure CSS, annotated linear carousel
CSSで実装された水平タイプのカルーセル。
Crazy Angled Button
マンガみたいな面白い形状をしたボタン。ホバーするとアニメーションで形状が変わります。
Brad Frost
落書き風のデザインや動きをCSSで実装。
Progressive blur with CSS
普通の画像にCSSで放射状や線状のブラーエフェクトを適用。
Perspective Background
背景にパースをつけ、映画のエンドロールのようにアニメーションで動かします。
Embossed inpur
エンボススタイルのかっこいい入力欄。
Pure CSS Blurred Video Background Login Box
動画を背景に使った半透明のパネルに配置したログインフォーム。
3d nested navigation
3Dのアニメーションでパカッとひらく多階層のナビゲーション。
Happy Text
ちろちろ動くテキストが、ホバーするとウェーブします。
Newton's Cradle Loader
かわいいアニメーションで動くローダー。画像やアイコンフォントは無し。
CSS3 Pseudo Sound Bars
かわいいアニメーションで動くローダー。画像やアイコンフォントは無し。
Border Fun
ページいっぱいに斜めの対角線で区切った半透明のパネルを配置します。
Better bullets for lists
リストで配置した各項目をホバーするとハイライトします。
CSS fullscreen sections
縦長ページの各セクションをブラウザいっぱいやちょっとだけ次を表示する高さに設定します。
Dynamic Sticky Footer
フッタを常に同じ高さで表示します。
CSS Centering Methods
CSSで天地中央に配置する7つの方法。
Halvsies Hover
ホバーで斜めの区切りをアニメーションでスライドさせます。
CSS only picture wall
CSSで実装されたアニメーションで動くピクチャウォール。
rotate panel
パネルをぶらーんとアニメーションで表示します。
CSS Image Zoom
ホバーすると画像を拡大し、テキストをフェードさせます。
Image hover effect
アニメーションgifにしたら大容量になってしまったので静止画で。美しいフェードのエフェクトで画像を変更します。
Gradient Ghost Buttons
ソリッドなラインのゴーストボタンに美しいグラデーションを与えます。
sponsors
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書︵レビュー記事︶
Adobeの進化がすごすぎる！ 生成AIによるデザインの新しい作り方が学べるデザイン書︵紹介記事︶
top of page