Генератор на CSS свойства

Генераторът на CSS свойства е инструмент, който създава CSS код за визуален ефект чрез набор от плъзгачи и инструменти за избор на цвят, вместо потребителят да въвежда кода ръчно. Този генератор обхваща четири ефекта: градиенти, сенки на кутии, радиус на рамката и сенки на текста. Всеки панел показва визуализация в реално време и генерира готов за копиране CSS код.

Какво генерира

• Градиенти: линейни или радиални преходи между два цвята
• Сенки на кутии: падаща или вътрешна сянка около елемент с настройки за отместване, размазване, разширяване, цвят и непрозрачност
• Радиус на рамката: заоблени ъгли, еднакви и за четирите ъгъла или зададени поотделно
• Сенки на текста: сянка зад текста с настройки за отместване, размазване, цвят и непрозрачност

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

Как се изчислява линеен CSS градиент

Линейният градиент преминава от един цвят към друг по права линия. Синтаксисът му в CSS е:

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

Ъгълът се измерва в градуси, от 0 до 360. position1 и position2 задават мястото, където всеки цвят достига пълната си наситеност, като процент от дължината на градиента.

Решен пример

Началните стойности на генератора са ъгъл от 90 градуса, #ff5f6d при 0% и #ffc371 при 100%. Това дава:

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

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

Формула за радиален градиент

Радиалният градиент се разпространява навън от централна точка, а не по линия:

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Този генератор винаги създава кръгов радиален градиент. Той не предлага форма на елипса или възможност за преместване на централната точка; могат да се променят само двата цвята и позициите на техните стопове.

И двата типа градиенти в този инструмент използват точно два цвята, зададени с инструментите за избор на Color 1 и Color 2. Няма възможност за добавяне на трети цветови преход.

Формула за CSS сянка на кутия

Сянката на кутия е сянка, начертана около ръбовете на елемент:

1box-shadow: h-offset v-offset blur spread color;
2

h-offset и v-offset преместват сянката наляво/надясно и нагоре/надолу. Положителните стойности я изместват надясно или надолу, а отрицателните — наляво или нагоре. blur омекотява ръба на сянката; по-голямата стойност разпростира омекотяването на по-голяма площ. spread увеличава или намалява размера на сянката, преди да бъде приложено размазването. Добавянето на ключовата дума inset преди отместванията начертава сянката вътре в рамката на елемента, а не извън него.

Решен пример

При настройките по подразбиране (хоризонтално отместване от 5 пиксела, вертикално отместване от 5 пиксела, размазване от 10 пиксела, разширяване от 0 пиксела, черен цвят с непрозрачност 20%) инструментът извежда:

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Плъзгачът за непрозрачност на инструмента за избор на цвят е в диапазона от 0 до 100 и се преобразува в скалата от 0 до 1, която използва rgba(), така че 20% става 0,2.

Формула за CSS радиус на рамката

Радиусът на рамката заобля ъглите на елемента. Съществуват две форми:

1border-radius: value;                              /* same on all four corners */
2border-radius: top-left top-right bottom-right bottom-left; /* set separately */
3

Когато и четирите ъгъла имат една и съща стойност, генераторът използва кратката форма. Когато стойностите се различават, той ги изрежда в точния ред: горе вляво, горе вдясно, долу вдясно, долу вляво.

Решен пример

Радиусът по подразбиране е 10 пиксела за всеки ъгъл:

1border-radius: 10px;
2

За кръгло изображение на аватар обикновено се използва border-radius: 50%, макар че тази стойност е извън диапазона, който плъзгачът на генератора позволява (от 0 до 100 пиксела).

Формула за CSS сянка на текста

Сянката на текста работи като сянка на кутия, но няма стойност за разширяване и се прилага върху буквите, а не върху кутията на елемента:

1text-shadow: h-offset v-offset blur color;
2

Решен пример

При настройките по подразбиране (хоризонтално отместване от 2 пиксела, вертикално отместване от 2 пиксела, размазване от 3 пиксела, черен цвят с непрозрачност 50%):

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Какви кодове за цвят приема генераторът

Всеки елемент за избор на цвят има мостра и текстово поле. Текстовото поле приема шестнадесетичен код за цвят, формата #, използвана навсякъде в CSS. Валидни са четири дължини: три цифри (#f00), четири цифри (#f00c), шест цифри (#ff0000) и осем цифри (#ff0000cc). Кратките форми означават същия цвят като дългите, защото всяка цифра се удвоява: #123 е същият цвят като #112233.

Последната цифра на формата с четири цифри и последната двойка от формата с осем цифри задават прозрачността. Генераторите на сенки игнорират тези цифри и вземат стойността на алфа канала от плъзгача за непрозрачност, така че плъзгачът винаги показва прозрачността, която действително се прилага. Ако текстовото поле съдържа нещо, което не е шестнадесетичен цвят, например частично въведен код, сянката се връща към черно, вместо да се създаде невалидна декларация.

Как се използва генераторът на CSS свойства

1. Изберете раздел: Gradient, Box Shadow, Border Radius или Text Shadow.
2. Настройте плъзгачите, инструментите за избор на цвят и квадратчетата за отметка. До всеки плъзгач има поле за число, в което може да се въведе точна стойност. Панелът за визуализация и CSS кодът се обновяват незабавно.
3. Изберете бутона „Copy to Clipboard“ и поставете кода в таблица със стилове или в атрибут style.
4. Изберете „Reset“, за да върнете всяко поле във всички четири раздела към началната му стойност. Това също превключва активния раздел обратно към Gradient, дори ако е бил отворен друг раздел.

Често задавани въпроси

За какво се използва генераторът на CSS свойства? Той преобразува въведените стойности чрез плъзгачи и инструменти за избор на цвят в готов CSS код за градиенти, сенки и заоблени ъгли, така че потребителят да не трябва да пише или запомня този синтаксис на ръка.

Каква е разликата между линеен и радиален градиент? Линейният градиент променя цвета по права линия под зададен ъгъл. Радиалният градиент променя цвета навън от централна точка. Радиалната опция на този инструмент винаги използва кръгла форма.

Може ли този инструмент да създаде градиент с повече от два цвята? Не. И двата панела за линеен и радиален градиент поддържат точно два цвята — Color 1 и Color 2, всеки със собствена позиция на прехода.

По какво вътрешната сянка на кутия се различава от обикновената? Обикновената сянка на кутия се намира извън ръбовете на елемента, сякаш зад него пада светлина. Вътрешната сянка се намира от вътрешната страна на ръбовете, което създава вид на вдлъбнат, а не на изпъкнал елемент.

Защо стойностите за заоблените ъгли се появяват в реда горе вляво, горе вдясно, долу вдясно, долу вляво? Това е редът, в който CSS свойството border-radius очаква да бъдат записани четири отделни стойности — по посока на часовниковата стрелка, започвайки от горния ляв ъгъл.

Работи ли генерираният CSS във всеки браузър? Градиентите, сенките на кутии, радиусът на рамката и сенките на текста се поддържат в актуалните версии на Chrome, Firefox, Safari и Edge. Към изхода не се добавят префикси за конкретни производители.

Източници

1. MDN Web Docs: Използване на CSS градиенти
2. MDN Web Docs: box-shadow
3. MDN Web Docs: border-radius
4. MDN Web Docs: text-shadow