CSS3(132)

132follower
goto_jp さんのアバター 743views

CSS3:iframeとtransformでスマホ実機風プレビュー

サンプルはこちら。 See the Pen kHIpz by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. transformはなんでも変形させられるので、iframeもこのように表示させる... 2014年7月10日
goto_jp さんのアバター 617views

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

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

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

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

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

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

CSS3:背景画像の拡大

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

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

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

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

CSSによる3D表現の基礎

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

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

divの縦横比を維持する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3:縦の棒グラフを作る

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/zAtvG See the Pen zAtvG by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ... 2014年5月12日