Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de D1esel Vin 30 Noi - 21:51
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
» Salutare
Scris de Lucifer Mar 24 Apr - 11:32
Cuvinte-cheie

edit  

Aplicarea unui gradient ( fara imagine ) cu ajutorul css-ului


Sa stii Vizitator ca aplicarea unui gradient ca fundal la un tabel sau o pagina web nu este functionala pe orice browser de internet, asa ca am cautat cat am putut de bine pe internet si am gasit coduri diferite pentru browsere diferite.
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
Asta este un gradient vertical poti schimba culorile din codul css, unde scrie red, orange, yellow, green, blue, indigo, violet, poti trece mai multe culori separate prin virgula sau poti adauga numai doua, ori cod-ul culori ori numele.
Pentru a obtine un gradient orizontal in loc de left din css treci top.
Exemplu:
Vizibil numai pe Moizlla FireFox
Daca doresti sa scurtezi codul si sa combini css cu html va trebuii sa folosesti aest cod:

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
Pentru a schimba culorile, unde scrie from(red), to(orange), in parenteze poti trece codul culori sau numele (in eng.)
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.

Comentariile utilizatorilor
Membru ET
avatar
la data de Vin 25 Oct - 15:57
RedGames Membru ET
Conectat
Mersi mult!