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


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



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


Генератор градиентов фона

29.10.2012, 06:44

Генератор линейных градиентов фона

Приличный генератор подбора градиента для фона.Возможности генератора ограничены только временем потраченным на него.Градиенты могут иметь самый разнообразный внешний вид,подбор осуществляется с применением цветов семейства RGB,дополнительно применяется диагональное смещение по осям X и Y.Обязательно попробуйте создать свой градиент,на этом сайте внешний вид элементов включает повсеместное применение градиента.Конечно у генератора нет возможности манипулировать изображениями,сейчас подобные фичи только набирают обороты и не исключено что в скором времени мне удастся постич технологию изготовления подобных устройств.Если Вы не сталкивались с установкой градиентов на сайт,то могу сказать что это обычная процедура.Для начала нужно иметь элемент к которому будет применён градиент,кстати элементом может служить и вся страница целиком.Но мы возьмём обычный элемент размеры которого ограничены установленными значениями в стиле.Прописываем стили для распространённого тега <div>.

<style>
div {
width:100%;
height:300px;
}
</style>

Теперь наберём в генераторе градиентов подходящий стиль и установим в дополнение к набранному стилю элемента.

<style>
div {
width:100%;
height:300px;
background: rgb(255, 129, 255);
background: -moz-linear-gradient(75deg, rgb(255, 129, 255) 0%, rgb(56, 204, 206) 100%);
background: -webkit-linear-gradient(75deg, rgb(255, 129, 255) 0%, rgb(56, 204, 206) 100%);
background: -o-linear-gradient(75deg, rgb(255, 129, 255) 0%, rgb(56, 204, 206) 100%);
background: -ms-linear-gradient(75deg, rgb(255, 129, 255) 0%, rgb(56, 204, 206) 100%);
background: linear-gradient(75deg, rgb(255, 129, 255) 0%, rgb(56, 204, 206) 100%);
}
</style>
<div></div>

Вставьте получившийся код в редактор HTML и посмотрите что получилось.Код был набран за 3-5 секунд,поэтому Вы сможете сделать достаточное количество градиентов на любой вкус и цвет.Генератор сделан мной,если появились вопросы или предложения воспользуйтесь формой комментариев материала.

Вставьте последний код в редактор и проверьте.





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



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





    Переходов: 564 | Добавил: IZOTOP | Рейтинг: 5.0/3 | Теги: градиентный цвет, фон градиент, цветной фон

    Комментариев - относящихся к материалу: 2
    0   Спам
    1 BKV   (15.03.2014 09:17)
    Аватар BKV А возможно создать "живой" градиент, чтобы цвета переливались? biggrin

    +1   Спам
    2 IZOTOP   (15.03.2014 11:12)
    Аватар IZOTOP Последовательное изменение градиентов можно сделать свойствами анимации, аналогичный способ был применён к обычным цветам в этом материале.


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