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