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


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



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


Генератор фона CSS3

18.01.2013, 17:00

Генератор линейного и радиального фона CSS3




Генерируются значения для установки элементам линейного и радиального фона на Ваш выбор.Результат получается в виде кода стилей CSS3 который Вы сможете применить к любым элементам содержащим фон.Вам потребуется путём регулировок ползунками определить вид графического рисунка.




Пример работы с генератором фонов

1.Выберите тип формируемого фона нажав "Линейный фон" или "Радиальный фон"
2.Путём манипуляций с ползунками ручной настройки создайте графику фона
3.Скопируйте сгенерированные значения стилей для фона
4.Примените стиль к любому элементу содержащему фон



Дополнительная информация

Генератор автоматически определит возможности Вашего браузера,красным цветом будет выведено сообщение о поддержке основного свойства.Для доступности фона всем распространённым браузерам Вам потребуется дописать их префиксы

  • Посмотрите статью о префиксах
  • Вам потребуется дописать префиксы -webkit- ,-o- и -ms-.
    Mozila поддерживает основное свойство,для остальных (на момент написания статьи) требовалось наличие префиксов.Ниже пример полученного кода стилей без префиксов и вариант с дописанными.


    Код стилей полученный без префиксов


    background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);


    Код стилей с дописанными префиксами


    background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);
    -webkit-background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);
    -o-background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);
    -ms-background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);



    Способ применения стилей к элементу

    Вам нужно установить класс с любым названием на английском и прикрепить его к элементу содержащему фон.Если элемент к которому будет прикреплён фон уже имеет класс,Вам нужно будет просто дописать в него значения.Вот пример привязки класса к индивидуальному элементу (он должен иметь размер высоты и ширины).



    <style>
    .moi-fon {/* -- Название класса -- */
    width:500px;/* -- Ширина элемента -- */
    height:500px;/* -- Высота элемента -- */
    background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);
    -webkit-background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);
    -o-background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);
    -ms-background-image: radial-gradient(ellipse closest-side at 50% 50% , Red 0%, Black 50%, Purple 100%);
    }
    </style>
    <div class="moi-fon"></div>



    Дополнительная информация

    Если у Вас появилось желание сделать себе графический фон но разобраться не получилось,не рвите нервы себе и не казните меня.В нижней части материала есть редактор в котором Вы сможете вдоволь поэкспериментировать,если что то не получается напишите комментарий,рассмотрим эту тему подробнее.




    Вы можете поэкспериментировать с полученными кодами стилей





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



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





    Переходов: 728 | Добавил: IZOTOP | Рейтинг: 5.0/3 | Теги: Fon, Фон, Background, свойствами, сделать, CSS3, стилями

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

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