Красивый эффект подвернутых углов на css3


Красивый эффект подвернутых углов на css3

6300
6.8 из 10
Проголосовало: 7






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

Установка:

HTML код

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

Code
<div class="tucked-corners-top">
  <div class="tucked-corners-bottom">
  <!-- Содержание располагается здесь -->
  </div>
</div>


CSS код

Селектор [class*='tucked-corners-'] предназначен для выбора элементов, которые имеют строку tucked-corners- в имени класса.

Code
.tucked-corners-top {
  position: relative;
  width: 500px; min-height: 200px;
  margin: 100px auto; padding: 20px;
  background-color: #fff; /* Обратная совместимость */
  background: linear-gradient(45deg, transparent 10px, #fff 10px),
  linear-gradient(135deg, transparent 10px, #fff 10px),
  linear-gradient(225deg, transparent 10px, #fff 10px),
  linear-gradient(315deg, transparent 10px, #fff 10px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);  
}

[class*='tucked-corners-']::before, /* Все четыре угла */
[class*='tucked-corners-']::after {
  content: '';
  position: absolute;
  height: 20px; width: 80px;
  box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
  box-shadow: none\9; /* Не выводить в IE9 */
}

.tucked-corners-top::before, /* Верхний левый и верхний правый */
.tucked-corners-top::after {
  top: -10px;
}

.tucked-corners-bottom::before, /* Нижний левый и нижний правый */
.tucked-corners-bottom::after {
  bottom: -10px;
}  

.tucked-corners-top::before, /* Верхний левый и нижний левый */
.tucked-corners-bottom::before {
  left: -42px;
}

.tucked-corners-top::after, /* Верхний правый и нижний правый */
.tucked-corners-bottom::after {
  right: -42px;
}

.tucked-corners-top::before { /* Верхний левый */
  transform: rotate(-45deg);
}

.tucked-corners-top::after { /* Верхний правый */
  transform: rotate(45deg);  
}

.tucked-corners-bottom::before { /* Нижний левый */
  transform: rotate(-135deg);
}

.tucked-corners-bottom::after { /* Нижний правый */
  transform: rotate(135deg);
}

[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
  box-shadow: none\9; /* Не выводить в IE9 */
}


всё!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://www.red-team-design.com/
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
  • MeVeR написал:
  • Вовка, привет. А вот такой интереснейший вопрос, возможно ли изменить количество посетителей онлайн на форуме?
    Моё авторство:)
    Последние темы
    Опрос
    431
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: