Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

css3

css3 | 色指定時にアルファも同時指定する

概要 色指定時にアルファも同時指定する 内容 CSS3では色指定時にアルファも同時指定することが可能です。 background-color:hsla(h,s,l,alpha); background-color:rgba(r,g,b,alpha); サンプル サンプル作成用のRubyスクリプト # encoding: utf-8 require "…

CSS3新要素 | 2D 3D 変形 | transition-timing-function

パンくず CSS3新要素 時間的変化 transition-timing-function 概要 変化のタイミング・進行割合を指定するtransition-timing-functionについて説明します プロパティ名 transition-timing-function ※2012/03/28現在、ベンダープリフィックスが必要 設定値 項…

CSS3新要素 | 2D 3D 変形 | transition-duration

パンくず CSS3新要素 時間的変化 transition-duration 概要 変化に掛かる時間を指定するtransition-durationについて説明します プロパティ名 transition-duration ※2012/03/28現在、ベンダープリフィックスが必要 内容 変化に掛かる時間を指定します サンプ…

CSS3新要素 | 2D 3D 変形 | transition-property

パンくず CSS3新要素 時間的変化 transition-property 概要 時間的変化の属性指定をするtransition-propertyについて説明します プロパティ名 transition-property ※2012/03/28現在、ベンダープリフィックスが必要 設定値 項目名 設定値 all 全てのプロパテ…

CSS3新要素 | 時間的変化 | transition

パンくず CSS3新要素 時間的変化 transition 概要 時間的変化をまとめて指定するtransitionについて説明します プロパティ名 transition ※2012/03/28現在、ベンダープリフィックスが必要 内容 時間的変化をまとめて指定します サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>transition</title> <style type="text/css"> div.</meta></head></html>…

CSS3新要素 | 2D 3D 変形 | transform:origin

パンくず CSS3新要素 2D 3D 変形 transform:origin 概要 2D変形、または、3D変形の原点を指定するtransform:originについて説明します プロパティ名 transform:origin() transform:originX() transform:originY() transform:originZ() transform:origin3d() …

CSS3新要素 | 2D 3D 変形 | perspective

パンくず CSS3新要素 2D 3D 変形 perspective 概要 3D変形の奥行きの深さを指定するperspectiveについて説明します プロパティ名 perspective() ※2012/03/28現在、ベンダープリフィックスが必要 内容 3D変形の奥行きの深さを指定します サンプル <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>perspec</title></meta></head></html>…

CSS3新要素 | 2D 3D 変形 | transform:perspective

パンくず CSS3新要素 2D 3D 変形 transform:perspective 概要 要素の奥行きの深さを指定するtransform:perspectiveについて説明します プロパティ名 transform:perspective() ※2012/03/26現在、ベンダープリフィックスが必要 内容 要素の深度を設定します サ…

CSS3新要素 | 2D 3D 変形 | transform:skew

パンくず CSS3新要素 2D 3D 変形 transform:skew 概要 要素の傾斜変形を行うtransform:skewについて説明します プロパティ名 transform:skew() transform:skewX() transform:skewY() ※2012/03/26現在、ベンダープリフィックスが必要 内容 要素の表示位置を移…

CSS3新要素 | 応用編 | transform:rotateで回転画像を作成

パンくず CSS3新要素 応用編 transform:rotateで回転画像を作成 概要 要素の回転を行うtransform:rotateで回転する画像を作成します。 内容 JavaScriptのタイマーとCSS3のtransform:rotateを利用して画像を回転させます。 Point VenderPrefix 現状、各社ブラ…

CSS3新要素 | 2D 3D 変形 | transform:rotate

パンくず CSS3新要素 2D 3D 変形 transform:rotate 概要 要素の回転を行うtransform:rotateについて説明します プロパティ名 transform:rotate() transform:rotateX() transform:rotateY() transform:rotateZ() transform:rotate3d() ※2012/03/26現在、ベン…

CSS3新要素 | 2D 3D 変形 | transform:scale

パンくず CSS3新要素 2D 3D 変形 transform:scale 概要 要素の拡大・縮小を行うtransform:scaleについて説明します プロパティ名 transform:scale() transform:scaleX() transform:scaleY() transform:scaleZ() transform:scale3d() ※2012/03/26現在、ベンダ…

