Создайте простой эффект загнутого уголка на CSS

От автора: На этой неделе у нас еще один занимательный и несложный проект, который вы можете сделать для практики. В этот раз мы создадим иллюзию страницы с загнутым уголком.

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

Концепт

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

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

Метод, который я выработал, естественно не новый, но я подумал, что он достаточно интересен для того, чтобы им поделиться. В общем, все, что нам нужно вдобавок к прямоугольному блоку – это два треугольника. Мы разместим эти треугольники согласно рисунку ниже.

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

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

HTML

Для начала, создайте div такой как тот, что показан ниже. Я добавил заголовок с параграфом, один класс для общей стилизации страницы, который мы возможно захотим использовать где-то еще (tl – означает «top left» – верхний левый, мы создадим еще один класс для верхнего правового уголка позднее).

Это все, что нам нужно сейчас. Давайте перейдем к CSS и применим стили!

CSS страницы

Что касается CSS, то мы начнем с того, что напишем код для общего вида нашей маленькой страницы без загнутого уголка. Я начал с того, что задал симпатичный темный цвет фону, а затем продолжил написание стилей для самого класса страницы. Зададим ширину, высоту и внешний отступ, а затем сделаем фон белым.

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

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

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

Проверка прогресса

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

Треугольники на CSS

Прежде чем, мы двинемся дальше, нам нужно научиться создавать треугольники на CSS. Для начала, создайте пустой div и задайте ему класс “triangle”. Теперь зададим нулевые ширину и высоту, но при этом верхняя и левая границы будут очень широкими (используйте два разных цвета). Вот что у вас должно получиться:

Как видите, мы создали квадрат, разделенный по диагонали на 2 части от нижнего левого угла до верхнего правого. Каждая граница соответствует одному треугольнику. Теперь смотрите, что произойдет, если одну из границ мы сделаем прозрачной:

Вот так, получился треугольник на чистом CSS. МЫ даже можем изменить направление треугольника, применив границы к другим сторонам:

Убедитесь, что вы делаете прозрачной границу той стороны, где должна проходить гипотенуза треугольника. Если вы хотите, чтобы треугольник смотрел вправо, сделайте прозрачной правую границу. И наоборот. Если хотите, чтобы гипотенуза была сверху – сделайте прозрачной нижнюю границу.

Посмотрите на этот пример, чтобы увидеть все четыре варианта в действии.

Сгиб страницы

Теперь пришло время использовать наши знания для создания сгиба страницы. Чтобы достичь этого, нам нужно произвести три шага. Первый, мы применим стили к классу “foldlt”, который мы создали ранее. Затем, мы добавим один треугольник, используя псевдо элемент :before. Наконец, мы добавим второй треугольник, используя псевдо элемент :after.

Как вы можете увидеть, все, что мы применили к основному классу – это относительное позиционирование (для того, чтобы смочь задать абсолютное позиционирование треугольникам) и задали тень. Заметка на полях: это эффект гораздо проще без теней, но я хотел убедиться, что вы знаете о том, что он все же работает. Вам только нужно убедиться, что тень отбрасывается правильно и не выступает слишком далеко за края сгиба.

Теперь время создать наш первый треугольник. Вызовите псевдо элемент :before, с пустым значением свойства content, задайте абсолютное позиционирование, а затем примените код для треугольника, который мы выучили ранее.

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

Отрезаем уголок

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

Оказывается, что этот шаг на самом деле не нужен, смотрите секцию Обновление ниже.

Теперь наш эффект загнутого уголка закончен! Вот как он выглядит:

Переворачиваем

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

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

Посмотрите на этот эффект в действии

Теперь, когда мы закончили, время протестировать наш код. Помните, что псевдо элементы :before и :after не будут работать должным образом в IE7 и более ранних версиях. Есть возможности исправить это, используя JavaScript, если вас это беспокоит.

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

Обновление

Вот в чем дело, когда вы работаете над проектом как этот, вам кажется, что все правильно, но когда вы возвращаетесь к нему позже, вы осознаете, что вы все сделали не так! И это то, что произошло здесь. После данной публикации я заметил, что раз треугольник разделяет квадрат на 2 части, то мне может совсем не понадобиться псевдо элемент :after. Информация выше весьма полезна для изучения, поэтому я оставлю ее без изменений, но ниже я приведу пример того, о чем говорю.

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

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

Автор: Joshua Johnson

Источник: //designshack.net/

Редакция: Команда webformyself.

Комментарии Вконтакте: