Ultimele subiecte
» [All Version] Social Link/IconsScris de Jean01Crv 13/10/2014, 12:52 pm
» (pHpBB3) Legenda : Sistem Nou
Scris de Jean01Crv 13/10/2014, 12:49 pm
» Imagine la Statistici & Cine este Conectat ? [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:44 pm
» Statistici - Sistem Nou [pHpBB3]
Scris de Jean01Crv 13/10/2014, 12:20 pm
» [Prezentare]Chozen
Scris de valyd1971 16/5/2014, 12:54 am
Cine este conectat?
In total sunt 2 utilizatori conectati: 0 Inregistrati, 0 Invizibil si 2 Vizitatori :: 1 Motor de cautareNici unul
Recordul de utilizatori conectati a fost de 42, 1/11/2012, 8:58 am
Utilizarea Gradientului pe forum
Pagina 1 din 1 • Distribuiţi •
Utilizarea Gradientului pe 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
Generator Gradient online
un mic exemplu
acestea sunt codurile culorii gradient folosite mai sus extrase din generator
exemplu1 gradient
exemplu 2 gradient
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 :
Previzualizare live
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
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
Generator Gradient online
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 );}
Previzualizare live
Vedeti? este foarte simplu

tot ceea ce am facut in plus este ca am adaugat border dupa preferintele care le-am vrut
mr.franta- Client
Re: Utilizarea Gradientului pe forum
frumos tutorial multumim Sabin x;

Do not judge me for what I do, do not judge me for what I do!
Cee I did was a mother first but now changed!
Sincerely Extream-Suport Team
Cee I did was a mother first but now changed!
Sincerely Extream-Suport Team
StaarK* For EvEr- Administrator

» Cum sa iti maresti viteza internetului simplu (Windows)
» Vizualizare forum + widget-uri + restructurare categorii
» modificare profil nume sus si rang jos
» [ro]Animate IPB Theme
» Personalizarea template-ului viewtopic_body
» Vizualizare forum + widget-uri + restructurare categorii
» modificare profil nume sus si rang jos
» [ro]Animate IPB Theme
» Personalizarea template-ului viewtopic_body
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum