Lecaw

Учимся создавать Web-сайты

Эффект согнутого угла на CSS3

June 2, 2012
CSS
449hits

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

ДЕМО

 

 

 

Концепция

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

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

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

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

HTML

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

    
<div class="page foldtl"> 
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</div>

CSS страницы

Сейчас мы создадим небольшую страницу без сгиба. Для начала задал темный цвет фону, затем моделировал фактический класс страницы. Установим ширину, высоту, границы, и добавим фон белого цвета для нашей странички.

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

body {
  background: #272822;
}
 
.page {
  background: #fff;
  width: 250px;
  height: 330px;
  margin: 50px;
 
 /* Optional Gradient */
  background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
  background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

Теперь, когда у нас есть основная страница, пора настроить стиль текста. Для h2 я установил размер текста, шрифт и добавил отступы. Я использовал веб-Шрифт Google Web Font Lilita One. Добавить его так же просто как и скопировать этот код:

.page h2 {
  padding: 85px 0 0 20px;
  font: 400 35px/1.5 'Lilita One', Helvetica, sans-serif;
}
 
.page p {
  padding: 10px 20px;
  font: 12px/1.5 Helvetica, sans-serif;
  color: #4b4b4b;
}

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

Прежде, чем мы продолжим, мы должны научиться создавать треугольники на CSS, для этого создайте пустой div и дайте ему класс "triangle". Теперь установите both,  height и width на ноль, и примените толстую границу к нижней и левой стороне (используя два различных цвета). Вот результат, который вы получите:

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

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

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

Сложенные углы на странице

Теперь используем наши знания на странице. Для этого мы должны выполнить три шага. Во-первых, мы разработаем класс "foldtl", который мы установим вначале. Затем, мы добавим один треугольник, используя псевдо-элемент :before. Наконец, мы добавим второй треугольник, используя псевдо-элемент :after.

.foldtl {
  position: relative;
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
  box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}

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

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

.foldtl:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-left: 70px solid transparent;
  -webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}

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

Очертание угла

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

.foldtl:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-right: 69px solid transparent;
}

Вот мы и закончили с этим эффектом! Вот что у нас получилось:

Зеркальное отражение

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

.foldtr {
  position: relative;
  -webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
}
 
.foldtr:before {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #eee;
  border-right: 70px solid transparent;
  -webkit-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: -7px 7px 7px rgba(0,0,0,0.3);
}
 
.foldtr:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #272822; 
  border-left: 69px solid transparent;
}

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

ДЕМО

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

RATTING:
(3 голосов)

Медиа