CSS3 sve oko zaobljivanja i drop shadow
:: Tutorials Corner :: Web tuts
Strana 1 od 1
CSS3 sve oko zaobljivanja i drop shadow
Verovatno se pitate kako bez slika zaobliti nesto u css-u?Evo resenja:
Za ovo se koristi CSS3...E sad imamo nekoliko nacina zaobljivanja, pocinjemo od onoga koji se najcesce koristi:
kod za potpuno zaobljivanje je da u neku klasu u css-u dodate:
umesto X stavite broj pixela koliko da zaobli...a to bi u punbb izgledalo ovako:
1.u css-u nadjite body i zamenite ga ovim kodom:
3.nadjite:
i umesto toga stavite ovo:
Ovo su ostali nacini za zaobljivanje na slici:
i sada kombinujete one kodove ispod...Ako ocete da vam logo bude zaobljen umesto pun-intro stavite ovo:
kao i iznad mozete menjati pixele i tako ulepsati prema vasem izgledu...to bi bilo to oko zaobljivanja sada da vam objasnim drop shadow...za drop shadow koristite ovaj kod:
ako se malo budete igrali shvaticete gde se menja boja i velicina...ovaj kod takodje mozete ubaciti u onaj .pun kod wrapa da vam to ima senku...
sve kodove koje budete koristili odavde videce korisnici mozile i safaria u potpunosti a flock, i jos neki nece moci sve da vide...
sve kodove sam nasao na: http://www.css3.info/ i napravio moj tutorijal...ukoliko ga zelite postaviti negde na kraju stavite ovo:
Za ovo se koristi CSS3...E sad imamo nekoliko nacina zaobljivanja, pocinjemo od onoga koji se najcesce koristi:
kod za potpuno zaobljivanje je da u neku klasu u css-u dodate:
- Kod:
-moz-border-radius: Xpx;
-webkit-border-radius: Xpx;
border: 1px solid #kod boje;
padding: 10px;
umesto X stavite broj pixela koliko da zaobli...a to bi u punbb izgledalo ovako:
1.u css-u nadjite body i zamenite ga ovim kodom:
- Kod:
body {
background-color: #kod boje pozadine;
background-image: url('');
background-attachment: scroll;
background-repeat: repeat-y;
color: #333333;
font-size: 12px;
font-family: Verdana,Arial,Helvetica,sans-serif;
}
3.nadjite:
- Kod:
/* Wrap .pun-------------------------------------------------------------*/
.pun {
width: 880px;
margin: 0 auto;
padding: 5px;
/* Fix for RTL min-width bug, left here for consistency */
min-width: 768px;
line-height: 130%;
}
i umesto toga stavite ovo:
- Kod:
/* Wrap .pun-------------------------------------------------------------*/
.pun {
width: 75%;
margin: 0 auto;
padding: 5px;
background-color: #kod boje u zaobljenom prostoru;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #boja storkea;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
color: #114c79;
/* Fix for RTL min-width bug, left here for consistency */
min-width: 768px;
line-height: 130%;
}
Ovo su ostali nacini za zaobljivanje na slici:
i sada kombinujete one kodove ispod...Ako ocete da vam logo bude zaobljen umesto pun-intro stavite ovo:
- Kod:
#pun-intro {
margin: 0;
padding: 1.5em 1em 1em 1em;
border-bottom: 2px solid #margin: 0;
padding: 1.5em 1em 1em 1em;
border-bottom: 1px solid #296fa5;
background-color: #kod boje u zaobljenom prostoru;
background-image: url('');
text-align: left;
background-repeat: repeat-x;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 2px solid #boja storkea;
padding: 10px;
height: 187px;
}
kao i iznad mozete menjati pixele i tako ulepsati prema vasem izgledu...to bi bilo to oko zaobljivanja sada da vam objasnim drop shadow...za drop shadow koristite ovaj kod:
- Kod:
-webkit-box-shadow: 10px 10px 25px #000;
-moz-box-shadow: 10px 10px 25px #000;
ako se malo budete igrali shvaticete gde se menja boja i velicina...ovaj kod takodje mozete ubaciti u onaj .pun kod wrapa da vam to ima senku...
sve kodove koje budete koristili odavde videce korisnici mozile i safaria u potpunosti a flock, i jos neki nece moci sve da vide...
sve kodove sam nasao na: http://www.css3.info/ i napravio moj tutorijal...ukoliko ga zelite postaviti negde na kraju stavite ovo:
- Kod:
[size=18][font=Arial Black][b]Tutorijal by Vuk98 [/b][/font][/size]
Vuk98- Član
- Broj poruka : 123
Datum upisa : 01.02.2010
Lokacija : negde
:: Tutorials Corner :: Web tuts
Strana 1 od 1
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu
|
|