Gradient фона на CSS без изображения (фон градиент на CSS3)
Скоро, много скоро, обектите ще бъдат по-лесни за зареждане, и да ги направят, ще бъде възможно изобщо без снимки.
Още в съвременни браузъри може да направи градиент фон на всякаква сложност, използвайки CSS, и това е напълно без снимки.
Създаване на CSS-градиенти без снимки
Да предположим, че ние искаме да направим прехода към градиент фона на сиво до черно. За да направите това, W3 Corporation е предложил да се използва специална директива CSS3 линеен наклон.
По този начин, според W3 версия, за да се направи градиент фон е достатъчно да напишете в единицата за избор:
И браузъра си Начертайте фон градиент в блока.
Очевидно е, че цветовете и контролни точки в наклона могат да бъдат много. започне параметър показва посоката, в която трябва да обхваща градиент - това може да бъде най-добре да вертикално насочена градиент или наляво за хоризонтална посока.
Не всички браузъри поддържат този чип, толкова дълго, тъй като има редица ощипвам. За много стари браузъри трябва да укажете някакъв среден цвят на фона (наклона няма да е на всички, но на фона не е бяло), или чрез определяне на снимка с наклон (въпреки че ако целта на използването на линеен наклон на CSS - това е намаляване на броя на изтеглените снимки, а след това то bespolenzno, защото във всички браузъри на снимката, така или иначе, за да се зареди, обаче, и след това ще бъде заменен от линеен наклон).
За IE подобни браузъри можете да използвате градиенти на базата на филтрите и да браузъри на WebKit (Safari, Chrome) и Gecko (Mozilla), винаги има алтернатива: -webkit наклон и -moz-линеен наклон, което предприемат подобни параметри , Как всичко това би трябвало да работи, вижте следния кодов фрагмент:
След представяне, тя изглежда така:
Генериране на градиенти в CSS
На практика такива случаи да се справят с, разбира се, е възможно, но не е много удобно, много по-удобно да се създадат такива блокове от код автоматично. За да направите това, има доста голям брой генератори, но най-вече ми хареса генератора от Colorzilla
- Как да се простират на фона CSS
- Оцветяването, CSS и CSS3 картина ...
- Добавянето на CSS стил за заместителя
