CSS3からDIV一個で出来る表現なんかも色々あるんですね。ちょっと前まで超面倒だったボックスのオシャンティーな線の装飾とかぼかしとかグラデになんやらかんやら。DIVボックス一つとっても色々な装飾効果をもたせられるなぁと思う今日この頃。

それこそ、ONE DIVのような一つのDIVで表現できるアイコンを作ってるサイトもあって、CSS3を突き詰めると色々知ることも出来て面白いなぁと思うわけです。

っていうわけで、ONE DIV程凝ったことはできませんが、今日はそんなDIV一個で使えそうなボックスの作り方をいくつかご紹介！擬似要素使ってちょっとちょめちょめしたら縫い付け効果のボックス出来たりと、以外と使えそうなものを選んだつもりなので、一度見てみてもらえると嬉しいです！ちなみに、IEチェックは9だけしてます。8とかはCSSPIE当たりで頑張ってなんとかする方向で…何か変なとこあったら直しますので是非教えてください！ってノリなので参考程度にどぞ〜！

それでは、行ってみましょう！

 

縫い付け効果

実際覗いてみれば簡単で、擬似要素付けてpositionをabsoluteにして線とシャドウ付けただけです！

同じような方法で、擬似要素のpositionをabsoluteして、上下左右を0pxに指定した上で線つけると、こんな感じの二重線っぽい効果も出来ますね。これもありがちかなと〜。

縁に1pxの装飾線

なんて言えばいいのかわからないですが、よく使いそうな効果なのでご紹介。上と下左右の線色を変えて、ボックスシャドウと組み合わせればなんか良い感じのボックスが出来たりしますね。

 

よく有りそうなグラデーション効果のボックス

うーん、これはボックスにってより、ボタンとかに多い気がしますが、div一個で出来るんで作っておきました。こういうのも多いですね。

グラデはジェネレーターとか沢山あるんで、こういうので普通に調整してもいいかもですね。

追記：グラデの構文ご指摘頂きましたので修正

 

立体ボックス

tuts+さんで紹介されていたチュートリアルで見た効果です。単純に面白いですね〜。こういう効果が似合うサイトって中々センスいるとおもいますが、このくらいであればCSS3で出来ちゃうんですねー。

しかし、IE全般無理。IE9でも影の位置がおかしくなります。

追記：と思ったら-ms-transformついて無いだけだった、修正させて頂きました！

 

正円の中に写真とか

プロフィール写真とかで使うことが多い気がしますねー。角丸数値を超高くして円にしちまおうって効果ですね。

当然IE9はOKだけど、IE8からは正円表現出来てないっす。

 

以上、いかがでしたでしょうか？

なんかどっかで使えそうかもって物もあれば、使う機会ねーだろなーって物まで色々かと思います。

超どうでもいんですが、この前留学してきた大学生が『オシャンティーですね。』って言ってたんですが、オシャンティーって流行ってるんですかね？

ちなみに、サンプルで使ってる僕の写真は去年のハロウィンで着た囚人服です。別にわいせつ罪とかで捕まったわけではありませんのであしからず！

それでは、皆様よきDIV&CSSライフを〜！