Mai jos Vizitator ai 3 browsere diferite, Mozilla FireFox, Internet Explorer si Safari, iar alaturi de ele ai cod-ul pentru gradientul care v-a fi vizibil pe acel browser.
Esti gata sa incepem Vizitator ? Bun atunci sa-i dam bice.
Inainte de toate tin sa-ti atrag atentia ca desi ar trebuii sa fie vorba de css pe langa asta vom combina css-ul cu html, mai exact tabele pentru demonstratii.
| [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | Gradient on Mozilla FireFox |
Aici ai codul css si html (tabel):
Cod:
<html>
<head>
<style type="text/css">
.gradient {
background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>
<table class="gradient" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" width="600" height="20">Textul dorit</td>
</tr>
</table>
</body>
</html>
Efectul pe care il vei obtine este acesta:
| Vizibil numai pe Moizlla FireFox |
Pentru a obtine un gradient orizontal in loc de left din css treci top.
Exemplu:
| Vizibil numai pe Moizlla FireFox |
Cod:
<table style="background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" width="600" height="20">Textul dorit</td>
</tr>
</table>| [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | Gradient on Internet Explorer |
Acesta este codul pentru Internet Explorer, html si css la un loc:
Cod:
<DIV ID="oFilterDIV" STYLE="width:240px; height:160px; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='blue', EndColorStr='black')">
<font color="#ffffff">Textul dorit</font>
</DIV>Iar aici ai exemplu:
Vizibil numai pe Internet Explorer
Pentru a schimba dimensiunea chenarului trebuie sa modifici width (latimea) si height (inaltmea) dupa propriile preferinte.
Poti schimba culorile cu care doresti trecand cod-ul culori sau numele (in eng).
In exemplul de mai sus gradientul este unul orizontal, pentru al face vertical unde scrie in cod GradientType=0, in loc de zero treci 1.
| [Trebuie sa fiti inscris si conectat pentru a vedea acest link] | Gradient on Safari |
Aici ai codul css si html (tabel):
Cod:
<html>
<head>
<style type="text/css">
.gradient {
background: -webkit-gradient(linear, left top, left bottom, from(red), to(orange));
}
</style>
</head>
<body>
<table class="gradient" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" width="600" height="20">Textul dorit</td>
</tr>
</table>
</body>
</html>Efectul pe care il vei obtine este acesta:
| Gradientul este vizibil numai pe browserul Safari |
Iar pentru unirea codului css cu html adica tabelul ca-sa scurtam codul puteti folosi asta:
Cod:
<table style="background: -webkit-gradient(linear, left top, left bottom, from(red), to(orange));" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" width="600" height="20">Textul dorit</td>
</tr>
</table>Si ai reusit!
Tutorial scris de Motanel
Copyright Extrem-Tutorials.com - Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.
RedGamesVin 25 Oct - 15:57