Эффект загнутых уголков с использованием только CSS

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

Загнутые уголки

Данный эффект использовался в демонстрации к уроку "Множественные фоны и обводка с использованием CSS2" . Кроме того, применение загнутых уголков в дизайне реального сайта можно посмотреть на примере Yiibu . Но сайт Yiibu использует изображения, а мы задействуем псевдо-элементы и CSS.

demosourse

 

Начало

Ничего сложного. Подойдет любой элемент и не потребуется никакой дополнительной разметки. Все начинается с простого окрашенного прямоугольника. Браузеры, которые не поддерживают псевдо-элементы (IE6 и IE7), тоже будут выводить его.

Добавление свойства position:relative делает возможным абсолютное позиционирование псевдо-элементов.

.note {
   position:relative;
   width:30%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
}

 

Загнутые уголки

Загнутый уголок создается с помощью псевдо-элемента, который позиционируется в верхнем углу прямоугольника. Псевдо-элемент не имеет ширины и высоты, но у него задана толстая обводка. Изменяя толщину обводки, мы будем изменять размер загнутого уголка.

В данном примере верхняя и правая части обводки имеют цвета, которые соответствуют цвету фона родительского прямоугольника. Левая и нижняя части обводки имеют более темный цвет или более светлый по сравнению с цветом фона прямоугольника.

.note:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 16px 16px 0;
   border-style:solid;
   border-color:#658E15 #fff;
}

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

Firefox 3.0 не позволяет позиционировать псевдо-элементы. Вы можете использовать пару свойств для исправления положения в данном браузере.

.note:before {
   ...
   display:block;
   width:0;
}

Добавляем легкую тень

Вид уголка может быть немного улучшен с помощью добавления свойства box-shadow (для тех браузеров, которые его поддерживают) к псевдо-элементу. Установка свойства overflow:hidden для класса элемента скрывает часть тени, которая нарушает эффект загнутого уголка.

.note:before {
   ...
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
}

Скругленные углы

Также относительно просто использовать данную технику вместе со скругленными углами. К сожалению, каждый современный браузер имеет какую-нибудь ошибку, связанную со свойством border-radius (включая те, кто использует свойство без префикса). Такое положение означает необходимость в проведении дополнительных работ.

Только браузеры Webkit могут делать скругленные углы для псевдо-элементов, если те имеют только 2 части обводки. Opera 11 и Firefox 3.6 создают неприятную для глаз кучу. Причем Opera 11 имеет максимальную ошибку в данном процессе.

Использование всех четырех сторон исключает проблемы в Opera 11 и Firefox 3.6. Но данный метод решения приводит к ошибке в Safari 5, что выражается в выводе диагональной линии с зубцами. Обойти данную проблему можно установив цвет для хотя бы одной части обводки как  transparent.

Цвет фона будет виден сквозь прозрачную обводку.  В идеальном случае такой подход будет формировать эффект и содержит минимум кода. Но Opera 11 показывает фоновый цвет сквозь прозрачную обводку только при условии, что установлено свойство border-radius.

.note-rounded:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:8px;
   border-color:#fff #fff transparent transparent;
   background:#658E15;
   -webkit-border-bottom-left-radius:5px;
   -moz-border-radius:0 0 0 5px;
   border-radius:0 0 0 5px;
   display:block; width:0;
}

CSS файл для демонстрационной страницы содержит комментарии, полезные для работы. Каждый браузер имеет свои особенности при использовании свойства border-radius или обводки элементов без ширины и высоты. 

 

Окончательный вид кода

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

position:relative;
   width:30%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
   overflow:hidden;
}

.note:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 16px 16px 0;
   border-style:solid;
   border-color:#fff #fff #658E15 #658E15;
   background:#658E15;
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   display:block; width:0; /* Преодоление ограничений Firefox 3.0 */
}

.note.rounded {
   -webkit-border-radius:5px;
   -moz-border-radius:5px;
   border-radius:5px;
}

.note.rounded:before {
   border-width:8px;
   border-color:#fff #fff transparent transparent;
   -webkit-border-bottom-left-radius:5px;
   -moz-border-radius:0 0 0 5px;
   border-radius:0 0 0 5px;
}

 

Заключение

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: nicolasgallagher.com/pure-css-folded-corner-effect/
Перевел: Сергей Фастунов
Урок создан: 2 Февраля 2011
Просмотров: 42059
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 2 Февраля 2011 18:03
    artmart
    Интересно, будем использовать... в будущем :)
  • 2 Февраля 2011 18:52
    da_lamber
    Классно. Отличный, нужный и интересный урок.
  • 2 Февраля 2011 19:23
    notbot
    Круто! :)
  • 2 Февраля 2011 19:45
    wakosto
    Такая штука прекрасно пойдет, вроде: "Интерестно знать!"
  • 2 Февраля 2011 22:53
    idsids
    Супер
  • 2 Февраля 2011 23:07
    idsids
    чё?dfghj
  • 3 Февраля 2011 06:53
    OdinecDenis
    спасибо пригодится.
  • 3 Февраля 2011 10:06
    lutij
    "Все начинается с простого окрашенного прямоугольника. Браузеры, которые не поддерживают псевдо-элементы (IE6 и IE7), тоже будут выводить его."-ИЕ6 точно не выводит(
  • 3 Февраля 2011 10:25
    Bandyy
    с миру по нитки
  • 3 Февраля 2011 18:16
    yatskanich
    хорошый урок
  • 4 Февраля 2011 00:57
    valenok83
    из всех выше написанных кодов работает только один который загибает уголки у блоков , в IE8 не работает. Остальное тоже не работает нигде. Я не могу понять , автор статьи вообще проверяет сам то что пишет?
    • 17 Мая 2011 17:13
      grafidc3
      Большое спасибо умным ребяткам с этого сайта! Отдельное спасибо Попову Е. С вами жить интереснее. У меня всё работает http://vkusnyashechka.com/ Правда в ие проблемы, но я его не люблю.
  • 4 Февраля 2011 02:21
    art_reklama_com
    6 и 7 осел вообще не выводит. 8 выводит уголки без тени. селяви=)
^ Наверх ^