CSS3(126)

126follower
goto_jp さんのアバター 497views

CSS3:3Dギャラリー

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

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

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

CSSによる3D表現の基礎

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

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

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

[ 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,500views

divの縦横比を維持する

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

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

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

「: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 さんのアバター 367views

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,003views

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

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

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

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

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

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

CSS3:縦の棒グラフを作る

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

CSS3:グリッド背景を作る

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

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

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

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

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

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

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

CSSフィルター:画像をセピアにする

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/cmdel 画像をセピアカラーにするといったことができます。 CSS filter:sepia(100%); 0%で通常時の画像で、100%に... 2014年5月8日
goto_jp さんのアバター 10,953views

CSSフィルター:画像の明度を変える

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/tfoqh CSSフィルターで画像の彩度を調整できます。 CSS filter:brightness(100%); 明度100%が平常時で、0... 2014年5月7日