Как сделать загнутые уголки на CSS3 без картинок

OConner — Mon, 03 Dec 2012 15:24:38 GMT

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

Для начала давайте создадим наш единственный HTML-элемент:

Code

My box

В CSS-стили

Code

.box {
  position: relative;
  width: 500px;
  padding: 50px;
  margin: 0 auto;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

Теперь нам нужен эффект загнутости на нижнем левом и правом краях. Это достигается путем создания двух псевдоэлементов :before и :after, которые:

поворачиваются и наклоняются с помощью трансформации CSS3 (все последние версии браузеров поддерживают трансформацию с вендорными префиксами);
позиционируются по нижнему краю;
отбрасывают тень.

Теперь мы можем переместить элементы за основной блок с помощью z-index: -1. Получается, что становятся видны только края тени.

CSS-код для псевдоэлементов.

Code

.box:before, .box:after {
  position: absolute;
  width: 40%;
  height: 10px;
  content: ' ';
  left: 12px;
  bottom: 12px;
  background: transparent;
  -webkit-transform: skew(-5deg) rotate(-5deg);
  -moz-transform: skew(-5deg) rotate(-5deg);
  -ms-transform: skew(-5deg) rotate(-5deg);
  -o-transform: skew(-5deg) rotate(-5deg);
  transform: skew(-5deg) rotate(-5deg);
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: -1;
}
.box:after {
  left: auto;
  right: 12px;
  -webkit-transform: skew(5deg) rotate(5deg);
  -moz-transform: skew(5deg) rotate(5deg);
  -ms-transform: skew(5deg) rotate(5deg);
  -o-transform: skew(5deg) rotate(5deg);
  transform: skew(5deg) rotate(5deg);
}

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

Источник: htmlbook.ru

Свечение картинок - обводка

OConner — Mon, 03 Dec 2012 15:12:42 GMT

[greentable]Вариант #1[/greentable]
в CSS-стили

Code

.nameone img {margin:10px; -moz-box-shadow:0 0px 15px #1e90ff; box-shadow:0 0px 15px #1e90ff;-webkit-box-shadow:0 0px 15px #1e90ff;}

Применение:

[greentable]Вариант #2[/greentable]
в CSS-стили

Code

.nametwo img {margin:6px; padding:5px; -moz-border-radius:6px;-webkit-border-radius:6px; border-radius:6px; -moz-box-shadow:0 0px 5px #1e90ff; box-shadow:0 0px 5px #1e90ff;-webkit-box-shadow:0 0px 5px #1e90ff;}

Применение:

Закругляем края картинок

OConner — Sun, 02 Dec 2012 18:21:10 GMT

в css-стили вставляем код:

Code

img {border-radius: 5px;}

p.s. чем больше px, тем картинка становится больше круглая.

Вопросы/Ответы

OConner — Sun, 02 Dec 2012 16:20:44 GMT

Форум: HTML-коды
Описание темы: Для тех, кто не любит гуглить
Автор темы: OConner
Автор последнего сообщения: OLL
Количество ответов: 0

Вопросы/Ответы

OConner — Sun, 02 Dec 2012 16:19:44 GMT

Форум: CSS-стили
Описание темы: Для тех, кто не любит гуглить
Автор темы: OConner
Автор последнего сообщения: OLL
Количество ответов: 0

CSSPRO | ANOMAL RAY

Как сделать загнутые уголки на CSS3 без картинок

Свечение картинок - обводка

Закругляем края картинок

Вопросы/Ответы

Вопросы/Ответы