CSS3 повторителни градиенти [CSS3 Съвети]

Има много функции на CSS3, които променят начина, по който декорираме уеб сайт, един от които е CSS3 Gradients. Преди CSS3, определено имаме нужда от изображения, за да създадем градиентния ефект; сега можем да постигнем същите (и по-добри) ефекти, като използваме само CSS

В предишните ни публикации обсъдихме два типа градиенти, които могат да бъдат постигнати с CSS3:

• Радиален и
• Линейни градиенти.

Този път ще разгледаме техния брат: повтарящи се градиенти.

Основно повторение

Повтарящи се градиенти по същество е продължение. Синтаксисът е подобен на начина, по който дефинираме радиални и линейни градиенти, само че както подсказва името, той също ще повтори цветовете в определена посока. За да повторите линейните градиенти, можем да използваме тази функция: повтарящ-линеен градиент, докато за повтаряне на радиални или елиптични градиенти използваме тази функция: повтаряне-радиален наклон.

 / * Линеен * / .gradient фон: повтарящ се линеен градиент (0deg, # f9f9f9, #cccccc 20px);  / * Radial * / .gradient фон: повтарящ се радиален градиент (50% 50%, кръг, # f9f9f9, #cccccc 20px);  

Няма много разлика за останалата част от кода, освен за повторение на цветовете. По-долу е дадена проста илюстрация, която описва как работи това повторение.

Въпреки че изображението по-горе само илюстрира повтарящи се линейни градиенти, основната идея се отнася и за радиалните градиенти, в които цветовете ще се повторят безкрайно, в този случай във всяка посока. Следвайте връзката по-долу, за да видите демото.

• Преглед на демо

В следващия раздел ще ви покажем как можем да използваме CSS3 Repeating Gradients в реални примери.

Пример: Създаване на шаблони

Най-честото прилагане на Повтарящи се градиенти е да създавате фонови модели. В този пример ще създадем прости модели с вертикални ивици.

 .gradient фон: повтарящ се-линеен градиент (0deg, # f9f9f9, # f9f9f9 20px, #cccccc 20px, #cccccc 40px);  

Забележете как определяме два различни цвята - # f9f9f9 и #cccccc - на същото място, 20px. Този пример ще изостри разликата между тези два цвята и ще премахне неясността.

За да насочим ориентацията, просто променяме ъгъла - 90deg ще го насочи хоризонтално, докато 45deg ще го насочи диагонално и т.н..

• Преглед на демо

Пример: Създаване на Paperline

В този втори пример ще създадем хартия, която често може да видите в тетрадка. За да създадем този ефект, трябва само един Разделение, няма изображения, само CSS.

 .gradient width: auto; височина: 500px; марж: 0 50px; background: -webkit-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); background: -moz-repeating-linear-gradient (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); фон: -о-повтарящ се линеен градиент (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); фон: повтарящ се линеен градиент (-90deg, # f9f9f9, # f9f9f9 20px, #cccccc 21px); размер на фона: 100% 21px;  

Забележете, че добавихме и CSS3 фон размер за определяне на размерите на фоновите изображения за 100%, 20 пиксела. Въпреки че CSS3 Gradients показва „цветове“, всъщност е категоризиран като изображение, не цвят.

След това ще използваме :преди псевдо-елемент за да добавите ивица от лявата страна на хартията.

 .градиент: преди content: ""; дисплей: вграден блок; височина: 500px; ширина: 4px; граница ляво: 4px двойно # FCA1A1; позиция: относителна; наляво: 30px;  

И ние сме готови, наистина е просто? Сега можем да ги видим в действие от връзките по-долу.

• Преглед на демо
• Изтеглете Източник

Допълнителни ресурси

• Webkit CSS3 градиенти
• CSS3 Gradients в Microsoft Developer Network