Navigare rapidă

Ultimele subiecte
» nike roshe one gs damen
Scris de VGXDSFE6 Mar 16 Ian - 10:16
» nike air presto damen
Scris de VGXDSFE6 Mar 16 Ian - 10:15
» adidas nmd r2
Scris de VGXDSFE6 Mar 16 Ian - 10:14
» adidas nmd r2
Scris de VGXDSFE6 Mar 16 Ian - 10:13
» adidas nmd r2
Scris de VGXDSFE6 Mar 16 Ian - 10:13
Cuvinte-cheie

edit  

Utilizarea gradientului pentru forum


Salut de carand am invatat sa folosesc gradient.multi nu stiu ce este asa ca am sa va spun chiar eu pe scurt.
Gradientul este un fundal colorat care poate fi folosit ca o imagine
Intrati aici si personalizati-va colorile preferate,ele vor inlocui imaginile care ingreuneaza forumul

[Trebuie sa fiti inscris si conectat pentru a vedea acest link]

un mic exemplu


exemplu 1






exemplu 2


acestea sunt codurile culorii gradient folosite mai sus extrase din generator

exemplu1 gradient
Cod:
BORDER: 1px solid #E7E7E7;padding: 5px;background: rgb(255,255,255); /* Old browsers */background: -moz-linear-gradient(top,  rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

exemplu 2 gradient

Cod:
BORDER: 1px solid #E7E7E7;padding: 5px;background: rgb(229,229,229); /* Old browsers */background: -moz-linear-gradient(top,  rgb(229,229,229) 0%, rgb(255,255,255) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(229,229,229)), color-stop(100%,rgb(255,255,255))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  rgb(229,229,229) 0%,rgb(255,255,255) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  rgb(229,229,229) 0%,rgb(255,255,255) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgb(229,229,229) 0%,rgb(255,255,255) 100%); /* IE10+ */background: linear-gradient(to bottom,  rgb(229,229,229) 0%,rgb(255,255,255) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */"


se poate folosi foarte usor sa mai dau asa un mic exemplu:
la categoriile forumului phpbb3 stiti clasa este li.row

sa pregatesc acum codul :


Cod:

li.row{
 
  border-top: 1px solid #c4c4c4;
border-left: 1px solid #c4c4c4;
border-right: 1px solid #c4c4c4;
border-bottom: 1px solid white;

background: rgb(255,255,255); /* Old browsers */background: -moz-linear-gradient(top,  rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); }


Cod:
li.row:hover{
 
  border-top: 1px solid #c4c4c4;
border-left: 1px solid #c4c4c4;
border-right: 1px solid #c4c4c4;
border-bottom: 1px solid white;

background: rgb(229,229,229); /* Old browsers */background: -moz-linear-gradient(top,  rgb(229,229,229) 0%, rgb(255,255,255) 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(229,229,229)), color-stop(100%,rgb(255,255,255))); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  rgb(229,229,229) 0%,rgb(255,255,255) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  rgb(229,229,229) 0%,rgb(255,255,255) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  rgb(229,229,229) 0%,rgb(255,255,255) 100%); /* IE10+ */background: linear-gradient(to bottom,  rgb(229,229,229) 0%,rgb(255,255,255) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );}



Vedeti? este foarte simplu mai ales ca este pentru toate versiunile de browser folosite

tot ceea ce am facut in plus este ca am adaugat border dupa preferintele care le-am vrut

Comentariile utilizatorilor
Membru dedicat
avatar
la data de Mar 4 Sept - 15:25
Arvin Membru dedicat
Conectat
Tutorialul e superb imi va fi de folos cindva!
Administrator
avatar
la data de Vin 21 Sept - 13:00
Zeus Administrator
Conectat
Tutorial acceptat