■CSSで画像を写真っぽく
写真っぽくふちつけたり影つけたり、ついでに角度つけたりとか。 画像自体をいじるのも好きでよくやってるけど……。 ↓
これはTwitterのbotのアイコン用だからいいとして、
たんなるレイアウトのためだけに画像を加工するのはそれはそれで不便かなあとか。
てことでCSSですむものならCSSですませようってことでやってみたのでメモー。
fc2ブログ（CSS設定できる）用に設定したので、気分次第でまたテンプレート変更したりして、
うっかり消えるのを防ぐためにメモー(；´∀｀)
/*■主に画像に、枠と影と傾き──写真風*/
.kagek {
border: 7px;
border-color:#ffffff;
border-style:solid;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
-moz-box-shadow: 2px 2px 2px 2px #ababa8;
-webkit-box-shadow: 2px 2px 2px 2px #ababa8;
box-shadow: 2px 2px 2px 2px #ababa8;
filter: progid:DXImageTransform.Microsoft.Shadow(strength = 2, direction = 135, color = '#ababa8');
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(strength = 2, Direction = 135, Color = '#ababa8')";
/*Shadows look very different in IE (Only cardinal directions supported)*/
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element should have a background-color*/
/*All filters must be placed together*/
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
/*IE 7 AND 8 DO NOT SUPPORT SPREAD PROPERTY OF SHADOWS*/
/*角度*/
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
}
↓
「 class="○"」を付け加えるだけでこんな風に表示されるので（いくつか種類作っておけば多様性もでるけど）
とりあえず便利かも。
あと、このCSSの中身はここを使わせてもらったー。↓
http://www.css3.me/
自力でやるよりは断然まともな設定なんじゃないかなとか(；´∀｀)
あと実際には、角度とかないほうがすっきりして使い勝手がいいとは思うけど、角度なしバージョン作ればいいのでまあそれはそれで。
こんな。
おわり。
（最終更新日：2012/08/16）