明日使えるCSS3Tips

読了: 約 4 分

スマホサイトにどの企業も対応するようになってきて、
HTML5とCSS3が使われるようになってきました。

CSS3でもプロパティが増えより多くの表現が可能になりました。
しかし、今使われているものはある程度画一化されている気がします。

そんな中、頻出なCSS3の記述を書き残しておきたいと思います。

概要

1 CSS3の様々なグラデ―ション
- 1.1 このグラデーションのソースコード
2 タップした際にタップ色を個別に変える方法
3 超！必見サイト！
4 面白いCSS3サイト
5 色々な形を表現したCSS3のサイト
6 個人的に使えるサイト

CSS3の様々なグラデ―ション

CSS3の様々なグラデ―ションを簡単に作成してくれるツールです。
サイト

このグラデーションのソースコード

background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top,  #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
background: linear-gradient(top,  #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */

このサイトで様々なブラウザに対応したグラデーションコードが簡単に取得可能です。
この他にも自分でスライダーを動かし、navigationやbuttonに使えるものが作れそうです。
これと角丸を使用して、効率化出来ますね。

タップした際にタップ色を個別に変える方法

{
-webkit-tap-highlight-color:rgba(46,139,110,0.6)!important;
}

だけです。
nanapiとかでも使われている方法ですね。

超！必見サイト！

jsdo.it

カヤックさんの運営するjsdo.itに非常に参考になるTipsが沢山落ちていたので
是非ご覧ください！
一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ

Design Articles

また海外のサイトですが、
CSS3で星型を作ったり、マウスオーバー時にtranstormで動きを付けるなどのサンプルが落ちています。
CSS3 Starbursts

実験です。

かなりソース的に微妙なので、有効とは言い難いですね(笑)

この件に関して、Twitterでドンピシャのtweetが流れてきました。

同意。ほんとにGoogleもやってるから困る / “AMAgrammar <> PROgrammer: CSS3で表現力が高くなったからと言って、span等でボタンを作るのはやめて下さい。いえ、やめなさい。もう少し真っ当なHTMLを作…” http://htn.to/P7KzQw

参考になりますので是非見てみて下さい。
AMAgrammar <> PROgrammer

ちなみにGoogleのソースコードの上の方

view-source:http://www.google.com/

<a class=gbzt id=gb_8 href="http://maps.google.com/maps?hl=en&tab=wl" onclick="gbar.logger.il(1,{t:8})"><span class=gbtb2></span><span class=gbts>Maps</span></a>

個人的にspanタグの中にspanが続くというのは違和感ですが、
CSS3で広がった表現をどこまで許容するのかという事にもよりますね。
特に受託のクライアント案件では難しいかもしれませんね。