CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
Post on:2017年6月20日
sponsorsr
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。
CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
See the PenCard effect by Alex Moore (@MoorLex) onCodePen.
ぱっと見は一枚絵のようですが、じつはカード型コンポーネントで、非常に美しいエフェクトです。
See the PenBlur Experiments by Alex Moore (@MoorLex) onCodePen.
磨りガラスのような美しいパネル。レスポンシブ対応です。
See the PenzrXJpW by Alan Houser (@alanhouser) onCodePen.
最近はヘッダとコンテンツの区切りが斜めや曲線のデザインが増えてきました。
See the PenCss waves by Mehmet Burak Erman (@mburakerman) onCodePen.
CSSのみで曲線、しかも波打つようにアニメーションします。
See the PenElastic stroke SVG by Fabio Ottaviani (@supah) onCodePen.
曲線もSVGを使うとひと味違います。弦のように反応します。
See the PenCSS only particle system by Robin Selmer (@robinselmer) onCodePen.
背景にCSSのみで美しい幾何学状のアニメーションを実装します。
See the PenBarberpole Hover Animation by Chris Coyier (@chriscoyier) onCodePen.
カード型コンポーネントのホバーエフェクトのアイデア。この発想はありそうでなかった。
See the PenWorld Places (CSS 3d hover) by Akhil Sai Ram (@akhil_001) onCodePen.
倒れているカードがホバーで起き上がります。
See the PenCards Interaction with CSS by Dhanish (@dhanishgajjar) onCodePen.
カードをホバーすると拡大し、さらにコンテンツを追加するエフェクト。
See the PenCSS Paper Text by Mattia Astorino (@equinusocio) onCodePen.
紙を折ったようなかわいいテキストのエフェクト。
See the PenCSS-Only Direction-Aware Cube Links by Gabrielle Wee (@gabriellewee) onCodePen.
CSSのみで、ホバーの方向によってエフェクトが変わります。一昔前までは、JavaScript必須でしたね。
See the PenCSS-only directionally aware hover by Giana (@giana) onCodePen.
ホバーするとパネル間を移動するようにオーバーレイを表示するテクニック。これもCSSのみです。
See the PenResponsive Blog Post by Gary Busey by Joshua Ward (@joshua_ward) onCodePen.
レスポンシブ対応のブログ記事の見せ方。
See the PenScrolling Golden Spiral by Nick (@narrowdesign) onCodePen.
スクロールすると、コンテンツを黄金螺旋に沿って回転しながら、拡大します。
See the PenGrid Curtain by Dominic Magnifico (@magnificode) onCodePen.
グリッドのカーテンを開くようにコンテンツを表示します。
See the PenSlider transitions by Mirko Zorić (@fluxus) onCodePen.
垂直に分割したレイアウトのスライダーです。スワイプにも対応しており、気持ちいいです。
See the PenCSS Gallery Hover Effect by Sasha (@sashatran) onCodePen.
画像をホバーした際にアニメーションでキャプションを表示するエフェクト。
See the PenCSS - Inheriting Shadow Color by Dhanish (@dhanishgajjar) onCodePen.
ボックスのカラー指定から継承させてシャドウのカラーを指定するテクニック。
See the PenVoyager Timeline by Mehmet Guler (@mehmetgulerue) onCodePen.
レスポンシブ対応の美しいレイアウトのタイムラインコンテンツ。
See the PenProject Timeline by Russell Bishop (@russelllighthouse) onCodePen.
こちらもタイムラインで、CSSのみでここまでできるんですね。
See the PenMulti-color backgrounds (CSS only) by Kedar (@kedar) onCodePen.
シンプルなHTMLで、背景をマルチカラーにするテクニック。
See the PenVertical split layout text effect by Mandy Michael (@mandymichael) onCodePen.
ただの垂直分割レイアウトではありません。「a」が2色になっているのに注目です。
See the PenResponsive Comma List by John Graham (@johnegraham2) onCodePen.
デスクトップ時は通常のリスト、スマホ時はコンマで区切られます。
See the PenPure CSS Responsive Flexbox Navigation by Mehmet Burak Erman (@mburakerman) onCodePen.
Flexboxで実装されたレスポンシブ対応のナビゲーション。アイテムがデスクトップ時は水平に、スマホ時はドロップダウンで配置されます。
See the PenNav Animation by Marjo Sobrecaray (@maaarj) onCodePen.
ホバーすると広がるタイプのナビゲーション。面白いアイデアですね。
See the PenButton hover effects with box-shadow by Giana (@giana) onCodePen.
box-shadowを使ったボタンのエフェクト集。
See the PenArrowed link - circle on hover (cf Google Home website) by Alexandre Jolly (@AlexandreJolly) onCodePen.
矢印リンクのかわいいエフェクト。
See the PenCSS-only super tilt button by Charlotte Dann (@pouretrebelle) onCodePen.
ボタンをクリックする位置によって、ボタンの傾きが変化します。
See the PenSass button border hover effect mixin by Giana (@giana) onCodePen.
ホバーすると、ボーダーが美しく輝くエフェクト。
See the PenSearch UI Animation by Ben Sinca (@arcticben) onCodePen.
クリックする前に、虫眼鏡アイコンをクリックすると、どうなるか想像してみてください。
そうくるか！ と思いましたｗ
See the PenNice Scroll Effect SVG by ahmed beheiry (@ahmedbeheiry) onCodePen.
ホワイトのヘッダとハンバーガーアイコンに注目。ゆっくりスクロールするとかわいいエフェクトに出会えます。
See the PenGradient Buttons with Background-Color Change (CSS-only) by MrPirrera (@pirrera) onCodePen.
美しいグラデーションを使ったホバーエフェクト集。
See the Pen#dailyui 010: Social Share by Gabrielle Wee (@gabriellewee) onCodePen.
ソーシャルボタンのアイデア。登場時も面白いですが、クリックした時も面白いです。
See the PenFlexbox Buttons by Alexandre Jolly (@AlexandreJolly) onCodePen.
Flexboxを使って実装されたボタン集。
See the Pen6 CSS Studio Ghibli Charaters by chilli con code (@chilliconcode) onCodePen.
最後はCSSで実装されたジブリキャラクター達。再現度はかなり高いです。
sponsors
Related Posts
Sponsors
Recnet Entry
- デザイナー目線で、デザインにおける写真の扱い方に着目したこれまでになかった新機軸のデザイン書 -デザインは写真が9割
- CSSでついにif elseの条件文が使える！ if()関数の便利な使い方を解説
- デザイナーはダウンロードしておこう！ TikTokからオフィシャルフォント「TikTok Sans」がオープンソースでリリース
- ユーザーのマウスやキーボードの動き（運動量や方向）から次にどの要素を操作するか予測するスクリプト -ForesightJS
- 2025年のプライムデーもいよいよセール最終日！ 見逃しがちな超目玉お買い得品を紹介します
- これは絶対見逃すな！ 値上げ前最後のアドビセールが開催、AmazonでCreative Cloud コンプリートプランが驚きの46％オフ
- Amazonで、2025年プライムデーのセールが開催！ 私が購入して本当によかったものを紹介します
- ビー・エヌ・エヌ社のKindleセールはかなり貴重！ 1年ぶりとなる夏のセールが開催、Web制作・デザイン・イラスト関連のKindle本がお買い得です
Pickup Entry
- 2025年用、日本語のフリーフォント767種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
- 手書きの日本語フリーフォント、筆文字・毛筆の日本語フリーフォントの総まとめ
- ピクセルフォント・ビットマップ・電卓数字の日本語フリーフォント 総まとめ
- おしゃれな手書き！ 筆記体の英語フリーフォントの総まとめ
- 商用利用無料、国内のフリーイラスト素材の総まとめ
- 商用利用無料、おしゃれでシンプルなかわいい海外のフリーイラスト素材の総まとめ
- フォント名を画像から調べる、日本語・英語のフォントを検索・自動判定できる無料サービスのまとめ
- いい感じの写真画像がクレジット表記無しで無料利用できるサイトのまとめ
- 背景素材に困った時に！ダウンロードしておきたい実用度満点のフリーの背景素材のまとめ
- 2025年のトレンドカラーは温かみのある極上の茶色「モカムース（Mocha Mousse）」
- 色々な色の名前、伝統色の名前が分かるサイトのまとめ
- VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptなどのコードを書く時に便利
- 最近の実装に合わせたHTMLテンプレート
- 5分で完璧に分かる！CSS Gridの基本的な使い方を解説
- 独学の人にオススメ！CSS Flexboxの基礎を一通り学べるチュートリアル
- CSS Flexbox の各プロパティの使い方を詳しく解説
- CSS Flexboxの使い方・バグ情報・グリッドの実装など、有用なリソースのまとめ
- CSSの中央揃えで、最も万能で信頼できる実装テクニック
- 2025年、現在の環境に適したリセットCSSのまとめ
- 2024年版、CSSフレームワークのまとめ
- Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ
- Font Awesome アイコンの使い方と便利な機能のまとめ
- Photoshopの新機能がかなり便利！かゆいところに手が届く改善点が盛りだくさん
- Photoshopの選択範囲や切り抜きはこれが一番簡単で正確！CC 2021で進化した選択範囲とマスクの作成
- 2025年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
- ウェブデザイナーは知っておきたい、ページレイアウトの代表的な10のパターン
- フォントやタイポグラフィの知識・テクニックを学ぶまとめ
- レスポンシブ対応のWordPressのテーマファイルのまとめ
- プロカメラマン仕様、Photoshopのトーンカーブのまとめ -簡単に写真画像の自然光とカラーを印象的に美しく仕上げる
- 写真がもっと楽しくなる！写真画像をワンランク上に仕上げるPhotoshopのアクションのまとめ
- 黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ
- 黄金比をサイトのデザインに取り入れる簡単な３つの方法
- フェルメールやゴッホ、北斎など西洋・日本の名画を楽しめるサイト集
- 美しい日本語を使いたい、ワンランク上のビジネスメールの作法
- 著作権・肖像権について、写真やイラストなどの素材を安全に使うために知っておきたいこと
