CSS3がマジですごい件

そもそも’CSS3’なんて言葉すらも知らずに使っていたww ってか、’CSS’すらよく分かってない(爆

そんな私でもココまでなんとかカスタマイズ出来たのは、パクリいえ、コピペのお陰さまさま。そうです。スタイルシートとにらめっこして、コピペを乱用。

その結果を自サイトを表示させながら検証。実に手間暇かけながら’CSS’を学んだワケです。お世辞にも’独学’なんてカッコいぃこと言えない。

結果、このくらいのサイト(表現)は出来る様になった。最近特に気に入っているのが”影”と”時間”です。なんか、小説になりそうな感じですね(笑

影は、コンテンツ自体にも使用していますし、記事タイトルなんかにはテキストに影を使用しています。飛び出す絵本みたいでなんかいぃですよね(笑

でもね、これって実はテーマTwentyElevenにデフォルトで使われているんですよ。スタイルシートを見てみると、随所に使われている事がわかります。

グローバルナビゲーションも黒単色ではなく、微妙にグラデーションがかかっています。(ブラウザによっては見れません)これが、全ての始まりでした。

どうやらグラデーションをかけられるらしい…。そんな風に思って、随所にコピペして乱用してみたのがきっかけで、今のサイトの原型が出来上がってます。影も同様です。

コチラのページでグローバルナビゲーションにグラデーションをかけています。ってか、もともとかかっています(笑 ただ、色だけ変えればOK!!

で、最近のトレンドと言えば’時間(差)’です!!当サイトのグローバルナビやリンクを触れた方はスグに分かったハズです。この微妙な時間さ、妙に気持ちよくないですか?

いや、その辺りは個人差ありますよね?なんか遅くてイライラする!!なにこれっ!?なんて思う人もいると思います。

私も他のサイトでそう感じたこともありました(笑 でもね、あとで’嫉妬’だったって分かった(爆 自分でも同じ様に時間差にしてみたかったんだと…。

で、時間差を取り入れてみました(笑 コレをスタイルシートの必要な場所に入力するだけ。

-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;

この数字のところがタイム(時間)秒(second)です。これを目安に色々と試してみると良いでしょう。初心者の方や慣れていない方は、そんなにあせる必要はありません。

私だって、つい最近ですよ?使い始めたのは。ってか、カスタマイズってそれよかもっと重要な部分がたくさんあります。確かにこの辺りは目新しいですし、人の目も引くかもしれません。

でもね、それって一過性ですよね?またスグに古くなったり当たり前になったりします。でも変わらない部分だってあるんです。

そこを履き違えない様にしないとカスタマイズがただの自己満で終わってしまいます。(半分はそうかもしれないww)私は、単純に感動したこと、出来て良かったと思った事を書き残しています。

その結果、多くの人に見てもらえてるんじゃないかなぁ?と、勝手に思い込んでいます(爆 まぁ、そんな冗談はさておき、スゴイ表現力がついてきたら、別のサイトで試してみます(笑

にほんブログ村 ブログブログ ブログノウハウへ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です