Photoshop-temppuja CSS3:lla

Helppoa ja hauskaa. Nimittäin dynaamiset kuvatemput CSS3:sen avulla!

Tässä muutama valmis esimerkki laiskimuksille.

Pyöreä kuva

img { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; }

Pyöristetyt kulmat

img {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

”Embossed” -efekti

img {
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

”Cut-out” -varjostus

img {
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

”Glossy”-tyyppinen heijastus

img {
-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

”Drop-shadow” -efekti

img {
position: absolute;
content: ’ ’;
width: 100%;
height: 30px;
bottom: -31px;
left: 0;

-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;

background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}

Kommentoi Facebook-tunnuksilla

kommenttia

2 kommenttia artikkeliin ”Photoshop-temppuja CSS3:lla

  1. liitä vielä kuvat esimerkeistä

    ps. pakollisia kenttiä ei ole merkitty 🙂

    1. Laiska kun olen, en jaksanut ottaa screenshotteja. Ehkä mä skarppaan seuraavassa päivityksessä. 😉 Kokeile itse miltä näyttävät! Photarinkäyttäjille termit lienevät kuitenkin tuttuja.

Vastaa käyttäjälle tero Peruuta vastaus

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

Time limit is exhausted. Please reload the CAPTCHA.