CSS3(128)

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

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

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

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

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

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

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/hxsgi CSSフィルターで画像の彩度を調整できます。 CSS filter:saturate(100%); 彩度100%が平常時で、0%に... 2014年5月7日
goto_jp さんのアバター 1,366views

CSSフィルター:画像をグレースケールにする

サンプルはこちら。http://codepen.io/KazuyoshiGoto/pen/tqDKv CSS3はフィルターで画像の色を制御できます。 CSS filter: grayscale(100%); グレースケールを100%... 2014年5月2日
goto_jp さんのアバター 45,255views

CSSフィルター:背景の一部をぼかす表現

See the Pen nhstF by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. テキストの乗っているレイヤーで擦りガラスを通したような表現を作っています。 CSS(Sass) HT... 2014年5月2日
goto_jp さんのアバター 4,200views

CSS3アニメーション:ズームアップ

サンプルはこちら。ドアラにマウスオンしてください。 See the Pen fasIx by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. サンプルのように人の写真でやると面白いです。 ... 2014年5月1日
goto_jp さんのアバター 5,369views

CSS3アニメーション:伸びる棒グラフ

サンプルはこちら。 See the Pen fxCya by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. イケてる風なインフォグラフィックでよく見る、伸びるアクションをする棒グラフのサン... 2014年5月1日
harada さんのアバター 213views

背景は透過したいがその上にのっている要素は透過させたくない

CSS3から追加されたRGBaという色指定を使うことで可能です。表示サンプルはこちら CSS background-color:rgba(255,255,255,0.5); RGBa形式への変換はこちらのフォームが便利そうです。色コー... 2014年4月28日
goto_jp さんのアバター 302views

CSS3:新プロパティ「resize」

「resize」を使うことで、ユーザ任意のリサイズの可否を設定できます。 このボックスの右下にサイズ変更のツマミが出ています。 モダンブラウザではブラウザが標準でtextareaの変形を許可しているため、それを拒否するために使われる... 2014年4月21日
goto_jp さんのアバター 301views

CSS3:新プロパティ「selection」

「selection」を使うことで、テキスト選択時のスタイルを設定することができます。 ここのテキストを選択してみてください。他と異なり赤くなります。 CSS 上記サンプルのソースは下記。 .selection::selecti... 2014年4月21日
goto_jp さんのアバター 401views

CSS3:transformで変形させる。

CSS3からの transform プロパティを使うことで様々な変形加工をすることができます。IEの対応状況はお察し。 CSS .box { margin:20px; background:#ccc; width:100px; pa... 2014年4月18日
harada さんのアバター 699views

Selectivizrを利用してIE8以下でもCSS3を有効にする

Selectivizrを読み込むことでIE8以下でもCSS3のセレクタが有効になります。利用方法は簡単で、ダウンロードしたselectivizr.jsファイルを以下のようにヘッダーで読み込むだけです。 <!--[if (gte IE... 2014年4月4日
goto_jp さんのアバター 287views

CSS3の新プロパティ「columns」

名前の通りカラム分けを行ってくれるCSSプロパティです。ベンダープレフィックス付きで下記のように記述します。 .columnBox { -webkit-columns: 100px 3; -moz-columns: 100px 3... 2014年3月31日
goto_jp さんのアバター 361views

CSS3:ロードアイコンパターン20

表示サンプルはこちら。 http://jsdo.it/goto_jp/rg4l HTMLはこちら。 <span class='icon20'></span> Sassの記述は下記になります。... 2014年3月26日
goto_jp さんのアバター 214views

CSS3:ロードアイコンパターン19

表示サンプルはこちら。 http://jsdo.it/goto_jp/qZRK HTMLはこちら。 <span class='icon19'></span> Sassの記述は下記になります。... 2014年3月25日
goto_jp さんのアバター 494views

CSS3:ロードアイコンパターン18

表示サンプルはこちら。 http://jsdo.it/goto_jp/sOpB HTMLはこちら。 <span class='icon18'></span> Sassの記述は下記になります。... 2014年3月19日
goto_jp さんのアバター 357views

CSS3:ロードアイコンパターン17

表示サンプルはこちら。 http://jsdo.it/goto_jp/wiUA HTMLはこちら。 <span class='icon17'></span> Sassの記述は下記になります。... 2014年3月18日
goto_jp さんのアバター 322views

CSS3:ロードアイコンパターン16

表示サンプルはこちら。 http://jsdo.it/goto_jp/e5aY HTMLはこちら。 <span class='icon16'></span> Sassの記述は下記になります。... 2014年3月17日
goto_jp さんのアバター 382views

CSS3:ロードアイコンパターン15

表示サンプルはこちら。 http://jsdo.it/goto_jp/eeEk HTMLはこちら。  <span class='icon15'></span> Sassの記述は下記になります... 2014年3月14日
goto_jp さんのアバター 366views

CSS3:ロードアイコンパターン14

表示サンプルはこちら。 http://jsdo.it/goto_jp/pk8bG HTMLはこちら。 <span class='icon14'></span> Sassの記述は下記になります... 2014年3月13日