A cross-browser collection of CSS box-shadow

Кроссбраузерная коллекция CSS теней

version 1.0.4 версия 1.0.4

is a collection of simple and pleasant shadows for you to use in your projects. Great for tables, homepages content, containers, navigation and other blocks your website.

- это коллекция простых и приятных css теней для ваших проектов. Они отлично подходят для использования в таблицах, для содержимого домашних страниц, контейнеров, навигации и других блоков вашего сайта.

Download

Файлы для скачивания

Did you like the collection? Download now it's free

Нравится коллекция? Скачайте ее прямо сейчас

Basic Usage

1. Include the stylesheet on your document's <head>:

Подключение

1. Подключите таблицу стилей после открывающего тега <head>:

<head>
<link rel='stylesheet' href='/box-shadows.css'>
<!-- or -->
<link rel='stylesheet' href='/box-shadows.min.css'>
</head>

2. Add the class .bShadow to the block you want to use:

2. Добавьте класс .bShadow к блоку, который вы хотите использовать:

<div class='bShadow'></div>

3. Next, you need to add an additional number to the existing bShadow or add nearby bShadow bShadow-number. For example, if you want to use a :

3. Далее вам необходимо присвоить номер уже имеющемуся классу bShadow, или добавить следом bShadow bShadow-number. Например, если вы хотите использовать :

<div class='bShadow-1'></div>
<!-- or -->
<div class='bShadow bShadow-1'></div>

Now the collection has more than 50 shadows with the number, as well as four additional classes .bShadow, .bShadow-light, .bShadow-inset and .bSnone. Click on the selector below and see them in action. You can switch the shadows using the arrows on the keyboard. The result is displayed as a shadow in the main container of the site.

Сейчас коллекция насчитывает более 50 вариантов теней с номером, а так же четыре самостоятельных класса .bShadow, .bShadow-light, .bShadow-inset и .bSnone. Нажмите на селектор ниже и посмотрите их в действии. Вы можете переключать тени используя стрелки на клавиатуре. Результат отображается в виде тени в основном контейнере сайта.

bShadow
bShadow-light
bShadow-inset
bSnone

Setting preview

Настройки и предпросмотр

Show in blocks and create a min.css file

1. Change the background of the site and container to your own.

1. Воспользуйтесь формой ниже и измените фон сайта и контейнера на свои собственные.

Open blocks

2. Hover on the block to see them in action. The result of displaying in blocks and as a shadow of the main container.

2. Наводите на блоки, чтобы увидеть их в действии. Результат отображается в блоках и в виде тени основного контейнера сайта.

Complete

Upper shadow

Angle

Down

Blur collection

Side shadows

UpDown shadow

Close details Скрыть блоки

GeneratorГеренатор Box-shadows.min.CSS

3. You can click on the liked containers ↑ to generate their class and box-shadow in the block below ↓

3. Вы можете щелкнуть на понравившиеся контейнеры ↑ чтобы сгенерировать свой собственный файл box-shadows.min.css. Выбранные вами блоки будут появляться в контейнере ниже ↓ с указанием класса и тени.

4. Click 'Download' and install the downloaded file according to the 'Basic Usage'.

4. Нажмите кнопку «Скачать» и подключите скаченный файл к своему сайту согласно инструкции.

Box-shadow CSS GeneratorГеренатор

5. Use the generator and complete the collection with your own styles. By clicking the 'save and add the next' button, you can create several more classes. Then, click in the field with the created classes and combination of keys Ctrl + C copy the received styles into your or downloaded min.css file.

5. Используйте генератор и дополните коллекцию собственными стилями. Кнопка «сохранить и добавить новый» позволит вам создать еще несколько классов. Затем, щелкните в поле с созданными классами и сочетанием клавиш Ctrl + C скопируйте полученные стили в свой или скаченный min.css файл.

-100 100 L / R ()
-100 100 T / B ()
-000 100 Blur ()
-100 100 Spread ()
0000 R
0000 G
0000 B
0000 A (Opacity)

Try, experiment, use whatever you want and how you want!

Пробуйте, экспериментируйте, используйте тени как хотите и где хотите!

There is a problem? Contact Us