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


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

6277
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 2104
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • 1488 написал:
  • Отлично сделано!
  • Winston888 написал:
  • Я и раньше видел Flash шаблоны но как то просто увидел и всё, а щас меня он заинтересовал ) Шаблон всё норм вот только он не особо красивый но в целом норм, скачаю покопаюсь в нём может что придумаю )
  • lionegine написал:
  • Нор скрипт)))
    Что то смотрел, смотрел а так и не нашел
    Не много 90% Материала
    Последние темы
    Опрос
    213
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    Топ пользователей: