Utilizarea gradientului pentru forum

03092012
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 Utilizarea gradientului pentru forum 230108

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

Ultima editare efectuata de catre Sabin ;x in Mier 5 Sept - 14:36, editata de 1 ori