CSS3新要素 | 2D 3D 変形 | transform:translate

パンくず CSS3新要素 2D 3D 変形 transform:translate 概要 要素の表示位置を移動させるtransform:translateについて説明します プロパティ名 transform:translate() transform:translateX() transform:translateY() transform:translateZ() transform:trans…

CSS3新要素 | 2D 3D 変形 | transform:matrix3d

パンくず CSS3新要素 2D 3D 変形 transform:matrix3d 概要 3D変形を行うtransform:matrix3dについて説明します プロパティ名 transform:matrix3d ※2012/03/26現在、ベンダープリフィックスが必要 内容 3D変形を行います 設定値 matrix3d(数値*16)matrix3d( x…

CSS3新要素 | 2D 3D 変形 | transform:matrix

パンくず CSS3新要素 2D 3D 変形 transform:matrix 概要 2D変形を行うtransform:matrixについて説明します プロパティ名 transform:matrix ※2012/03/26現在、ベンダープリフィックスが必要 内容 2D変形を行います 設定値 matrix(数値, 数値, 数値, 数値, 数…

CSS3新要素 | 背景・ボーダー | box-shadow

概要 css3のボックスに影をつけるbox-shadowについて説明します プロパティ名 box-shadow 内容 ボックスに影をつけます 設定値 box-shadow: 5px 5px 5px 5px #55ff55 inset; 各パラメーターは 1つ目:x軸オフセット 2つ目:y軸オフセット 3つ目:ぼかし 4つ…

CSS3新要素 | 背景・ボーダー | box-decoration-break

概要 css3のボックスが改行する際の表示形式を指定するbox-decoration-breakについて説明します プロパティ名 box-decoration-break 内容 ボックスが改行する際の表示形式を指定します 設定値 設定値名 設定値内容 slice スタイルが全体に適用される clone …

CSS3新要素 | 背景・ボーダー | border-image

概要 css3の枠線に画像を指定するborder-imageについて説明します プロパティ名 border-image 内容 枠線に画像を指定します 設定値 設定値名 設定値内容 border-image-source ボーダーに使用する画像 border-image-slice 画像の端から内側へスライスする距離…

CSS3新要素 | 背景・ボーダー | border-radius

概要 css3の角丸を指定するborder-radiusについて説明します プロパティ名 プロパティ名 設定内容 border-radius 四つ角全ての角丸を設定 border-top-left-radius 左上の角丸を設定 border-top-right-radius 右上の角丸を設定 border-bottom-left-radius 左…

CSS3新要素 | 背景・ボーダー | background-size

概要 css3の背景のサイズを指定するbackground-sizeについて説明します プロパティ名 background-size 内容 背景のサイズを指定します 設定値 設定値名 設定値内容 auto 自動算出(初期値) contain 縦横比は保持。最大サイズで背景に表示 cover 縦横比は保…

CSS3新要素 | 背景・ボーダー | background-origin

概要 css3の背景の基準位置を指定するbackground-originについて説明します プロパティ名 background-origin 内容 背景の基準位置を指定します 設定値 設定値名 設定値内容 padding-box パディングボックス border-box ボーダーボックス content-box コンテ…

CSS3新要素 | 背景・ボーダー | background_clip

概要 css3の背景の適用範囲を指定するbackground_clipについて説明します プロパティ名 background_clip 内容 背景の適用範囲を指定します 設定値 設定値名 設定値内容 border-box ボーダーボックス padding-box パディング content-box コンテント サンプル …

css3の新要素

概要 css3の新要素をまとめます 新規追加タグ 色指定 プロパティ 内容 リンク先 hsla,rgba 色指定時にアルファも同時指定 http://d.hatena.ne.jp/tbpg/20131001/1380642050 背景・ボーダー プロパティ 内容 リンク先 background_clip セクション http://d.ha…

RubyでCSS3のベンダープリフィックス付与スクリプトを作成する

概要 CSS3の草案段階の機能に対してはベンダープリフィックスをつけることになっています。 例えば、CSS3の中でもサンプルで目にすることの多い角丸の指定を行うborder-radius:15px;というプロパティですが、現状記述する場合はベンダーごとに複数の記述を行…