[CSS] The Star Wars Intro Crawl in Pure CSS – スターウォーズのイントロCSS
Star Warsのあらすじ説明のイントロを再現したCSS。JSとか使わずにCSSだけで再現しているようです。あらすじについてはもちろんテキストで書かれていて、最後に出てくるダウンロードボタンはちゃんとクリックする事ができます。ネタとはいえしっかりと作られててスゲーなぁと思いました。フォースの導きがありそうな作例ですな。
Tag Archives: CSS
[CSS] Flexbox Patterns – Flexboxを使ったレイアウト作例まとめ
Flexboxを使ったコードスニペットをまとめたサイト。ナビゲーションやタブメニューなどのよく使われるレイアウト作例が、Flexboxを使ってレイアウトされたコードと併せて紹介されています。数はそれほど多くないけど、どれもWebデザインでよく使われるレイアウトなので、コード書く時の素体として使ったりできそうです。Flexboxなら要素数の増減にも柔軟に対応できますしね。
[Generator] Unique gradient generator – 画像からぼかしグラデーションを作成でき、CSSコードを取得できるジェネレーター
画像を極端に拡大する事でぼかし効果のように見せ、それをCSSコードで取得できるというジェネレーター。サイトの背景などに敷くブラーバックグラウンドなんかに使う事を目的としているようです。元となる画像は用意されているものから選ぶ事ができ、また任意の画像をアップロードすることもできます。画像の位置やサンプルするエリアの大きさは右上にあるコントロールパネルから操作でき、またショートカットとして移動に十字キーが、ランダム設定にはRのキーが割り当てられています。気に入った画像ができたらサイト右下にある「Generate CSS」からCSSのグラデーション指定を取得できます。画像部分はBase64でエンコードされているので、別途ファイルが必要になる事もありません。手軽にブラー効果の画像を使いやすい形で取得できるのが便利ですね。
[CSS] imagehover.css – ホバーアクションを多数収録したCSSライブラリー
マウスホバーによるアクションを40種類も収録したCSSライブラリー。サイト内で各Classごとのホバーアクションを確認できます。サイズも19kbと軽く、またLESSやSCSS版も同梱されています。いやこれ便利ですね。早速何かに使おうかなと思っております。
[CSS] Balloon.css – CSSだけで動作するバルーンヘルプ
Javascriptを使わず、CSSだけで動作するバルーンヘルプ。コードはGithubで公開されていて、CSSだけなのでサクっと導入する事ができます。なのにわりと多機能で、バルーンを出す方向や、中に入るコンテンツの量次第で自動で大きくなるなど、使い勝手も良さそうです。
[CSS] Tasty CSS-animated hamburgers – アニメーションするハンバーガーアイコン
マウスオーバーでアニメーションするハンバーガーアイコンの作例が多数紹介されています。それぞれアニメーションや、マウスオーバー後の形が異なるので、用途によって使い分ける事ができます。導入方法についても詳しく解説されており、class名を変更するだけでアニメーションを変更できるようです。スマホ版のナビゲーション作る時に使えそうです。
[Web Design] Can I use… – Webの様々な技術を、各ブラウザがサポートしているかどうかをサクっと調べられるサイト
Webの様々な時術を、各ブラウザ（iOSやAndroid端末も含む）がどの程度サポートしているのかをサクっと調べる事のできるサイト。試しに「Flex」と入力すると、Flexboxのサポート状況が表示されました。背景が黒くなっているライン以降のバージョンでサポートされている、という見方です。また国の指定をしておけば、その国においてどの程度サポートブラウザが普及しているかも知ることが出来ます。ちなみにこのサイトで得られる内容は、The (Unofficial) CanIUse Embedを使う事でEmbed出力する事もできます。アンオフィシャルな方法らしいけど、サイト内で引用したい時に使えます。新しめのCSSプロパティを使おうかどうしようか判断する時に便利ですね。
[CSS] CSS triangle generator – CSSだけで描画する三角形のジェネレーター
CSSだけで描画できる三角形のジェネレーター。方向とタイプ（Equilateralは縦横比固定、Isoscelesは高さと幅を個々に指定、Scaleneは3点を個々に指定）、サイズ、色を入力する事でリアルタイムに三角形の形が変わります。その下にCSSが生成されるので、あとはコピペするだけ。サイト内でコード生成されるのはCSSだけなので、あとはこれを適当なボックス要素にClass指定すれば完了です。CSSで描いちゃえば画像使わなくて済むので便利です。