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


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

6272
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 6
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: