Slika z CSS pomoč

Zdravo

Ker bi se rad malo bolje naučil CSS ter uporabil že nekaj znanja ki ga imam sem si zadal cilj, da naredim sliko samo iz css. Mislil sem da ne bo to tak big deal ampak ker sem perfekcionist in trmast sem že naletel na problem.
Prvo da razložim/pokažem sliko za boljšo predstavo in pomoč. Sliko sem kar na hitro narisal v slikarju (original mam na papirju):

(ta slika ni končni izdelek)

Torej da razložim, ozadje (modre barve) naj bi bil gradient ki gre od zgoraj (modre barve) do spodaj (svetla modra). To naj bi bil layer 0, potem pa nad tem layer, ki bi imel snežinke. Tle se pa pojavi problem. Ne poznam toliko v detajl značke background in vse v povezavi z njo. Včeraj sem naredil gradient background ampak sem takoj dobil probem pri snežinkah. Prvo sem snežinke naredil kar z border-radius vendar potem sem se spomnil da bi to ubistvu moral biti background-image zaradi repeat da dobim snežinke. Spet snežinke so v 3 layer-jih. Layer 1 male snežinke, layer 2 malo večje in layer 3 še večje. Problem je da mi ne gre to uspostavit...če ne naredim vse to v body znački mi napiše da background-image ni pravilno definiran (chrome inspect element).

Moje vprašanje pa je, ali lahko naredim background-color v gradient ter nato background-image na repeat (snežinke) tako, da se mi bodo prikazale samo snežinke. Sedaj ko to naredim mi snežinke povozijo background-color in dobim vse belo.

Ker še ne znam toliko z temi gradienti sem si kar z interneta skopiral neke kvazi snežinke ki bi jih potem jaz predelal.

še primer css/html:
http://jsfiddle.net/Np4se/

(ne vem zakaj mi tukaj ne izriše teh snežink...v brskalniku mi jih izriše). Tukaj sem za ozadje dal kar solid barvo ker čene mi snežink ne prikaže.

Killermode je 13. dec 2012 ob 13:46 izjavil:

Tle si lahko najdeš kakšno idejo. Mogoče ti koristi http://thecodeplayer.com

Hvala za link, bom malo pogledal če je kaj uporabnega.

Vseeno me pa zanima kako bi rešili moj primer...lahko tudi po svoje naredite

Hm...kaj noben drug ne ve:)?

Pomoje ne bo slo drugace. Lahko pa uporabis kak php, da ti jih nardi.

Al pa JavaScript http://www.schillmania.com/projects/sno...

Killermode je 14. dec 2012 ob 08:12 izjavil:

Pomoje ne bo slo drugace. Lahko pa uporabis kak php, da ti jih nardi.

Al pa JavaScript http://www.schillmania.com/projects/sno...

Ja za JS vem da to bi šlo, sam sem si reku sam z CSS če je možno:)

MisterR je 14. dec 2012 ob 08:31 izjavil:

Za snežinke uporabiš to:

background: radial-gradient(circle, white 10%, transparent 10%),
 radial-gradient(circle, white 10%, blue 10%) 50px 50px;
 background-size:100px 100px;

Tale ideja mi je zelo ušeč, ampak to je samo za -moz- kajne? No sedaj pa vprašanje na to, ali lahko jaz zdaj poleg tega naredim še gradient background brez da izgubim snežinke?

v crome mi ne prikaže snežink, v firefox pa mi jih...
Bom potem zvečer še 1x probal