Box Shadow, DTE Logo
body:before {
content:"";
display:block;
width:5px;
height:5px;
background-color:transparent;
-webkit-box-shadow:
/* Black lines... */
0 5px 0 black,
0 10px 0 black,
0 15px 0 black,
0 20px 0 black,
0 25px 0 black,
0 30px 0 black,
0 35px 0 black,
0 40px 0 black,
0 45px 0 black,
50px 5px 0 black,
50px 10px 0 black,
50px 15px 0 black,
50px 20px 0 black,
50px 25px 0 black,
50px 30px 0 black,
50px 35px 0 black,
50px 40px 0 black,
50px 45px 0 black,
5px 0 0 black,
10px 0 0 black,
15px 0 0 black,
20px 0 0 black,
25px 0 0 black,
30px 0 0 black,
35px 0 0 black,
40px 0 0 black,
45px 0 0 black,
5px 50px 0 black,
10px 50px 0 black,
15px 50px 0 black,
20px 50px 0 black,
25px 50px 0 black,
30px 50px 0 black,
35px 50px 0 black,
40px 50px 0 black,
45px 50px 0 black,
15px 15px 0 black,
35px 15px 0 black,
15px 35px 0 black,
35px 35px 0 black,
20px 40px 0 black,
30px 40px 0 black,
10px 30px 0 black,
40px 30px 0 black,
10px 25px 0 black,
40px 25px 0 black,
25px 40px 0 black,
/* Filling... */
5px 5px 0 red,
10px 5px 0 red,
15px 5px 0 red,
20px 5px 0 red,
25px 5px 0 red,
30px 5px 0 red,
35px 5px 0 red,
40px 5px 0 red,
45px 5px 0 red,
5px 10px 0 red,
10px 10px 0 red,
15px 10px 0 red,
20px 10px 0 red,
25px 10px 0 red,
30px 10px 0 red,
35px 10px 0 red,
40px 10px 0 red,
45px 10px 0 red,
5px 15px 0 red,
10px 15px 0 red,
20px 15px 0 red,
25px 15px 0 red,
30px 15px 0 red,
40px 15px 0 red,
45px 15px 0 red,
5px 20px 0 red,
10px 20px 0 red,
15px 20px 0 red,
20px 20px 0 red,
25px 20px 0 red,
30px 20px 0 red,
35px 20px 0 red,
40px 20px 0 red,
45px 20px 0 red,
5px 25px 0 red,
15px 25px 0 red,
20px 25px 0 red,
25px 25px 0 red,
30px 25px 0 red,
35px 25px 0 red,
45px 25px 0 red,
5px 30px 0 red,
15px 30px 0 red,
20px 30px 0 red,
25px 30px 0 red,
30px 30px 0 red,
35px 30px 0 red,
45px 30px 0 red,
5px 35px 0 red,
10px 35px 0 red,
20px 35px 0 red,
25px 35px 0 red,
30px 35px 0 red,
40px 35px 0 red,
45px 35px 0 red,
5px 40px 0 red,
10px 40px 0 red,
15px 40px 0 red,
35px 40px 0 red,
40px 40px 0 red,
45px 40px 0 red,
5px 45px 0 red,
10px 45px 0 red,
15px 45px 0 red,
20px 45px 0 red,
25px 45px 0 red,
30px 45px 0 red,
35px 45px 0 red,
40px 45px 0 red,
45px 45px 0 red;
-moz-box-shadow:
/* Black lines... */
0 5px 0 black,
0 10px 0 black,
0 15px 0 black,
0 20px 0 black,
0 25px 0 black,
0 30px 0 black,
0 35px 0 black,
0 40px 0 black,
0 45px 0 black,
50px 5px 0 black,
50px 10px 0 black,
50px 15px 0 black,
50px 20px 0 black,
50px 25px 0 black,
50px 30px 0 black,
50px 35px 0 black,
50px 40px 0 black,
50px 45px 0 black,
5px 0 0 black,
10px 0 0 black,
15px 0 0 black,
20px 0 0 black,
25px 0 0 black,
30px 0 0 black,
35px 0 0 black,
40px 0 0 black,
45px 0 0 black,
5px 50px 0 black,
10px 50px 0 black,
15px 50px 0 black,
20px 50px 0 black,
25px 50px 0 black,
30px 50px 0 black,
35px 50px 0 black,
40px 50px 0 black,
45px 50px 0 black,
15px 15px 0 black,
35px 15px 0 black,
15px 35px 0 black,
35px 35px 0 black,
20px 40px 0 black,
30px 40px 0 black,
10px 30px 0 black,
40px 30px 0 black,
10px 25px 0 black,
40px 25px 0 black,
25px 40px 0 black,
/* Filling... */
5px 5px 0 red,
10px 5px 0 red,
15px 5px 0 red,
20px 5px 0 red,
25px 5px 0 red,
30px 5px 0 red,
35px 5px 0 red,
40px 5px 0 red,
45px 5px 0 red,
5px 10px 0 red,
10px 10px 0 red,
15px 10px 0 red,
20px 10px 0 red,
25px 10px 0 red,
30px 10px 0 red,
35px 10px 0 red,
40px 10px 0 red,
45px 10px 0 red,
5px 15px 0 red,
10px 15px 0 red,
20px 15px 0 red,
25px 15px 0 red,
30px 15px 0 red,
40px 15px 0 red,
45px 15px 0 red,
5px 20px 0 red,
10px 20px 0 red,
15px 20px 0 red,
20px 20px 0 red,
25px 20px 0 red,
30px 20px 0 red,
35px 20px 0 red,
40px 20px 0 red,
45px 20px 0 red,
5px 25px 0 red,
15px 25px 0 red,
20px 25px 0 red,
25px 25px 0 red,
30px 25px 0 red,
35px 25px 0 red,
45px 25px 0 red,
5px 30px 0 red,
15px 30px 0 red,
20px 30px 0 red,
25px 30px 0 red,
30px 30px 0 red,
35px 30px 0 red,
45px 30px 0 red,
5px 35px 0 red,
10px 35px 0 red,
20px 35px 0 red,
25px 35px 0 red,
30px 35px 0 red,
40px 35px 0 red,
45px 35px 0 red,
5px 40px 0 red,
10px 40px 0 red,
15px 40px 0 red,
35px 40px 0 red,
40px 40px 0 red,
45px 40px 0 red,
5px 45px 0 red,
10px 45px 0 red,
15px 45px 0 red,
20px 45px 0 red,
25px 45px 0 red,
30px 45px 0 red,
35px 45px 0 red,
40px 45px 0 red,
45px 45px 0 red;
box-shadow:
/* Black lines... */
0 5px 0 black,
0 10px 0 black,
0 15px 0 black,
0 20px 0 black,
0 25px 0 black,
0 30px 0 black,
0 35px 0 black,
0 40px 0 black,
0 45px 0 black,
50px 5px 0 black,
50px 10px 0 black,
50px 15px 0 black,
50px 20px 0 black,
50px 25px 0 black,
50px 30px 0 black,
50px 35px 0 black,
50px 40px 0 black,
50px 45px 0 black,
5px 0 0 black,
10px 0 0 black,
15px 0 0 black,
20px 0 0 black,
25px 0 0 black,
30px 0 0 black,
35px 0 0 black,
40px 0 0 black,
45px 0 0 black,
5px 50px 0 black,
10px 50px 0 black,
15px 50px 0 black,
20px 50px 0 black,
25px 50px 0 black,
30px 50px 0 black,
35px 50px 0 black,
40px 50px 0 black,
45px 50px 0 black,
15px 15px 0 black,
35px 15px 0 black,
15px 35px 0 black,
35px 35px 0 black,
20px 40px 0 black,
30px 40px 0 black,
10px 30px 0 black,
40px 30px 0 black,
10px 25px 0 black,
40px 25px 0 black,
25px 40px 0 black,
/* Filling... */
5px 5px 0 red,
10px 5px 0 red,
15px 5px 0 red,
20px 5px 0 red,
25px 5px 0 red,
30px 5px 0 red,
35px 5px 0 red,
40px 5px 0 red,
45px 5px 0 red,
5px 10px 0 red,
10px 10px 0 red,
15px 10px 0 red,
20px 10px 0 red,
25px 10px 0 red,
30px 10px 0 red,
35px 10px 0 red,
40px 10px 0 red,
45px 10px 0 red,
5px 15px 0 red,
10px 15px 0 red,
20px 15px 0 red,
25px 15px 0 red,
30px 15px 0 red,
40px 15px 0 red,
45px 15px 0 red,
5px 20px 0 red,
10px 20px 0 red,
15px 20px 0 red,
20px 20px 0 red,
25px 20px 0 red,
30px 20px 0 red,
35px 20px 0 red,
40px 20px 0 red,
45px 20px 0 red,
5px 25px 0 red,
15px 25px 0 red,
20px 25px 0 red,
25px 25px 0 red,
30px 25px 0 red,
35px 25px 0 red,
45px 25px 0 red,
5px 30px 0 red,
15px 30px 0 red,
20px 30px 0 red,
25px 30px 0 red,
30px 30px 0 red,
35px 30px 0 red,
45px 30px 0 red,
5px 35px 0 red,
10px 35px 0 red,
20px 35px 0 red,
25px 35px 0 red,
30px 35px 0 red,
40px 35px 0 red,
45px 35px 0 red,
5px 40px 0 red,
10px 40px 0 red,
15px 40px 0 red,
35px 40px 0 red,
40px 40px 0 red,
45px 40px 0 red,
5px 45px 0 red,
10px 45px 0 red,
15px 45px 0 red,
20px 45px 0 red,
25px 45px 0 red,
30px 45px 0 red,
35px 45px 0 red,
40px 45px 0 red,
45px 45px 0 red;
}Demo
Labels: CSS, Eksperimen
14 Comments:
ini box shadow yang di atas header?? panjang bangett kodenya :Ozz
@Bayu Handono Nggak juga. Yang bikin panjang cuma prefix CSS-nya: -webkit-, -moz-
:Q
hehehe/.... \o/ ach.. agan lum mampir ke blog saya nich... saya dah lama bertamu ke sini.. ayo ach silaturahmi..
weww.. kerenn biasa juga ternyata di buat pke box shadow.
gue harus bilang WOW :-bd :D
@Alam Perwira Haha. Ini nih, contoh-contoh anak budak sinetron ckckck...
eits, gak pernah liat sinetron nihhh ~x(
haha, cuman ikut2 temen aja :D
:-bd mantap bg taufic \o/ cemungut untuk buat karya baru lagi
gila logo itu kodenya panjang amad , memang jago ni si mas dalam hal css3 dan jquery
bagus bang :-bd
Dari sebuah karya yang simple terdapat langkah yang jauh dari kata simple
Good Job kak, kakak benar2 membanggakan Bangsa :-bd
kenapa ada value yang tanpa nilai px, apa itu juga bisa? lalu bagaimana jika semua value diatas dikasi nilai px? lantas bedanya apa jika tidak dikasi px?
⇒ /2012/02/lebih-jauh-tentang-css-box-shadow.html
Post a Comment
<< Home