Motanel Tutorials


 
AcasaAcasa  RegulamentRegulament  FAQFAQ  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  

Aplicarea unui gradient ( no image ) CSS


Navigare :: CSS - Cascading Style Sheets
AutorMesaj
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Aplicarea unui gradient ( no image ) CSS Joi 22 Apr 2010 - 0:15
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.

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>


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.


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>


Cam asta a fost tot Vizitator sper ca ai inteles ceva si ca te vei decurca, iar cu putina imaginatie poti face mult mai multe, trebuie doar sa incerci.
 Wawy
avatar
Rang: Membru - MT™

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Aplicarea unui gradient ( no image ) CSS Dum 5 Iun 2011 - 9:13
La gradient on safari se vede foarte bine si pe "Google Chrome"



Copyright © 2013 - Toate drepturile rezervate
Design creat si codat de Alexandru Miron si Stefan Patrascu