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

6340
7.2 из 10
Проголосовало: 8






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

Установка:

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 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
  • waak написал:
  • Почему у меня он перелистывает в верх а не вниз и если это первая песня на стр то он её по кругу гоняет а не переходит к последней
    и как сделать стоп по клику на трек который играет?
  • Acht написал:
  • Тест
    Последние темы
    Опрос
    255
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: