【いますぐつかえるCSS3/JavaScriptコードサンプル】イントロイメージ、画像フィルター、スライドボックスなど。【NIJILOGセレクション】

file000962554564

NIJILOGがネットで見つけた素晴らしいコードを紹介する【いますぐつかえるCSS3/JavaScriptコードサンプル】
思わず人に紹介したくなるほどのクオリティの作品ばかりですので是非コードも合わせてみてくださいね。

※タイマーをつかっている作品などはデモがうまく動かないことがあります。デモ内右下をマウスオーバーしてRERUNを押すか、直接プレイグラウンドで見てみてください。

CSSだけでグイングイン動く印象的なイントロイメージ

スマホ、タブレット、テレビのフレームが順番にアップになるステキなコード。
CSS3 の animation でつくられてます。
開始数秒で終わってしまうので、動いていない場合は RERUN してください。

See the Pen CSS Devices Icon (animated) by Paulo Nunes (@syndicatefx) on CodePen.

線が絵になっていく、SVGとpolygonをつかったイントロイメージCSS3コード

線がどんどん動いていって山の絵が出来上がるキレイなイントロ。
サイトのロゴやヘッダーイメージにつかえそうです。
animation と SVG と polygon で出来ているので取っ付きにくいですが、マスターすれば幅が広がること請け合いです。
開始数秒で終わってしまうので、動いていない場合は RERUN してください。

See the Pen 14islands logo line animation by 14islands (@14islands) on CodePen.

薄いフィルターをマウスオーバーで動かすCSSコード

背景画像に薄いフィルターをかけて動かすCSS。
そんなに特徴があるコードではないんですが、デザインがきれいだったのでピックアップ。

See the Pen background-blend-mode for usage in design by yoksel (@yoksel) on CodePen.

マウスオーバーでクリッとスライドするボックス

二面つなげた画像を transition でゆっくりスライドさせています。
画像以外に普通の文字コンテンツなんかでもそのまま使えそうですね。

See the Pen Responsive Flat UI Box Menu Sliding by SAMSURY SITES (@samsurysites) on CodePen.

ブレンドモードをつかったカラフルな CSS3 背景イメージ

まるで画像みたいですが CSS3 の linear-gradient で線形グラデーションをたくさん重ねて表現しています。
ブレンドモードをつかっているので、ブレンドに対応している chrome と未対応のブラウザでは違った見えかたをします。

See the Pen The Cicada background + background-blend-modes by yoksel (@yoksel) on CodePen.

隠したい文字コンテンツにモザイクをかける

テキスト文字限定ですが、隠したいエリアをぼかしてしまうトリック。
text-shadow を掛けているだけなので画像なんかにはつかえませんが、アイデアが面白かったのでピックアップ。

See the Pen Blurred Text Spoiler by Adam Dillon (@asdillon) on CodePen.