Как сделать красивый фон css

Создаем красивый градиент фона + трансформация skew в CSS3

Ранее в блоге мы уже рассказывали про линейные градиенты и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации трансормаций в CSS3.

Можно сказать, что основная идея фонового изображения позаимствована с сайта компании BrightMedia, который является прекрасным примером профессионального использования всех возможностей CSS3.

Красивый градиент фона на BrightMedia

Правда, мы не будем повторять один в один реализацию фона с данного проекта, а попробуем воссоздать нечто отдаленно похожее. Во-первых, судя по всему, разработчкии BrightMedia сейчас уже не используют линейные градиенты, заменив их на canvas. Во-вторых, наша основная задача — потренирвоаться с linear-gradient и skew трансформацией в CSS3. В итоге должно получиться что-то вроде следующей картинки:

Создаем красивый градиент фона на CSS

1. Подготовка и контейнер

Для того, чтобы создать на CSS градиенты фона нам потребуется реализовать наложение нескольких слоев элементов DIV на странице, имеющей черный цвет. Прежде чем прибегнуть к опциям CSS3 для работы с 2D-трансформацией и linear-gradient, задаем размеры и местоположение блоков. Открываем новый файл CSS стилей и начнем его с такого кода:

При создании основного контейнера DIV используем произвольные размеры и полное разрешение. Данный четырехугольник представляет собой область наложения градиентов.

Создаем красивый фон на CSS

В HTML файл пишем код:

Стили при этом следующие:

2. Слои

Будем называть наши градиентные слои «mylayer». Как только вы создадите один такой элемент, работа с остальными не вызовет сложностей (процесс абсолютно идентичен). Все начинается с четырехугольника, к которому применим 2D-трансформацию, а именно метод skew. Это позволит исказить его, наклонив его оси X. Все слои в примере имеют наклон = 45 градусов влево или вправо. В HTML добавляем:

<body> <div <div <div <div <div <div градиент фона и трансформация skew в CSS3</div> </div> </body>

Последним в коде расположен текстовый блок. CSS стили при этом следующие:

Увидеть блоки без фона можно путем добавления в код свойства border.

3. Градиент для фона

Итак, на предыдущем мы определили местоположение блоков DIV + задали им искажение. Теперь можно подобрать соответствующий градиент. В данном примере наиболее подходящим является линейный градиент, однако, можно использовать и радиальный. Для каждого из классов добавляете нужную заливку, например:

Вы можете направлять градиент вверх, вниз, влево или вправо, определяя значение цвета с помощью метода rgba(). При этом кроме фона можно определить степень прозрачности блоков.

4. Фоновое изображение

Наиболее красивый градиент фона получается при наложении цветов с невысоким уровнем прозрачности, достаточном для того, чтобы нижние слои были видны. Также на странице можно добавить дополнительный фон &#8212; например, на сайте BrightMedia есть прозрачный Png файл с точками и линиями. Нужно создать соответствующую картинку, загрузить ее на ваш сайт, а в стилях для body добавить что-то вроде:

5. Итого

Дабы итоговый CSS градиент фона удовлетворил вас на 100%, придется несколько раз редактировать код и просматривать, что же получилось на сайте. Результат достигается путем проб и ошибок до тех пор, пока не будет подобрано наилучшее сочетание наложения различных блоков. Вот мой финальный код (можно глянуть на codepen):

See the Pen reEqVR by Alex (@alextod) on CodePen.

Трансформация skew в CSS

Напоследок пару слов о функции CSS transform skew, которую мы использовали в примерах выше. Как вы уже наверняка поняли, она осуществляет 2D-трансформацию с определенным блоком DIV, задавая ему определенное искажение (отклонение) относительной оси X и/или Y. Есть 3 варианта использования данного метода:

  • skewX() &#8212; искажение вдоль оси X;
  • skewY() &#8212; отклонение по оси Y;
  • skew() &#8212; одновременно задается значения и по X и по Y.

В последнем случае для skew вам нужно будет задавать 2 величины (по X и Y), например так:

Кстати, такая запись используется для корректной работы кода в IE 9 и Safari. Если при использовании функции skew второй параметр опускается, то предполагается, что он равен 0. У skewX и skewY изначально есть только одно значение.

В принципе, ничего сложного в трансформации skew нету. Можете попробовать создать несколько примеров дабы понять для себя как именно производится искажение. Не знаю насколько красивый градиент фона на CSS у нас получился, но что-то новое для себя вы определенно узнали.

Как создать красивый фон для сайта?

Прочитав эту статью, вы узнаете, как создать красивый фон для сайта, как изменить фон сайта и многое другое. Мы будем использовать технологии HTML+CSS и программу Adobe Photoshop.

Завтра мы начинаем изучение HTML, и начнем с первого тега TITLE (подпишитесь, чтобы его не пропустить). Этот тег отвечает за заголовок окна браузера. Также разберем влияние этого тега на ваш сайт, относительно привлечения трафика.

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

Итак, открываем фотошоп и создаем новый документ любым, например 300×300. Цветовой режим поставим 8 бит, чтобы изображение весило меньше и быстрее загружалось при загрузке сайта. Вы можете поставить 16 или 32 по вашему усмотрению.

Создание фона в фотошопе

Теперь выберите инструмент «Кисть (B)»:

Создание фона в фотошопе

Щелкните правой кнопкой мыши по любому свободному месту на рабочем документе и выберите кисть в форме звезды размером 24 или 29 пикселей:

Создание фона в фотошопе

Теперь можете пощелкать левой кнопкой мыши в области документа, чтобы посмотреть, как работает кисть. Меняя основной цвет в палитре цветов и размер кисти, изобразите, что-то подобное:

Создание фона в фотошопе

Теперь сохраните это изображение, выбрав из главного меню команду «Файл» — «Сохранить для Web и устройств» или нажмите сочетания клавиш «Alt+Shift+Ctrl+S». Откроется диалоговое окно, в котором вам необходимо выставить следующие настройки, перед тем, как сохраните изображение (эти настройки я выставляю как рекомендуемые, по желанию можете их поменять):

Создание фона в фотошопе

Нажмите кнопку «Сохранить». Сохраните фон под именем «fon1.png». Все, фон готов! Вот такой простой, легкий фон готов. Сейчас мы не будем его подключать, а создадим еще один, очень простой фон, но в тоже время очень стильный.

Создаем новый документ размером 3×3. Настройки оставляем те же, что и в первом документе. Увеличиваем созданный документ до предела (3200%). Выбираем инструмент «Карандаш (B)»:

Создание фона в фотошопе

Теперь можете выбрать цвет вашего фона, я выберу светло-серый цвет, вы можете выбрать любой, но не сильно яркий. Размер карандаша должен быть 1 пиксель. Изменить его можно так же, как меняли кисть — правой кнопкой мыши. Рисуем так, как показано на рисунке ниже.

Создание фона в фотошопе

Сохраняем его так же, как и предыдущее изображение, только под именем «fon2.png».

Теперь у нас готово 2 фона собственного производства. Теперь давайте подключим эти фоны к сайту. Делать это мы будем с помощью HTML+CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *