Главная > CSS/Style Sheets > Создание эффекта подогнутых уголков на CSS3
Создание эффекта подогнутых уголков на CSS328 ноября 2012, 13:40. Разместил: Design FactoRy |
Недавно мы наткнулись на интересный эффект подогнутых уголков от Joshua Hibbert. Это было круто! Размышляя над его реализацией, первое, что пришло нам в голову, было найти альтернативное решение, которое позволило бы нам использовать текстуру в качестве фона для блока. Для этого альтернативного эффекта подогнутых уголков на CSS3 мы использовали технику скошенных углов от Lea Verou. HTML Следующая разметка довольно сильно сходится с решением от Joshua Hibbert. Здесь не нужно ничего менять или улучшать. На первый взгляд вы, возможно, подумаете, что мы сюда что-то добавили, но на самом деле нам понадобится лишь то, что представлено ниже, для создания четырех уголков при помощи псевдо-элементов в CSS.
CSS-код Расширенный селектор [class*='tucked-corners-'] будет выбирать только те элементы, которые где-либо в качестве значения атрибута класса будут иметь строку tucked-corners-.
В случае с IE9 Как вам уже известно, IE9 не поддерживает градиенты на CSS3, но он поддерживает параметр box-shadow. Это вызывает ситуацию, которую вы можете видеть ниже: Мы решили воспользоваться следующим CSS-хаком для того, чтобы скрыть тень псевдо-элементов. К сожалению, в IE9 мы никак не можем реализовать этот эффект.
Посмотреть демо На этом всё Несмотря на преимущества и недостатки, этот альтернативный вариант точно следует иметь в виду, если вы хотите использовать подобный эффект в ваших дизайнах. Решение, которое мы представили в данной статье, позволит вам использовать эффект даже тогда, когда вы используете текстуру в качестве фона блока. Также для себя мы выяснили, что в жизни встречаются такие моменты, когда в голове лучше бы иметь запасные планы и варианты. Всегда будет полезно покопаться в памяти в поисках подходящего варианта! Дополнительная информация Точки остановки градации в данном эффекте: 45deg, 135deg, 255deg и 315deg, так как значениями параметра background-position являются bottom left, bottom right, top right, top left. С версии 16.0 Firefox поддерживает множество CSS3-параметров без префиксов, включая даже градиенты. Здесь отличная новость в том, что их алгоритм градиентов изменился, так как объявления с приставкой -moz- и без нее дают разные результаты. Вернуться назад |