Warning: reset() expects parameter 1 to be array, boolean given in /home/users/2/mods.jp-makoto-tanaka/web/wordpress/wp-content/themes/xeory_base/lib/functions/head.php on line 143
このエントリーをはてなブックマークに追加

読了: 約 4 分

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

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

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

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で広がった表現をどこまで許容するのかという事にもよりますね。
特に受託のクライアント案件では難しいかもしれませんね。

天下のW3C

CSS Writing Modes Module Level 3

日本語の横書きだと左から普通は読みますが、
他の言語だと横書きなのに右から読む事もあるそうです。

それに対応していますという説明のページです。

面白いCSS3サイト

Path menu in pure CSS3

色々な形を表現したCSS3のサイト

もうなんでもありですね笑
台形、ハート、などなんでもできますね。
サイトはこちら
The Shapes of CSS

個人的に使えるサイト

CSS3だけで出来る~シリーズが多くなってきましたよね。
CSS3だけで出来るプルダウンなど
見るとわかるのですが、子供セレクタなど使う機会が以前より増えたように思います。
そこでつかるのがこのサイトです。
CSS のシンタックス

プルダウンでどのliにこれだけ使用したいなど細かく指定したいときなどに使用します。
色々考えてJavaScriptを使用せずUI設計出来るようになったのはいいですね。


SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'