Oglindiri cu CSS în Webkit


Un articol intitulat Mastering CSS Reflections in Webkit mi-a reţinut recent atenţia. Primul lucru care trebuie reţinut, fiind spus clar din titlu, este că efectul de reflexie merge doar în navigatoarele ce folosesc Webkit ca “motor” intern – adică navigatoarele Chrome şi Safari. Drept urmare, dacă deschideţi această pagină de test în Firefox sau Internet Explorer veţi vedea doar aceeaşi imagine replicată de trei ori. Tocmai de aceea am pus mai jos captura cu pagina încărcată în Chrome.

imagine

Acum să vedem cum se realizează efectul de oglindire. În forma cea mai simplă (prima captură), cu o singură linie: -webkit-box-reflect: below;

Dacă vrem să spaţiem puţin imaginea originală de reflexia ei, mai adăugăm un 2px după below

Pentru efectul de oglindire pierdută ne folosim de gradiente, în cazul nostru unul simplu, liniar: -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));

Articolul tocmai indicat, pe care vă invit să îl parcurgeţi, explică mai multe despre gradienţi, partea bună – pe lângă “oprirea” oglindirii într-un punct, ca în imaginea a patra – fiind că se pot folosi şi imagini pentru a da o formă reflexiei. Yep… Foarte frumos!

Mai rămâne să sperăm că şi alte navigatoare vor suporta oglindirile (sau apela la Webkit 😉 ) pentru ca aşa ceva să fie universal valabil. Vă las cu codul meu demonstrativ, dar cel mai indicat este să parcurgeţi articolul de la care am pornit, unde sunt explicaţii mai detaliate, pas cu pas, de la simplu la complex.

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Reflectii</title>
    <style>
        body {
            background-color: #b0d2e0;
        }
        #stil1 {
            -webkit-box-reflect: below;
        }
        #stil2 {
            -webkit-box-reflect: below 2px;
        }
        #stil3 {
            -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));
        }
        #stil4 {
            -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(white));
        }
    </style>
</head>

<body>
<img src="bebe.jpg" id="stil1">
<img src="bebe.jpg" id="stil2">
<img src="bebe.jpg" id="stil3">
<img src="bebe.jpg" id="stil4">
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *