Dve razlicite pozadine po dijagonali jednog div kvadratica

Programiranje
1

Pokusavao sam preko CSS i jQuery da nadjem resenje, ali nisam uspeo.
Resio bih pozadinu preko slike, ali ne moze, jer se boja pozadina menja po potrebi.
U tom div-u potrebno je da upisem broj.
Primer je na slici kod kalendara, za odredjeni datum imamo pola pola pozadinu:

2

Pa napraviš takvu pozadinu u Photoshopui dodaš klasu u CSS i onda gdje ti treba takva pozadina na taj element dodaš klasu iz CSS-a

3

Evo ti jedan primjer:
http://jsfiddle.net/ddVxJ/1/

Na modernijim browserima ce ti izgledati kao tvoj primjer (dijagonalno), a na starijima bi div samo bio prepolovljen horizontalno.

4

Ili jednostavnije

			#element{
			width:200px; 
			height:200px;
			background-color:#ccc;
			background-image: linear-gradient
                        (-45deg, black 50%, transparent 50%); 
			background-size:200px 200px}

Za starije preglednike imaš pluginove koji relativno dobro pokrivaju CSS3/HTML5

5

Ovo je prihvatljivo i ako ce podeljenost pozadine kod starijih pregledaca biti po horizontali.
Isprobacu. Hvala!

6

I ovo je ok. Samo, koji su to pluginovi koji mogu da da dobro pokriju css3?
Hvala takodje!

7

A gle… u IE7/8 ti vjerojatno ništa od toga neče raditi (ja više ništa ne optimiziram za IE7).
Ali možeš probati recimo:
http://modernizr.com/
http://css3pie.com/

Možda bi se nešto dalo iskombinirati i sa SVG grafikom…

8

Ja fakat nemam pojma koji je problem s korištenjem background image, a radit će na browserima od IE 5.5 pa nadalje i usto izbjegavaš korištenje bilo kakvih JS pluginova i drugih sranja koji usporavaju i povećavaju stranicu.

9

@creatifcode meni je najlakse da postavim sliku kao pozadinu, ali postoji problem jer boja polja koja se bira moze da bude razlicita. Ne postoji predefinisane boje, da bih ja mogao da postavim par pozadina kalendara koje ce izabrati.
Isto velicina polja se menja, nije fiksna.

10

@creatifcode gdje češ večeg “usporivača stranice” od grafike.
Jedna takva sličica je po težini (bubam napamet) jedanaka 100-njak linija koda.
Pluginovi za IE7/8 se mogu staviti u conditional comments, tako da ih ostali preglednici
ne učitavaju.

CSS3 radi dobro u svim normalnim preglednicima a za ove IE starudije se treba sve manje
brinuti jer postaju stvar prošlosti.
http://www.w3schools.com/browsers/browsers_explorer.asp