Navigare rapidă

Ultimele subiecte
» 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
» Avatar User in Online List
Scris de Emanueltutorials Vin 9 Feb - 21:18
Cuvinte-cheie

edit  

Personalizarea background-ului si a conturului


1.Pentru a adauga proprietati background-ului folosim clasa CSS: body.

Putem adauga un background format dintr-o culoare:

Cod:
body{
background-color: #CULOARE;
}

...dintr-o imagine:

Cod:
body{
background-image: url(LINK IMaGINE);
}

..sau ambele:

Cod:
body{
background:#CULOARE url(LINK IMaGINE);
}

De asemenea putem modifica pozitia background-ului in caz ca dorim un background imagine si culoare:

Cod:
body{
background: #CULOARE url(LINK IMaGINE);
background-position: bottom center;
}

..sau o putem face sa se repete daca dorim sau nu adaugand:

Cod:
body{
background: #CULOARE url(LINK IMaGINE);
background-position: bottom center;
background-repeat: no-repeat;
}

Cod:
body{
background: #CULOARE url(LINK IMaGINE);
background-position: bottom center;
background-repeat: repeat-x;
}

Cod:
body{
background: #CULOARE url(LINK IMaGINE);
background-position: bottom center;
background-repeat: repeat-y;
}

2. Pentru a personaliza conturul forumului dvs. folosim clasa .bodyline

Putem creea un border :

Cod:
.bodyline{
border: 1px solid #CULOARE;
}

info:
Puteti inlocui 1px cu 2px , 3px s.a.m.d.

..Pentru background:

Cod:
.bodyline{
border: 1px solid #CULOARE;
background: CULOARE;
}

..pentru a face colturile (alea patratoase) ceva mai atragatoare (adica sa le rotunjim):

Cod:
.bodyline{
border: 1px solid #CULOARE;
background: #CULOARE;
border-radius: 5px;
-moz-border-radius: 5px;
-web-kit-border-radius: 5px;
}

Si pentru final am pastrat cel mai bun cod
Si anume acela de a adauga o umbra la conturul forumului

Cod:
.bodyline{
border: 1px solid #CULOARE;
background: #CULOARE;
border-radius: 3px;
-moz-border-radius: 3px;
-web-kit-border-radius: 3px;
-moz-box-shadow: 0 0 4px #CULOARE;
-webkit-box-shadow: 0 0 4px #CULOARE;
box-shadow: 0 0 4px #CULOARE;
}

3. Informatii:

Inlocuiti #CULOARE; cu culorea dorita de exemplu: #C7C7C7;

Tutorial propus de Emanuel - Reproducerea/Postarea acestui tutorial nu este permisa fara acordul postatorului.

Comentariile utilizatorilor
Vizitator
avatar
la data de Sam 23 Apr - 12:50
Vizitato Vizitator
Conectat
Stiam asta, dar oricum, buna lectie.
Membru ET
avatar
la data de Lun 25 Iul - 17:47
just.m1ky Membru ET
Conectat
Tutorialele sunt pentru incepatori.nu pentru cei care deja stiu.nu te supara.dar nu cred ca trebuia sa spui ca stiai dar e bun tutorialul.baga-te profesor daca tot spui ca sti...... bla bla bla