プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック

作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形

[miporinky]

マスクキャプション

[zyakky]

[01_33_CSS/Animation]

[kzwtsyk]

tips

[nakagaw]

こういうの助かる

[misaquo]

これ使えばプロっぽくなるまとめ。

[lllinko]

プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック

[musicala]

プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック via @commte

[nutekusunoki]

最近のCSSを使ったトレンド感のある動きをまとめていてとても参考になる

[kasumani]

プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきま

[sase]

CSSでこんなにできる。覚えておきたいが忘れるのでブクマ

[osanpo_gon]

あとで

[z1a2nh]

ﾌﾝｶﾞｰ

[otiai10]

あくまでこっそり

[taniai114]

なるほど！使えそう♪thanks

[nffsjj]

いいまとめ。あとで読む。

[poppun1940]

WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 もくじ マスク １．マスク・キャプション ２．円形キャプシ

[adsty]

CSSのみで見栄えを良くする動きを実現できるテクニック集。

[sabotem]

いくつか使いたい

[akichan88]

スタイルシート！

[yhys07]

動きがあって見栄えのするCSSサンプル集。CSSだけでこんなに動かせるって覚えておこう。ブログとかにも使えるのかな？

[technuma]

フルスクリーンにフィット→background-size: cover;

[gisukenet]

フルスクリーンにフィット→background-size: cover;

[snowsunny]

CSSで出来る、動きのある表現まとめ。どれも良い感じ！今度使ってみよー。

[ebisu3htn]

WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 もくじ マスク １．マスク・キャプション ２．円形キャプショ

[minimum_sho]

メガメニューなど

[webskillup]

動き

[y-kawaz]

「プロっぽくしたい！」ていう素人は覚えたこと全部使いたがるので「こっそり使いたい」を満たせないであろう罠（笑

[mtart]

動きのテクニック

[Sips]

CSS3

[tetokon]

メモメモ