[CSS] 40 Cool CSS Animation Examples – クールなCSSアニメーション作例まとめ
CSS3を使って描画できる様々なアニメーション作例をまとめた記事。多くの作例はCodePenにリンクしており、仕組みを見る事ができます。いくつか見てみたんだけど、凝ったアニメーション作例多いっす。色々と応用できそうな感じ。
Tag Archives: CSS3
[Freebie] 22 Fresh Free Templates in HTML/CSS and PSD: February 2015 Edition – フリーのWebテンプレートやPSDモックアップまとめ
フリーで配布されているWebテンプレートや、PSDモックアップなどをまとめた記事。2015年とあるのでごく最近のリソースでまとめた記事のようです。Webテンプレートはランディングページ系のものが多いようです。Webテンプレート以外にも、UIキットやNokia Lumiaのモックアップなどが紹介されています。新しめの素材探す時にイイかもしれません。アプリのページ作る時にいまだにiPhone 5のモックアップとか使ってると、ちょっとアレだったりしますしね。
22 Fresh Free Templates in HTML/CSS and PSD: February 2015 Edition
[CSS3] Accessible toggle-style checkbox – CSSだけで描けるトグル型のチェックボックス
CSSだけで描画する事のできる、トグル型のチェックボックス。CodePenで書かれているので、ここからHTMLとCSSを確認できます。フォームパーツの装飾ってJSを使って行う場合が多いけど、これはCSSだけで反映されるので使い勝手が良さそうです。
[Web Design] Responsive Patterns – レスポンシブレイアウトのパターンをまとめたサイト
レスポンシブレイアウトのパターンというか、手法をまとめたサイト。レイアウト、ナビゲーション、画像、ビデオなどのメディア類、フォーム、テキスト、モジュール類に分けて、それぞれ「PCサイトではこういう表示、スマホではこんな感じ」という感じで複数の手法を紹介しています。例えばレイアウトの項目では、スマホ表示時にどのようにカラムを落とすのか。また落としたカラムを隠すのであれば、どういう再出現手法があるのかなど細かく紹介しています。レスポンシブレイアウトでスマホ対応する際に、表現手法について顧客と相談する際にめっちゃ役に立ちそう。とってもナイスです。
[Javascript] Flickity – レスポンシブレイアウトとフリック操作に対応したカルーセル
レスポンシブレイアウトとフリック操作に対応したカルーセルメニュー。いわゆるJavascriptを使ったイメージスライダーです。モバイル対応を前提としたサイト制作で使えそうです。フリック操作ですが、タッチデバイスではもちろん、PCブラウザ内でもドラッグにより似たような操作ができます。これはちょっと珍しいかも。導入も簡単で、CSSとJSファイルを読み込むだけ。jQueryなどのJSフレームワークは特に使っていないようです。またオプションも豊富にあるので、様々なカルーセル表現に対応できそうです。ナイスです。
[CSS] MocKit – HTML & CSSで描画されたiPhone 6
HTML & CSSで作られたiPhone 6のモックアップ。画像ではないので、コードをコピペするだけでサイト内に使えます。試しにダウンロードしてみましたが、ソースコード内に「Put your screenshot here」とコメントアウトしてあるので、iPhoneのスクリーンショットのハメコミもomgタグでサクっとできそうです。カラバリは黒と白が用意されています。フラットに描画されているので、最近のデザインにも合いそうです。
[Icon] icono – CSSだけで描画されたアイコン
CSSだけで描画されたアイコン。使い方はとっても簡単で、サイトからダウンロードできるicono.min.cssをサーバに置いてリンクするだけで導入終わり。あとはclass指定すればアイコンとして使う事ができます。個別の画像ファイルもなくCSSブチ込むだけで導入できるのが楽ですね。用意されているアイコンもシンプルなピクトグラムなので使い勝手が良さそうです。
[Web Design] 35+ Awesome Image Hover Effect With Pure CSS3 – Part 1 – ホバーエフェクトのクールな作例
CSS3を使ったマウスホバーエフェクトの作例をまとめた記事。アニメーションを使ったものや、キャプションの凝った見せ方などが多数紹介されています。ちなみにこの記事はPart1で、Part2はこちらにあります。サムネールのマウスホバーエフェクトのネタ調としてナイスなまとめ。