Umbre cu CSS3


Articolul 12 Fun CSS Text Shadows You Can Copy and Paste propune ceea ce spune: secvenţe de cod CSS gata de folosit în proiectele Dvs. Evident, din păcate, ele merg şi nu prea merg în toate navigatoarele. De exemplu ceea ce vedeţi mai jos, inclus cu iframe (dacă vreţi să vedeţi extern respectiva pagină click aici) va da unele rateuri – al doilea exemplu ca să fiu mai exact – sub unele navigatoare. Dacă nu credeţi că este text (şi nu imagine), marcaţi cu mouse-ul şi vă veţi convinge :) .

Iată şi codul pentru demonstraţia de mai sus. Am ales, şi adaptat puţin, trei dintre cele douăsprezece propuneri. Vă invit să vedeţi articolul original pentru mai multe exemple, dar mai ales pentru informaţii tehnice ajutătoare pentru cei care vor să studieze tehnica.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Reflectii</title>
    <style type="text/css">
        body {
            background-color: #b0d2e0;
            font-size: 140px;
            font-family: Tahoma;
            font-weight: bold;
        }
        #stil1 {
            color: white;
            text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
        }
        #stil2 {
            background-color: #427b8e;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
        }
        #stil3 {
            color: rgba(51,95,111,0.6);
            text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                0px -5px 35px rgba(255,255,255,0.3);
        }
    </style>
</head>
<body>
<div id="stil1">CNet.ro</div>
<div id="stil2">CNet.ro</div>
<div id="stil3">CNet.ro</div>
</body>
</html>

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

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