Как сделать дизайн блока белым цветом

Как сделать дизайн блока белым цветом
Как сделать дизайн блока белым цветом
Как сделать дизайн блока белым цветом

Однажды я уже как то касался темы форматирования блоков средствами CSS в статье 5 CSS Стилей для блока с фоном. Сегодня расскажу как благодаря CSS3 мы можем расширить свои возможности при оформлении блочных элементов страницы.

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

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

Работая над стилями, по прежнему стоит помнить о том, что каждый браузер отображает по своему, все что мы делаем.  Например то как поддерживает CSS пресловутый Internet Explorer , начинает вызывать уже тошноту.  В других современных браузерах все выглядит просто и со вкусом.

1. Легкий Пресс

CSS Границы Легкий Пресс - Вдавленность
 
Обзовите этот эффект как хотите, я не стал умничать и назвал так «Легкий Пресс», потому что создается иллюзия легкой вдавленности  блока с содержимым  по отношению к основному, темному фону  страницы. Похожую технику описывал в   Эффект Высокой печати с CSS для текста, но в данном примере мы работаем с установкой цвета границ и тени, манипулируя параметром box-shadow в стиле. Тень для текста, это уже кому как надо.

CSS #press { background: #222; color: #555; text-shadow: 0px 2px 3px #171717; box-shadow: 0px 2px 3px #555; -webkit-box-shadow: 0px 2px 3px #555; -moz-box-shadow: 0px 2px 3px #555; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

#press { background: #222; color: #555; text-shadow: 0px 2px 3px #171717; box-shadow: 0px 2px 3px #555; -webkit-box-shadow: 0px 2px 3px #555; -moz-box-shadow: 0px 2px 3px #555; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }

Добавляем немного округлости углам в пункте border-radius и замечательный блок готов.
 

 

Легкая Тень

CSS Границы - Легкая Тень
 
Отображение легкой тени, доcтигается установкой границ с оттенками серого цвета, то есть подбором основного цвета и непосредственно оттенков нижней границы блока в параметрах border-bottom. Этот метод уже хорош тем, что поддерживается практически всеми современными браузерами, да и в целом не напрягает глаз пользователя.

CSS #shadow { border: 1px solid #D6D3D3; border-bottom: 2px solid #C4C2C2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

#shadow { border: 1px solid #D6D3D3; border-bottom: 2px solid #C4C2C2; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

 

 

Прессованный

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

CSS #pressed { color: #E6E0E0; background: #111; border: 1px solid #000; border-right: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

#pressed { color: #E6E0E0; background: #111; border: 1px solid #000; border-right: 1px solid #353535; border-bottom: 1px solid #353535; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

 

 

Объемный

CSS Границы - Объемный блок
 
За основу этого метода стилизации границ, не особо заморачиваясь, взял стиль вывода цитат плагином «WP-Note», работу которого можно встретить почти в каждой статье моего блога.
Немного поэкспериментировал с параметрами стиля, закругленные углы приняли стальной отблеск, мягкая тень границ и замечательный блок для любого контента готов.

CSS #note { background-color: #EEF; color: #4D4B4B; border: 1px solid #999999; border-radius: 10px 10px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; box-shadow: 2px 2px 3px #999; -webkit-box-shadow: 2px 2px 3px #999; -moz-box-shadow: 2px 2px 3px #999; }

#note { background-color: #EEF; color: #4D4B4B; border: 1px solid #999999; border-radius: 10px 10px; -moz-border-radius: 10px 10px; -webkit-border-radius: 10px 10px; box-shadow: 2px 2px 3px #999; -webkit-box-shadow: 2px 2px 3px #999; -moz-box-shadow: 2px 2px 3px #999; }

 

 

Вдавленные Линии

CSS Границы - Вдавленные Линии
 
Идея конечно не нова, часто используется такая техника при создании списков и вертикальных меню. Хороший пример — блог уже знакомого нам . Достигается простым сочетанием верхней и нижней границ с различными оттенками цвета фона. Надо всегда иметь в виду, что first-child и last-child CSS селекторы не поддерживаются старыми браузерами. И это в настоящее время является занозой в заднице, для всех мастеров пытающихся идти в ногу со временем. Чтобы обойти этот косяк, вы можете использовать некоторые плагины JQuery, для поддержки старых браузеров. Хотя я считаю, что пора уже прекращать подстраиваться под тупорылые браузеры, пусть лучше они «ложатся под нас» ( мечтать не вредно ).

CSS #indented ul{ margin: 20px 0; padding: 0; list-style: none; } #indented ul li { border-top: 1px solid #333; border-bottom: 1px solid #111; } #indented ul li:first-child {border-top: none;} #indented ul li:last-child {border-bottom: none;} #indented ul li a { padding: 10px; display: block; color: #fff; text-decoration: none; } #indented ul li a:hover {background: #111;}

#indented ul{ margin: 20px 0; padding: 0; list-style: none; } #indented ul li { border-top: 1px solid #333; border-bottom: 1px solid #111; } #indented ul li:first-child {border-top: none;} #indented ul li:last-child {border-bottom: none;} #indented ul li a { padding: 10px; display: block; color: #fff; text-decoration: none; } #indented ul li a:hover {background: #111;}

 

 

Скошенные Границы

CSS Скошенные Границы изображений
 
Техника оформления границ изображений, то есть создание рамки для картинки, отлично подойдет и для стилизации любого блока с контентом. Метод очень похож на способ создания двойных границ, который обычно и применяют для оформления изображений. Немного поколдовав со стилем, мы получим замечательный эффект тонких скошенных границ, используя универсальное свойство outline, одновременно устанавливающее цвет, стиль и толщину внешней границы.

CSS #beveled img {margin: 20px 20px 20px 0;} img.light { outline: 1px solid #ddd; border-top: 1px solid #fff; padding: 10px; background: #f0f0f0; } img.dark { outline: 1px solid #111; border-top: 1px solid #555; padding: 10px; background: #333; }

#beveled img {margin: 20px 20px 20px 0;} img.light { outline: 1px solid #ddd; border-top: 1px solid #fff; padding: 10px; background: #f0f0f0; } img.dark { outline: 1px solid #111; border-top: 1px solid #555; padding: 10px; background: #333; }

 

 

Смотреть Все Демо

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

Иногда мне кажется
Что жизнь на земле
Это просто первый круг ада...

7 Paca

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

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

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

Как сделать дизайн блока белым цветом Как сделать дизайн блока белым цветом Как сделать дизайн блока белым цветом Как сделать дизайн блока белым цветом Как сделать дизайн блока белым цветом Как сделать дизайн блока белым цветом Как сделать дизайн блока белым цветом Как сделать дизайн блока белым цветом Как сделать дизайн блока белым цветом

Изучаем далее:



Ананасовый топ крючком схема

Расширить колесные диски своими руками

Как сделать так чтобы бывшая подруга тебе завидовала

Молодежные шапки спицами фото и схемы

Каркас для полков в баню своими руками