Personalizati cadrul atasamentelor

Scris de Luky la data de Mier Mar 31, 2010 12:23 am

Personalizati cadrul atasamentelor

In urma actualizarii de saptamana trecuta, Forumgratuit va ofera acest truc pentru a va personaliza atasamentele :

Nota

Acest efect apare
numai pentru cei care folosesc
urmatoarele browsere :

Firefox
Safari
Google Chrome

Adaugari in CSS

Panou de Administrare

Afisare

Culori

Foaie de stil CSS

Adaugati urmatorul cod :

Cod:: .attachbox{ background-color: #191919; background-image: url('http://i65.servimg.com/u/f65/11/95/30/70/fond12.jpg'); border: 1px solid #888888; -moz-border-radius-topleft: 15px; -webkit-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -webkit-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius-bottomleft: 0px; color:#ffffff; } .attachbox dl.file{ background-color: #212121; margin-top: 8px; padding: 5px; border: 1px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; }

Rezumatul proprietatilor CSS:

.attachbox
>> Partea A

background-color: #191919;	>> Culoarea de fundal
background-image: url('http:image.address');	>> Imaginea de fundal
border: 1px solid #888888;	>> Marginile partii A
-moz-border-radius-topleft: 15px; -webkit-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-radius-topright: 15px; -moz-border-radius-bottomright: 0px; -webkit-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius-bottomleft: 0px;	>> Cele 4 colturi
color:#ffffff;	>> Culoarea textului al Partii A

.attachbox dl.file
>> Part B

background-color: #212121;	>> Culoarea de fundal
margin-top: 8px;	>> Inaltimea marginii exterioare (de sus) (Vedeti imaginea B)
padding: 5px;	>> Marginea interioara (Vedeti imaginea B)
border: 1px solid #fff;	>> Culoarea cadrului
-moz-border-radius: 15px; -webkit-border-radius: 15px;	>> Cele 4 colturi

Imaginea B

Acesta este codul pentru toate patru colturi rotunde:

Cod:: border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

Cine doreste sa faca doar un colt sau doua rotunde trebuie sa foloseasca codul asta:

Cod:: /* Pentru Mozilla FireFox */ -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px; /* Pentru Safari */ -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -webkit-border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; /* Pentru Opera, Google Chrome si altele */ border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;

Acest tutorial a fost creat de staff-ul francez
Completat de Motanel
Reproducerea acestui tutorial nu este permisa fara acordul nostru, conform Articolului L122-1 apartinand ICC.