web-tesign > HTML＋CSS3 > CSS3の変形とボカシ
CSS3について
このサイトのメインビジュアルでは、transform という文字や画像を拡大・縮小、移動、回転などを指定出来るプロパティを使っているが、単一のimageではなく大掛かりにdiv要素に使ってるので結構設置がめんどくさくてレスポンシブに合わせて縮小率やブラウザ認識による中心軸の認識違いなどなかなか苦労はしている。transform：auto；という指定が出来たら良かったのだけど無理みたい。 簡単なところでは、今まで気がつかないまま透過効果などCSS3を使っていて、画像を使わない状態でのぼかしやアニメーション効果がCSSのみで出来るのが嬉しい。
| rotate(deg) | 回転（deg で指定。10deg や -10deg など） |
|---|---|
| scale(xy[x,y]) | 拡大・縮小（数値を指定。1 や 0.5 など） |
| skew(deg) | X軸，Y軸へのゆがみ（degで指定。10deg や -10deg など） |
| translate(xy[x,y]) | 移動（px で指定。10px など） |
●タイトル部分のサンプル
タイトル部分のサンプルです。
ここまで〜という位の合わせ技ですが、使い過ぎると嫌らしいくなるのでいざとなったら使う所が少ない。しかしこの簡単なソースのみでクリックすると①スムーズにカラーが変色する。②ぼかしが入る の状態が作れる。まぁお決まりでie8以下は無効ですが…しかたないですね…そういえば、MacがOX10.9.2に無償アップロードしてて、ついVer.アップしてしまった〜CS2（古）や昔のiMovieHD（←これが好きだった）がバッテンついて完全に使えなくなってしまったよ。
●クリック前の指定（リンク前は通常の指定）
1 2 3 4 5 6 7 8 9 10 11 12 13 | h1.art-postheader,.art-postheader a{font-family:Hui,"Century Gothic",Arial,"メイリオ",/* WebフォントのHui使用 */ "Meiryo", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;color:#ff9900;font-size:30.5px;letter-spacing:-2pt;font-weight:100;/* Webフォント100で一番細く */line-height:150%;padding-top:15px;margin-top:30px;} |
●クリック後の指定（5行目と12行目以降が変革部分）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | h1.art-postheader:hover,.art-postheader a:hover{font-family:Hui,"Century Gothic",Arial,"メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;color:#009b6d;/* 変更後のカラー */font-size:30.5px!;letter-spacing:-2pt;font-weight:100;line-height:150%;padding-top:15px;margin-top:30px;-webkit-transition: color 2s ease; /* ①この部分でスムーズに変色 */-moz-transition: color 2s ease;-o-transition: color 2s ease;transition: color 2s ease;text-shadow: #7aff04 0px 0px 4px;/* ②この部分でぼかしを入れている */color: #7aff04;} |
0
0
コメントを残す