Context în formă de tablă de șah pe CSS3 pură
Nu cu mult timp în urmă, v-am spus deja cum să diferențiați un fundal dintr-o celulă tetradică utilizând mai multe linii de cod CSS, fără a utiliza imagini, texturi (modele).
Ca și în cazul celulei tetradice, vom folosi gradiente repetate, alternând culoarea neagră și transparența transparentă. Principiul este foarte simplu, pe baza fundalului de fundal alb: culoarea albă; și deja se impun gradiente liniare:
Dimensiunea celulelor și distribuția uniformă a acestora pe pagină sunt reglabile cu dimensiunea fundalului: respectiv poziția fundalului: respectiv. Încercați, de exemplu, să reduceți dimensiunea fundalului: la 50 de pixeli și să lăsați poziționarea așa cum este, și veți obține un model complet diferit, pe cale de a nu fi mai puțin complicat))). Deci experimentând cu parametri și diluând cu alte proprietăți, puteți obține rezultate.
Pe suport de browser: în Chrome-ca totul apare așa cum ar trebui, Firefox și IE-shka benzi emise de colțul de la o celulă de unghi, care, desigur, afectează imaginea generală este tratat suta, in scadere a transparenței în gradienți de până la 74%.
Aș fi recunoscător dacă susțineți proiectul - adăugând un blog la excepțiile AdBlock și partajați un link către intrarea în rețelele dvs. sociale: