ЦСС3 Репеатинг Градиентс [ЦСС3 Типс]

Постоје многе ЦСС3 карактеристике које мењају начин на који декоришемо сајт, од којих је један ЦСС3 градијент. Пре ЦСС3, дефинитивно су нам потребне слике за креирање ефекта градијента; сада можемо испоручити исте (и боље) ефекте само помоћу ЦСС-а

У нашим претходним постовима расправљали смо о два типа градијента који се могу постићи помоћу ЦСС3:

• Радиал и
• Линеар Градиентс.

Овај пут ћемо погледати у њиховог брата: понављајући градијенти.

Басиц Репеатинг

Репеатинг Градиентс је у суштини продужетак. Синтакса је слична оној у којој дефинишемо радијалне и линеарне градијенте, али само као што име имплицира, она ће такође поновити боје у одређеном правцу. Да бисмо поновили линеарне градијенте, можемо користити ову функцију: понављајући-линеарни градијент, док за понављање радијалног или елиптичног градијента користимо ову функцију: понављајући-радијални градијент.

 / * Линеар * / .градиент бацкгроунд: понављања-линеар-градијент (0дег, # ф9ф9ф9, #цццццц 20пк);  / * Радиал * / .градиент позадина: понављање-радијално-градијент (50% 50%, круг, # ф9ф9ф9, #цццццц 20пк);  

Нема пуно разлике за остатак кода, осим за понављање боја. Испод је једноставна илустрација која описује како ово понављање боја функционише.

Иако слика изнад само илуструје понављајуће линеарне градијенте, основна идеја се такође примењује на радијалне градијенте у којима ће се боје бесконачно понављати, у овом случају, у било ком правцу. Следите линк испод да видите демо.

• Виев Демо

У следећем одељку, показат ћемо вам како можемо користити ЦСС3 Репеатинг Градиентс у стварним примјерима.

Пример: Креирање образаца

Најчешћа имплементација Репеатинг Градиентс је креирање позадинских образаца. У овом примеру, креират ћемо једноставне узорке вертикалне пруге.

 .градиент бацкгроунд: репеатинг-линеар-градиент (0дег, # ф9ф9ф9, # ф9ф9ф9 20пк, #цццццц 20пк, #цццццц 40пк);  

Обратите пажњу на то како дефинишемо две различите боје - # ф9ф9ф9 и #цццццц - на истом месту, 20пк. Овај пример ће изоштрити разлику између ове две боје и елиминисати нејасноћу.

Да бисмо усмерили оријентацију једноставно мењамо угао - 90дег ће га усмерити хоризонтално 45дег ће га усмерити дијагонално и тако даље.

• Виев Демо

Пример: Креирање Паперлине

У овом другом примјеру, направићемо листу папира коју често можете видјети у биљежници. Да бисмо створили овај ефекат, треба нам само један див, нема слика, само ЦСС.

 .градиент видтх: ауто; хеигхт: 500пк; маргин: 0 50пк; бацкгроунд: -вебкит-репеатинг-линеар-градиент (-90дег, # ф9ф9ф9, # ф9ф9ф9 20пк, #цццццц 21пк); бацкгроунд: -моз-репеатинг-линеар-градиент (-90дег, # ф9ф9ф9, # ф9ф9ф9 20пк, #цццццц 21пк); бацкгроунд: -о-репеатинг-линеар-градиент (-90дег, # ф9ф9ф9, # ф9ф9ф9 20пк, #цццццц 21пк); бацкгроунд: репеатинг-линеар-градиент (-90дег, # ф9ф9ф9, # ф9ф9ф9 20пк, #цццццц 21пк); бацкгроунд-сизе: 100% 21пк;  

Такође, додали смо и ЦСС3 величине позадине за одређивање величине позадинских слика за 100%, 20пк. Иако ЦСС3 градијенти приказују 'боје', то је заправо категорисано као слика, не боје.

Затим ћемо користити :пре него што псеудо-елемент да бисте додали траку на левој страни папира.

 .градиент: бефоре цонтент: ""; дисплеј: инлине-блоцк; хеигхт: 500пк; видтх: 4пк; бордер-лефт: 4пк доубле # ФЦА1А1; позиција: релативна; лево: 30пк;  

И завршили смо, стварно је једноставно? Сада их све можемо видети у акцији са линкова испод.

• Виев Демо
• Довнлоад Соурце

Даљи ресурси

• Вебкит ЦСС3 Градиентс
• ЦСС3 градијенти на Мицрософт Девелопер Нетворк