Основе CSS градијената
CSS градијенти омогућавају приказивање глатких прелаза између две или више боја унутар веб дизајна. Уместо коришћења статичних слика за позадине, прегледач динамички исцртава ове прелазе на основу дефинисаних параметара у CSS коду. Овај алат подржава три основне врсте градијената: линеарни, радијални и конусни.
Почетни градијент у алату садржи две тачке прелаза боја: #6366f1 на позицији 0% и #ec4899 на позицији 100%. Корисник може прилагодити ове вредности, додати нове боје или променити геометријска својства како би генерисао одговарајући CSS код за позадину веб странице.
Линеарни градијенти: Смер и тачке прелаза
Линеарни градијент прелива боје дуж праве линије. Смер овог прелива одређује се уносом нумеричке вредности за угао. Клизач за угао дефинише правац кретања боја, при чему вредност од 0° усмерава градијент нагоре, док вредност од 90° усмерава прелив надесно.
Боје се распоређују дуж ове линије на основу својих позиција изражених у процентима. Почетна тачка се налази на 0%, док се крајња тачка налази на 100%. Променом ових процената контролише се где поједине боје почињу да доминирају и како се међусобно мешају дуж дефинисаног угла.
Радијални градијенти: Облици и ширење боја
За разлику од линеарних, радијални градијент шири боје кружно или елиптично из централне тачке ка спољашњим ивицама. Код ове врсте градијента угао се не користи. Уместо тога, корисник бира геометријски облик који дефинише начин ширења боја.
Доступне опције за облик су:
- Елипса: Боје се шире у облику елипсе, прилагођавајући се пропорцијама елемента.
- Круг: Боје се шире у правилном кружном облику без обзира на димензије самог елемента.
Распоред боја се и даље контролише процентуалним позицијама, где 0% представља сам центар, а 100% спољну границу градијента.
Конусни градијенти: Ротација око централне тачке
Конусни градијент креира прелив који се ротира око централне тачке, слично изгледу точка боја. Уместо да се боје шире од центра или дуж праве линије, оне се исцртавају у смеру казаљке на сату око средишта.
Код конусних градијената, угао се користи за одређивање почетне тачке од које почиње ротација боја. Вредност од 0° означава почетак на самом врху (нагоре), док веће вредности померају почетну тачку ротације у смеру казаљке на сату. Тачке прелаза боја распоређене су у процентима од 0% до 100% дуж пуног круга од 360 степени.
Улога тачака прелаза у дизајну градијената
Тачке прелаза боја одређују тачне позиције на којима су одређене боје фиксиране дуж градијента. Свака појединачна тачка састоји се од вредности боје и њене позиције изражене у процентима од 0% до 100%.
Алат омогућава коришћење до осам тачака прелаза боја. Када се дода максималних осам тачака, дугме "Додај тачку прелаза" постаје онемогућено. Свака новододата тачка прелаза аутоматски добија подразумевану позицију од 50%. Корисник може уклонити сувишне тачке кликом на опцију "Уклони тачку прелаза". Ова флексибилност омогућава креирање једноставних прелаза са две боје, као и сложених вишебојних шема за напредне корисничке интерфејсе.
Ефикасно коришћење алата Генератор градијената
Процес креирања градијента састоји се од неколико корака унутар корисничког интерфејса:
- Избор врсте градијента: Под заглављем "Врста градијента" бира се једна од три опције: "Линеарни", "Радијални" или "Конусни".
- Подешавање геометрије: У зависности од изабране врсте, подешава се "Угао" за линеарне и конусне градијенте, или се под заглављем "Облик" бира између опција "Елипса" и "Круг" за радијалне градијенте.
- Дефинисање боја: Под заглављем "Тачке прелаза боја" подешавају се појединачне боје и њихове позиције. Свака тачка садржи поља "Боја тачке прелаза" и "Позиција". Нове тачке се додају кликом на "Додај тачку прелаза".
- Преузимање кода: Током рада, визуелни приказ градијента се ажурира уживо. Када је изглед готов, под заглављем "CSS" налази се генерисани код. Кликом на дугме "Копирај CSS", текст на дугмету се мења у "Копирано", а код је спреман за убацивање у CSS датотеку.
Сваки градијент се исцртава директно у вашем прегледачу. Ништа што овде подесите не шаље се на BroBroGo, што обезбеђује локалну обраду података током рада.
Често постављана питања (FAQ)
Која је разлика између линеарних, радијалних и конусних градијената?
Линеарни градијент прелива боје дуж праве линије под одређеним углом. Радијални градијент их шири кружно или елиптично из центра ка споља. Конусни градијент их ротира око централне тачке, слично точковима боја.
Шта су то тачке прелаза боја?
Свака тачка прелаза (color stop) представља боју фиксирану на одређеној позицији дуж градијента — 0% на почетку, 100% на крају. Померите тачку да бисте променили где је та боја најизраженија, или додајте нове тачке за сложеније преливе. Можете користити до осам боја.
Како да контролишем смер градијента?
Код линеарних или конусних градијената, клизач за угао одређује смер — 0° је усмерено нагоре, а 90° надесно. Радијални градијент нема угао; уместо тога изаберите облик круга или елипсе да бисте дефинисали како се боје шире.
Колико тачака прелаза боја могу да додам?
Алат подржава до осам тачака прелаза боја. Када достигнете овај лимит, опција за додавање нових тачака биће онемогућена. Свака нова тачка коју додате биће постављена на подразумевану позицију од 50%.