CSS3 sve oko zaobljivanja i drop shadow

Ići dole

CSS3 sve oko zaobljivanja i drop shadow

Počalji od Vuk98 taj Čet Feb 04, 2010 9:45 am

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:
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;
         }
2.isto to uradite i sa pun-intro i foot da vam se ne bi pojavljivali header i footer
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%;
   }
ako zelite vise ili manje zaobliti kod -moz-border-radius i webkit-border-radius menjajte pixele...a margin-top i margin-bottom definisu koliko da se taj zaobljeni prostor udalji odozdo i odozgo...

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
Član

Broj poruka : 123
Datum upisa : 01.02.2010
Lokacija : negde

Pogledaj profil korisnika

Nazad na vrh Ići dole

Nazad na vrh


 
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu