CSS3(128)

128follower
goto_jp さんのアバター 457views

CSS3:背景画像の拡大

サンプルはこちら See the Pen aAubn by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 最近このようなエフェクトも見かけると思いますが、マウスオンで画像中心軸で拡大がされま... 2014年6月16日
goto_jp さんのアバター 2,423views

CSS3:transitionのフェードアウトにはopacityを使う

サンプルはこちら See the Pen tEeJK by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. transitionのアニメーション表現を改めておさらい。フェードイン表現にはdis... 2014年6月10日
goto_jp さんのアバター 499views

CSS3:3Dギャラリー

サンプルはこちら。 See the Pen sbgwv by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. JavaScriptを使わずCSSだけで完全な3D表現が可能です。※IEではお察し... 2014年6月9日
goto_jp さんのアバター 1,206views

CSS3で3Dの立方体をつくる

サンプルはこちら。 See the Pen yozsJ by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 前回は複数の円状レイヤーのY軸を回転させたものを紹介していましたが、今回はZ軸(前... 2014年5月30日
goto_jp さんのアバター 551views

CSSによる3D表現の基礎

サンプルはこちら。 See the Pen klsHB by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSアニメーションを利用することで3D表現も可能です。 CSS(Sass) ... 2014年5月29日
harada さんのアバター 3,043views

CSSだけでサイズの違う画像をdivの上下中央に配置する

CSSだけでサイズの違う画像をdivの上下中央に配置する方法です。サンプルはこちら。 CSS(IE9まで) .imgBox { margin:5px; background:#EEE; float... 2014年5月28日
Yukimi Sato さんのアバター 218views

[ CSS3 ] 一つのdivで菱型を作る

.hishigata{ width:0px; height:0px; border-top:15px solid transparent; border-left:0px solid transparent; border-right:30... 2014年5月26日
harada さんのアバター 5,794views

divの縦横比を維持する

ウィンドウサイズを変更してもdivの縦横比を維持する場合のcssです。 表示サンプルはこちら CSS div.div01 { /*1:1*/ width:24%; height:24vw; margin:0.5%... 2014年5月26日
Yukimi Sato さんのアバター 9,343views

[ CSS3 ] 背景画像をウィンドウサイズに合わせてフルスクリーン表示する

html{ min-height:100%; ←最低サイズを100%に設定 background-image:url(test.png); background-position:center; background-repeat:no-r... 2014年5月26日
Yukimi Sato さんのアバター 262views

「:focus」で入力エリアのon-offをCSSで制御する

input[type=text]{ border:1px solid #cccccc; } input[type=text]:focus{ border:1px solid #000000; } <input type="... 2014年5月20日
goto_jp さんのアバター 377views

CSS3:perspectiveを使って某映画風テキストスクロール

サンプルはこちら。 See the Pen nFHzi by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSS3の「perspective」プロパティと「transform」による変形で... 2014年5月19日
goto_jp さんのアバター 380views

CSS3:CSSだけで簡易ストーリー表示

サンプルはこちら。 See the Pen gedLt by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ボタンを押すことで連続してカットを表示させています。 HTML <div... 2014年5月16日
Yukimi Sato さんのアバター 1,005views

HTML5とCSS3のブラウザ別対応状況がわかるまとめ「HTML5 & CSS3 Support」

HTML5 & CSS3 Support http://fmbip.com/litmus/ CSS3の各セレクタ別に対応状況がまとめられており、特にIE対応の前には一度確認しておきたいページです。 ... 2014年5月16日
goto_jp さんのアバター 6,686views

CSS3:CSSだけで作るドロワーメニューver2

サンプルはこちら。 See the Pen CSS only drawer menu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 以前作ったものをソース的により合理的に、かつ見た目も... 2014年5月14日
goto_jp さんのアバター 1,504views

CSS3:チェックボックスの状態で大きくデザインを変える

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/FAwcq See the Pen Power button by Kazuyoshi Goto (@KazuyoshiGoto) on CodeP... 2014年5月13日
goto_jp さんのアバター 4,575views

CSS3:縦の棒グラフを作る

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/zAtvG See the Pen zAtvG by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ... 2014年5月12日
goto_jp さんのアバター 2,973views

CSS3:グリッド背景を作る

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/Gywcd CSS3のlinear-gradientの応用で背景をグリッド状にすることが可能です。IEも10以降(?)であれば対応しています。 C... 2014年5月12日
goto_jp さんのアバター 403views

CSSフィルター:画像の階調を変える

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/hjLso 画像の階調を変えネガポジ反転させることができます。 CSS filter:invert(100%); 0%が標準で、100%に高め... 2014年5月9日
goto_jp さんのアバター 282views

CSSフィルター:画像の色相を変える

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/JLqAH 色相環に基づいた色相変換ができます。 CSS filter:hue-rotate(180deg); 0degが標準で、0~360の... 2014年5月9日
goto_jp さんのアバター 670views

CSSフィルター:画像のコントラストを変える

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/CBnul 画像のコントラストを操作することができます。 CSS filter:contrast(100%); 100%が標準で、下げるとコン... 2014年5月8日