プロっぽくなった！こっそり使いたい「動きのある」CSSテクニック
作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形
斜めのラインを使うスタイルシートのチュートリアル | コリス
コンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。 Slopy Elements with CSS3 [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ 斜めのラインはCSS3で実装されているので、Chrome, Safari, Firefox, IE9でご覧ください。 demo 1 実装のポイント コンテンツ自身は回転させず、コンテンツのラッパーを回転させます。 回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。 HTML 見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。 <section class="se-container"> <div class="se-slop
CSS3 transform:rotate() 要素を回転表示する
transformプロパティのrotate()を使う事によって要素を回転表示することができます。 transformプロパティのまとめはこちらから。 値 rotate(回転角度) ： rotate()関数では、角度によって2D回転を指定。 rotateX(回転角度) ： X軸を軸とする角度によって時計回りの回転を指定。 rotateY(回転角度) ： Y軸を軸とする角度によって時計回りの回転を指定。 rotateZ(回転角度) ： Z軸を軸とする角度によって時計回りの回転を指定。 rotate3d(数値, 数値, 数値, 回転角度) ： rotate3d()関数では、 最初の3つの数値で[x,y,z]ベクトルの指定。最後に角度によって時計回りの回転を指定。 回転角度の値はdegを入力。 例： -moz-transform: rotate(160deg); -webkit-transform
CSS3 transformプロパティ scale() で要素を拡大、縮小
transformプロパティのscale()は、要素を拡大、または、縮小表示する時に使用します。 値としてはscaleX()、scaleY()、scaleZ()、scale3d()等があります。 値 scale(数値, 数値) ： 2つの数値で2D縮尺比率を指定します。1つ目の数値はX方向、2つ目の数値はY方向の比率となります。2つ目の数値は省略することができます。（1つめの数値となる。）[x値、y値] scaleX(数値) ： X方向の縮尺比率を指定。Y方向とZ方向の比率は1となる。[x値,1,1] scaleY(数値) ： Y方向の縮尺比率を指定。X方向とZ方向の比率は1となる。[1,y値,1] scaleZ(数値) ： Z方向の縮尺比率を指定。X方向とY方向の比率は1となる。[1,1,z値] scale3d(数値, 数値, 数値) ： 3つの数値で3D縮尺比率を指定。 1つ目の数値は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
