Генератор на CSS Box-Shadow

Визуално регулирайте сенките и копирайте CSS кода незабавно

Интуитивно регулирайте хоризонталното отместване, вертикалното отместване, размазването, разпространението, цвета и непрозрачността на box-shadow с плъзгачи. Настройте фино сенките в реално време с предварителен преглед и лесно постигнете сложни дизайни като Neumorphism. Копирайте завършения CSS код с едно кликване.

Предварителен преглед

Свойства на сянката

Хоризонтално отместване (X) 0px

Вертикално отместване (Y) 4px

Размазване (Blur) 12px

Разпространение (Spread) 0px

Цвят Непрозрачност

Вътрешна сянка (inset)

Предварителни настройки

Мека

Средна

Твърда

Neumorphism

Как да използвате

Използването на генератора на CSS box-shadow е лесно:

Стъпка 1: Регулирайте сянката с плъзгачи

Регулирайте параметрите за хоризонтално отместване, вертикално отместване, размазване и разпространение с плъзгачи. Промените се отразяват в предварителния преглед в реално време.

Стъпка 2: Задайте цвят и непрозрачност

Изберете цвят на сянката с инструмента за избор на цветове и настройте фино непрозрачността (0.0-1.0) с цифров вход. Проверете „inset“ за създаване на вътрешна сянка.

Стъпка 3: Копирайте CSS кода

Регулирайте, докато проверявате предварителния преглед, след което копирайте завършения CSS код с едно кликване.

Този инструмент работи изцяло във вашия браузър. Цялата обработка се извършва на вашето устройство. Не се изпращат външни данни.

Случаи на употреба

Генераторът на CSS box-shadow може да се използва в следните сценарии:

1. Създаване на дълбочина за потребителски интерфейс в стил карта

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

2. Ефекти при задържане на бутони (Hover effects)

Усилете сенките при задържане на бутони, за да комуникирате визуално, че елементът може да се кликне. Директно подобрява използваемостта.

3. Отделяне на модални прозорци от фона

Приложете тъмни сенки към модални прозорци, за да ги отделите ясно от съдържанието на фона. Фокусира вниманието на потребителя върху конкретни действия.

4. Neumorphism дизайн

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

5. Индикация за фокус за въвеждане на формуляри

Приложете вътрешни сенки (inset) към елементите за въвеждане при фокус, за да подчертаете визуално текущото активно поле. Подобрява използваемостта на формуляра.

6. Фиксирана навигационна лента в горния край (Header)

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

Какво е CSS box-shadow

box-shadow е CSS свойство, което добавя сенки към HTML елементи. Това е основна техника за уеб дизайн, която може да изрази дълбочина и измерение, използвайки само CSS код без изображения.

Параметри на box-shadow

box-shadow се задава в реда 'хоризонтално-отместване вертикално-отместване размазване разпространение цвят'. Хоризонталното и вертикалното отместване определят позицията на сянката, размазването контролира мекотата на ръба, разпространението контролира размера на сянката, а цветът може да бъде зададен с RGBA, включително прозрачност.

inset (Вътрешна сянка)

Добавянето на ключовата дума inset чертае сянката вътре в елемента, вместо извън него. Подходящо за изразяване на вдлъбнати входове на формуляри или състояния на натиснат бутон.

Наслояване на множество сенки

Могат да бъдат зададени множество box-shadow свойства с разделяне със запетая за наслояване на сенки. Neumorphism дизайнът комбинира светли и тъмни сенки, за да изрази триизмерна текстура.

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

Безплатен ли е генераторът на CSS box-shadow?

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

Каква е разликата между размазване (blur) и разпространение (spread)?

Размазването определя колко мек е ръбът на сянката, докато разпространението определя колко да се увеличи или намали размерът на сянката. С размазване 0 и разпространение 10 получавате остра, голяма сянка.

Какво е Neumorphism?

Neumorphism е техника за дизайн, която комбинира светли и тъмни сенки, за да накара елементите да изглеждат като че ли изпъкват или се вдлъбват от екрана. Създава модерно, изтънчено впечатление.

Кога трябва да използвам inset (вътрешна сянка)?

Използвайте го, когато изразявате вдлъбнати елементи като полета за въвеждане или състояния на натиснат бутон. Комбинирането с обикновени (външни) сенки позволява по-голямо триизмерно изразяване.

Какво е въздействието на box-shadow върху производителността?

box-shadow е относително леко CSS свойство, но сенките с голямо размазване или множество наслоени сенки могат да увеличат натоварването при изобразяване. Необходима е допълнителна грижа за смартфоните.

Поддържа ли се от всички браузъри?

box-shadow се поддържа от всички основни браузъри, включително IE9+, Chrome, Firefox, Safari и Edge. По-старите браузъри може да изискват префикси на доставчика (-webkit-box-shadow).

Трябва ли цветът на сянката да бъде RGB или RGBA?

Препоръчва се RGBA, тъй като позволява регулиране на непрозрачността. Като цяло, непрозрачност на сянката от 0.1-0.3 създава естествени сенки, които се сливат добре с фоновете.

Мога ли да използвам генерирания CSS код такъв, какъвто е?

Да, генерираният код може да се използва незабавно, като го копирате и поставите във вашия CSS файл. Той е написан като свойство box-shadow и е готов за прилагане.