Sjenke na okvirima !
Design 4 U // Dizajn forum - Veb i grafički dizajn :: Dizajn :: Tutorijali :: Veb dizajn :: Stari tutoriali
Strana 1 od 1
Sjenke na okvirima !
Evo jednog zanimljivog efekta kog možete svuda primenjivati, i u HTML stranicama, i na forumima, i svuda. Jedino što vam je potrebno jeste uređivanje CSS-a. Pokazaću vam kako da napravite ovo:
[You must be registered and logged in to see this image.]
Zavisi šta od ponuđenih senki želite da napravite, ali sa slovima A B C D E i F označeno je kakve senke možete imati. Tako da, svaki od pravougaonika označiću slovom.
Dakle, taj središnji deo između zagrada {} ubacite u deo CSS-a tj u klčasu kojoj želite dodati senku. DObro obratite pažnju gde dodajete ovaj deo, jer ispadne ružno ako stavite na pogrešno mesto. Naravno možete da menjate veličinu senke (menjajući 5px na više/manje), i boju (umesto #888 stavite boju koja vama odgovara).
A ako želite ovo :
[You must be registered and logged in to see this image.]
Isto važi kao i za drop shadow, dakle središnji deo ubacite negde u CSS a boju menjajte preko #888 a veličinu menjajući broj 5px. Uzmite kod senke označen slovom koje želite.
[You must be registered and logged in to see this image.]
Zavisi šta od ponuđenih senki želite da napravite, ali sa slovima A B C D E i F označeno je kakve senke možete imati. Tako da, svaki od pravougaonika označiću slovom.
- Kod:
#Primer_A {
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}
#Primer_B {
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}
#Primer_C {
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}
#Primer_D {
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}
#Primer_E {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}
#Primer_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
Dakle, taj središnji deo između zagrada {} ubacite u deo CSS-a tj u klčasu kojoj želite dodati senku. DObro obratite pažnju gde dodajete ovaj deo, jer ispadne ružno ako stavite na pogrešno mesto. Naravno možete da menjate veličinu senke (menjajući 5px na više/manje), i boju (umesto #888 stavite boju koja vama odgovara).
A ako želite ovo :
[You must be registered and logged in to see this image.]
Isto važi kao i za drop shadow, dakle središnji deo ubacite negde u CSS a boju menjajte preko #888 a veličinu menjajući broj 5px. Uzmite kod senke označen slovom koje želite.
- Kod:
#Primer_H {
-moz-box-shadow: inset -5px -5px #888;
-webkit-box-shadow: inset -5px -5px #888;
box-shadow: inset -5px -5px #888;
}
#Primer_H {
-moz-box-shadow: inset -5px -5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px #888;
box-shadow: inset -5px -5px 5px #888;
}
#Primer_I {
-moz-box-shadow: inset -5px -5px 0 5px #888;
-webkit-box-shadow: inset -5px -5px 0 5px#888;
box-shadow: inset -5px -5px 0 5px #888;
}
#Primer_J {
-moz-box-shadow: inset -5px -5px 5px 5px #888;
-webkit-box-shadow: inset -5px -5px 5px 5px#888;
box-shadow: inset -5px -5px 5px 5px #888;
}
#Primer_K {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
}
#Primer_L {
-moz-box-shadow: inset 0 0 5px 5px #888;
-webkit-box-shadow: inset 0 0 5px 5px#888;
box-shadow: inset 0 0 5px 5px #888;
}
Preuzeto sa Admin Centra - By ten98 !
Design 4 U // Dizajn forum - Veb i grafički dizajn :: Dizajn :: Tutorijali :: Veb dizajn :: Stari tutoriali
Strana 1 od 1
Dozvole ovog foruma:
Ne možete odgovarati na teme u ovom forumu
|
|