[B! デザイン][css] petitvioletのブックマーク

petitviolet id:petitviolet

デザインとcssに関するpetitvioletのブックマーク (2)

動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
petitviolet 2014/06/06
デザイン

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

デザイン
リンク
1