Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Tag Archives: CSS3

[CSS] Sloped edges with consistent angle in CSS – 斜めのコンテンツ区切り法色々

  • Pocket
  • このエントリーをはてなブックマークに追加

斜めにコンテンツを区切る手法を複数紹介した記事。記事内では3つのやり方が紹介されており、1つはボックス要素全体を傾けて、中のコンテンツだけ傾きを戻すというもの。もう2つはボックス要素の後(::after)に空コンテンツのボックス要素で刈り取るというもの。最後はclip-pathのpolygonでクリッピングマスクするというもの。エッジ部分を斜めにするだけでもこれだけのやり方があるんですね。手法によって対応できるブラウザも変わってくると思うので、斜めエッジやりたい時の参考になりそうです。

[Web Design] AOS – Animate On Scroll Library – スクロール芸のライブラリ

  • Pocket
  • このエントリーをはてなブックマークに追加

スクロールイベントをきっかけに、アニメーションしながら要素を出現させるという、いわゆるスクロール芸のライブラリー。JSとCSSを導入して、あとはブロック要素にゴニョゴニョ書けば実装できるようです。フェイドやフリップ、ズームなどの各種アニメーションが用意されています。こういうの流行ってるしちょっとやってみたい、的なノリでもサクっと導入できそうでナイスです。

[CSS] Pure CSS Parallax Websites – CSSだけで実現するパララックススクロール

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSだけで実装できるパララックススクロール。2014年に書かれて15年に追記されたようなのでそれほど新しい記事ではないけれど、こんな手法もあるんやなー思ったので紹介。transform: translateZを使ってZ軸方向にオブジェクトを移動させてパララックススクロールさせているようです。これなら対応ブラウザの条件さえクリアすれば、わりとサクっと導入できそうです。

[Web Design] Flexible Boxes – Flexboxベースでレイアウトの基礎コードを生成してくれるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

FlexboxベースでWebレイアウトの基礎コードを生成してくれるサイト。サイトの左側からDIVを選択して、右側にあるボタン類を使ってプロパティを調整していくという感じです。作業内容は画面下部にHTMLとCSSコードとしてリアルタイムに生成されます。前提として、Flexboxの基礎的な事は分かってた方が使いやすいかなーという印象でした。レイアウト始める際の基礎コードをコレで作ると楽できるような気がしました。

[CSS] Top 50 CSS Libraries, Frameworks and Tools from 2016 – CSSライブラリで振り返る2016年

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSライブラリやフレームワークが50個紹介されてます。そんなにあるの!?って思いましたが、わりと細かいネタCSSなんかもあって、ゆるーい感じで見れます。例えばStar Wars Intro.css、もうこれはアレです、スター・ウォーズのイントロを再現しただけのCSSです。他にはマイクラっぽい3Dオブジェクトを作るものCSSだけで作るローディングアニメーションなどもあります。Brand ColorsなんかはCSSライブラリというよりはカラーピッカーですね。結構量も多いので見応えあります。

[CSS] cssreference.io – CSSプロパティ名から効果を学べるリファレンスサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSプロパティ名ごとに、分かりやすく画像で説明がされたリファレンスサイト。ページ左に並んでるプロパティ名をクリックすると、どのように使うのか、また指定するとどういう結果になるかを説明してくれます。いわゆる正引きのリファレンスサイトなんですが、アニメーション関連のものは実際にサイト内で再生できたりして、とても丁寧な印象です。あとFlexboxやAnimations、Box model、Typographyなどは固有のページにまとめられている点も分かりやすい。CSSの基礎をこれから学ぼうという人にちょうど良さそうな感じのコンテンツです。

[Web Design] Use Your Interface – アニメーションで見るインターフェース作例

  • Pocket
  • このエントリーをはてなブックマークに追加

動きに関するクールなUI作例を、アニメーションで紹介するデザインギャラリー。サイト内ではドラッグ操作、ロゴのアクション、円形エフェクトの3つのカテゴリに分けて紹介されていますが、最新のものはLatestでまとめて紹介されています。各作例はアニメーションGifを使って紹介されているので、サイト内でそのまま動きを見る事ができます。WebだけでなくMobile AppのUI作例集としてもイイ感じです。

[CSS] A huge collection of CSS backdrops – CSSだけで描画するクールなグラデーション背景

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSだけで描画するクールな背景グラデーションをまとめたもの。いやこれ美しいですね。どのグラデーションも落ち着いたモノトーン気味の上品な感じのアレです。個別にコピペで適用する事もできますが、こちらにあるCSSファイルを使えばまとめて導入する事もできます。導入後は作例をクリックする事でClass名をコピーできるので、適用もサクサクできます。ちなみに本来のトップはこちらなんですが、一覧ページの方が見やすいのでそちらへのリンクとしました。