Генератор Box Shadow - Полезные ресурсы | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Среда, 07.12.2016
Главная » Полезные ресурсы » Генераторы CSS & HTML


Генераторы изображенийГенераторы CSS & HTML
Генераторы цветаГенераторы онлайн
Поисковые системыКодировщики&Декодеры
Хранилища файловБелые каталоги сайтов
Бесплатные хостингиКаталог сайтов
Полезные страницыОнлайн игры
Сайты с картинкамиВидеохостинги
Заработать на сайте



Адаптивный сайт - aTmpl


Генератор Box Shadow

11.06.2012, 22:15

Генератор свойства box-shadow

Генератор полнофункциональный.Если Вам потребуется составить код для вёрстки с применением данного свойства,то лучше Вы наврятли найдёте.Устанавливаются все параметры,начиная с окружности и заканчивая цветовой гаммой.Получаемый код генерируется с префиксом для браузера Opera ( осёл IE пока не врубается в эту тему,остальные стали поддерживать основное свойство ),советую воспользоваться,вещь ох..нная.Остальные генераторы ещё не обновили свой функционал и продолжают выдавать уже не актуальные префиксы типа ( -moz-box-shadow и -webkit-box-shadow ),от которых и так трещат файлы CSS.Зная что многие не сразу раскурят как этот генератор ипользовать,а точнее что делать с кодом который получится.Вот один пример использования,он не единственный,но может помочь для наглядности.Создаём стиль в материале ( например ),используем для этого тег <div>.Указываем размер и цвет элемента,например 100 х 100 пикселей,красного цвета в идентификаторе и называем его kvadrat.

<style>
#kvadrat {
width:100px;
height:100px;
background-color:red
}
</style>

Вот у нас есть элемент с установленными значениями.Теперь набираем тень для него в генераторе И получаем например такой код

-o-box-shadow:18px -11px 8px rgba(255, 94, 50, 0.86);
box-shadow:18px -11px 8px rgba(255, 94, 50, 0.86);

Добавляем его к нашему "квадрату"

<style>
#kvadrat {
width:100px;
height:100px;
background-color:red;
-o-box-shadow:18px -11px 8px rgba(255, 94, 50, 0.86);
box-shadow:18px -11px 8px rgba(255, 94, 50, 0.86);
}
</style>

А теперь используя тег <div>,воспроизводим получившийся результат,для этого добавляем наш идентификатор во внутрь тега

<div id="kvadrat"></div>

Устанавливаем весь код в теле <body>

<style>
#kvadrat {
width:100px;
height:100px;
background-color:red;
-o-box-shadow:18px -11px 8px rgba(255, 94, 50, 0.86);
box-shadow:18px -11px 8px rgba(255, 94, 50, 0.86);
}
</style>
<div id="kvadrat"></div>

И получаем тень для нашего красного квадрата


Вот что получилось,и не пришлось в слепую высчитывать координаты тени.Вы можете почитать о свойстве box-shadow,будете иметь представление о его работе.




  Снимок сайта   
  • Перейти на сайт



  • Русские шрифты





    Переходов: 909 | Добавил: IZOTOP | Рейтинг: 5.0/3 | Теги: box-shadow, генератор теней, generate

    Комментариев - относящихся к материалу: 0

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]