—»     —»   Создание эффекта подогнутых уголков на CSS3
  Раздел: CSS/Style Sheets   Нет комментариев  

Создание эффекта подогнутых уголков на CSS3



Недавно мы наткнулись на интересный эффект подогнутых уголков от Joshua Hibbert. Это было круто! Размышляя над его реализацией, первое, что пришло нам в голову, было найти альтернативное решение, которое позволило бы нам использовать текстуру в качестве фона для блока.

Для этого альтернативного эффекта подогнутых уголков на CSS3 мы использовали технику скошенных углов от Lea Verou.

Создание эффекта подогнутых уголков на CSS3

HTML

Следующая разметка довольно сильно сходится с решением от Joshua Hibbert. Здесь не нужно ничего менять или улучшать. На первый взгляд вы, возможно, подумаете, что мы сюда что-то добавили, но на самом деле нам понадобится лишь то, что представлено ниже, для создания четырех уголков при помощи псевдо-элементов в CSS.

<div class="tucked-corners-top">
<div class="tucked-corners-bottom">
<!-- content here -->
</div>
</div>

CSS-код

Расширенный селектор [class*='tucked-corners-'] будет выбирать только те элементы, которые где-либо в качестве значения атрибута класса будут иметь строку tucked-corners-.

.tucked-corners-top {
position: relative;
width: 500px; min-height: 200px;
margin: 100px auto; padding: 20px;
background-color: #fff; /* Fallback */
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, /* All the four corners */
[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; /* Do not show on IE9 #needed */
}

.tucked-corners-top::before, /* Top left & top right */
.tucked-corners-top::after {
top: -10px;
}

.tucked-corners-bottom::before, /* Bottom left & bottom right */
.tucked-corners-bottom::after {
bottom: -10px;
}

.tucked-corners-top::before, /* Top left & bottom left */
.tucked-corners-bottom::before {
left: -42px;
}

.tucked-corners-top::after, /* Top right & bottom right */
.tucked-corners-bottom::after {
right: -42px;
}

.tucked-corners-top::before { /* Top left */
transform: rotate(-45deg);
}

.tucked-corners-top::after { /* Top right */
transform: rotate(45deg);
}

.tucked-corners-bottom::before { /* Bottom left */
transform: rotate(-135deg);
}

.tucked-corners-bottom::after { /* Bottom right */
transform: rotate(135deg);
}

В случае с IE9

Как вам уже известно, IE9 не поддерживает градиенты на CSS3, но он поддерживает параметр box-shadow. Это вызывает ситуацию, которую вы можете видеть ниже:

Создание эффекта подогнутых уголков на CSS3

Мы решили воспользоваться следующим CSS-хаком для того, чтобы скрыть тень псевдо-элементов. К сожалению, в IE9 мы никак не можем реализовать этот эффект.

[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
box-shadow: none\9; /* Do not show on IE9 #needed */
}

Посмотреть демо

На этом всё

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

Также для себя мы выяснили, что в жизни встречаются такие моменты, когда в голове лучше бы иметь запасные планы и варианты. Всегда будет полезно покопаться в памяти в поисках подходящего варианта!

Дополнительная информация

Точки остановки градации в данном эффекте: 45deg, 135deg, 255deg и 315deg, так как значениями параметра background-position являются bottom left, bottom right, top right, top left.

С версии 16.0 Firefox поддерживает множество CSS3-параметров без префиксов, включая даже градиенты. Здесь отличная новость в том, что их алгоритм градиентов изменился, так как объявления с приставкой -moz- и без нее дают разные результаты.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 7637   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Строительство каминов
Печник-профессионал построит Вам камин. Красиво, и с гарантией. Выбирайте
строипрогресс.рф
Независимая оценка квартиры
Оценка имущества! для нотариуса, суда, развода, наследства, ипотеки, банка
expert-ocenchik.ru
Медиаселлер
медиаселлер
kubantv.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930