Главная » Сниппеты » Фон в стиле "карбон" с помощью градиентов CSS

Фон в стиле «карбон» с помощью градиентов CSS

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

В примере использовал повторяющиеся линейные градиенты с углом наклона 45deg, а так же наложение радиального градиента по-центру вверху at 50% 0, для имитации светового блика:
 
CSS Текстура в стиле карбон
 

Получившееся фоновое «изображение» масштабируем и изменяем размер точек, с помощью значений свойства background-size. Попробуйте поэкспериментировать со значениями заданными в единицах em и вы увидите совсем другую картину ))

Для наглядности прописал заголовок <h1> с визуальным эффектом вдавленности текста и добавил разделитель <hr>, оформленный нестандартно, с помощью всё тех же градиентов. В итоге получилось то, что получилось.

С поддержкой браузерами, без особых изменений, современные браузеры отлично «отрисовывают» все элементы, а вот в IE, текстуры увидят пользователи не ниже 10-й версии ((

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru