BLOG

CSS3で錬金術してみよう

ひらの

壁|^・ω・)/<ひらのです!

最近一気に寒くなりました。気が付いたら12月。
師も走る忙しさの「師走」ですね。

今日のブログは、「CSS3で錬金術してみよう」というわけで。。。

CSS3を使った「宝石」の作り方を、ゆるーくご紹介します。

錬金術といいましたが、CSS3で作った宝石がお金を生むかどうかは別問題です。
皆様の営業力にかかっています。

完成イメージはこんな感じです↓
完成イメージ
左から…サファイア、ルビー、エメラルド、アレクサンドライト、ダイアモンド、トパーズ
をイメージしてみました。
(宝石に見えなくても宝石だと思ってください。)

ではさっそく…

下準備

HTML これが、宝石の枠になります。

このHTMLに対して、jQueryでいくつかDOMを追加します。

4行目 : divの中にテキストなどを span.text として要素で囲みます。
5~7行目:こちらは、背景のキラキラ感を出すために3つ用意しました。
9~10行目:要素を正方形にしてみました。

CSS

宝石の色を付ける

HTML

今回はいろんな色を指定したいので
先ほどの枠に、色を指定するclassを付けました。

CSS

基本になる色は背景で引きます。今回はリッチにグラデーションです。
とりあえず、FirefoxとChromeで表示できるようにしました。(IEゴメン)

下地ができた
こんな感じになりました。

カットを表現 その1

このままではただの正方形なので…宝石といえば「カット」
カットの方法で金額が変わるとまで言われるあの「カット」を施します。

下準備で記述した。「.block」へのCSSに追記します。
CSS

ボーダーを入れてみる
.block の要素に、半透明の線(border)を入れました。

「border」はコーナー部分が斜めになっており、半透明にすることで
背景色が透けて見えます。

また、4方向別に指定する事もできるので、
色指定と透明度をバラバラにして濃淡を出してみました。

カットを表現 その2

今の状態ではガラス細工の様に見えるので、もう少しカットを足していこうと思います。

まず、現在のHTMLを確認してみましょう。
HTML

1行目:.blockのdivにはjQueryで入れた「高さ」が入っています。
2行目~4行目:こちらはjQueryで入れた背景用のspanが3つ。
5行目:テキストや画像などを入れていた場合は、.textというclassを持ったspanで囲われて、.blockの一番下の要素になります。
(分りやすくするためにテキストを入れてみました。)

css

.blockの次あたりにjQueryで仕込んだspanへの共通スタイルを入れます。

5行目~9行目:「.text」 は、要素の中にテキストや画像が入っていた場合に、背景色で見えなくならないように、「z-index」を上位に指定しておきます。
10行目~:まずは、.block要素にjqueryで生成した「.bg3」に対してスタイルを記述します。

解説

.block内のspanは、1行目のスタイルですべて「position:absolute」になっています。
そして.blockは1emのborderが入っているため、「.bg3」の要素は位置を
「top:-1em; left:-1em」としておきます。

「z-index」はできる限り下げておきます。
そしてカットを表現するためにはやはりborderを使用します。
線は実線(solid)で、太さは実際にブラウザで確認しながら指定しました。
4方向の色は、右側に光が当たると想定して…一番明るく
逆に左側は暗く…上下はその中間で黒(半透明)を指定しました。
輝きをプラス
このようになりました。少し奥行き感が出た感じがします。

カットを表現 その3

まだまだ輝きが足りない気がするので、もっとカットを増やそうと思います。

css

cssに上記のスタイルを追記しました。
2行目~3行目:要素を回転させるためにborderが途切れて見えないようにサイズを大きくするため、位置がを-2emにしました。
6行目:.bg2では、ハイライトに値するborderを追加しました。
9行目:こちらも、要素を回転させるために大きめに指定指定してあります(細かい調整は目視で確認しながら…)
11行目:transformで要素を-30°回転させます。

キラキラ追加
どうでしょうか??
なんだか色んな大きさの三角形があって気持ち悪いですね…
でも大丈夫。「大きさが違うなら、揃えればいい」んです。

てな訳で揃えます。
css

更にCSSに追記します。

先ほどの.bg2のスタイルとほぼ同じですが
8行目:ハイライトを足しました。(黒から白へ指定を変更)
11行目:回転の方向を+30°にしました。
完成

なんということでしょう。(ビフォー○フター風に)
見事にキラッキラになりました。

というわけで、宝石完成です!

.bg、.bg2、.bg3の色や透明度を変更することで
違う輝きを再現する事もできるので自分の感性を信じてガシガシ変えてみてください。

blog-h-07
せっかくなので、webフォントを入れてみました。
androidと、オクトキャットがお気に入り。

可愛いwebフォントは下記から…ドウゾ。
Stackicons

以上、突発で思いついたcss3での宝石の作り方でした。(どこで使うんだコレ)
それでは皆様、良いクリスマスをお迎えください(`・ω・´)ノ<あでゅ~

ひらの