Barvni prehodi s CSS
Webkit razvija CSS komponente s svetlobno hitrostjo! Objavili so predlog novega ukaza za CSS 3 in sicer izdelava barvnih prehodov (gradients). Ideja je seveda fantastična, ker se lahko “prehod” prilagaja velikosti okna (DIV). To pomeni, da ne bo potrebno več za ozadje izdelovati grafike, temveč bomo lahko preliv dosegli z enostavnim ukazom v CSS dokumentu. Trenutno predvidevajo dve vrsti: linearnega in radialnega.
Sintaksa:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
Primer (samo če ste “lastnik” beta Safarija):
http://xhva.net/webkit_r31878_gradient_radial.html
Podobni članki:
- Zaokroževanje robov s CSS ukazov
- Napredno programiranje v CSS s pomočjo LESS
- CSS 3 oblikovanje – ideje WebKita
- CSS 3 delovne skupine – zadnji sklepi
- Več nivojski CSS selektorji
- CSS triki – selektorji za Internet Explorer
- Kako ohraniti pregledno strukturo CSS dokumenta
- Javascript predogled slike – CSS opacity – picture preview – picture fade
- CSS triki za Google CHROME brskalnik
- Kdaj uporabiti class in kdaj id oznako za CSS selektorje
April 18th, 2008 ob 6:04 pm
Za to obstaja ena fajn javascript, ki celo deluje.
http://slayeroffice.com/code/gradient/
Gre za to, da lahko narediš gradient background brez imiga. In preverjeno deluje. Enostavno postaviš div, kot class nastaviš (class začetnabarva končnabarva smer).
Primer:
.naslov {
height: 20px;
color: #FFFFFF;
}
Menu
Tadam…
April 18th, 2008 ob 6:06 pm
Eh Menu Tak nekak ….
April 18th, 2008 ob 7:36 pm
@Carli, fajn zadeva. Vseeno pa bi blo lažje, da bi obstajal hiter & učinkovit ukaz, kot Javascript.
April 18th, 2008 ob 8:29 pm
Ravno v tem je poanta, da se dizajnarjem ne bo potrebno zatekati k grafiki ali uporabi javascriota.
Hvala za link.
April 18th, 2008 ob 9:33 pm
Z javascript je tud bolj tko-tko pa radial gradient je tud uprašljivo kako bi delu…
April 19th, 2008 ob 8:46 pm
Ja vsekakor bolje, če je lahko samo ukaz, taki gradienti v IEju delujejo, že kar nekaj časa, nekaj več info http://msdn2.microsoft.com/en-us/library/ms673539%28VS.85%29.aspx, vendar je zopet omejitev pri brskalnikih.
Alternativa torej JS.