CSS3(131)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS3:新プロパティ「resize」

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

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

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

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

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日