CSS3(131)

131follower
goto_jp さんのアバター 600views

CSS3:CSSだけでツールチップ

サンプルはこちら。 See the Pen CSS only Tooltip by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. リンクにマウスオンでツールチップが出ます。 CSS(Sas... 2014年7月9日
Yukimi Sato さんのアバター 2,675views

CSS3のみでplaceholderをフォーカスした時に空にする

input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; } input:... 2014年6月27日
goto_jp さんのアバター 1,364views

CSS3:アイコンに回転アニメーション

サンプルはこちら。 See the Pen rncjE by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. オンマウスでアイコンがアニメーションします。 CSS(Sass) a { ... 2014年6月24日
goto_jp さんのアバター 473views

CSS3:背景画像の拡大

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

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

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

CSS3:3Dギャラリー

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

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

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

CSSによる3D表現の基礎

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

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 さんのアバター 6,066views

divの縦横比を維持する

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

[ 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 さんのアバター 384views

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

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

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

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

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

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

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

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

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

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

CSS3:縦の棒グラフを作る

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

CSS3:グリッド背景を作る

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