Уголок css – Срезанные/скошенные углы у DIV-слоя с произвольным фоном внутри него и под ним на чистом CSS. Реально ли?

уголки | htmlbook.ru

Влад Мержевич

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius. Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

Сделайте кнопку как на рисунке, используя только CSS.

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

Для создания рамки вокруг блока используется стилевое свойство border, в качестве значения которого задается толщина, стиль и цвет линии. Если поверх такой линии наложить графические уголки, то мы убьем двух зайцев — получим нужные закругления и сохраним границу, которую можно увидеть даже при отключении картинок.

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

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

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

23.09.2010

Влад Мержевич

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

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

Влад Мержевич

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

Влад Мержевич

Стандартные кнопки, созданные через тег <button> или <input type="button">, выглядят, конечно, хорошо, но попытка изменить их вид через стили приводит к ужасному результату. Кнопки становятся приветом интерфейсам десятилетней давности с их угловатостью (рис. 1). Разумеется, такая метаморфоза возникает только при использовании свойств background и border, иными словами, нельзя изменить цвет фона кнопки и рамку вокруг нее.

Рис. 1. Исходная и измененная кнопка

Чтобы кардинально поменять вид кнопки можно воспользоваться изображениями, но по сравнению с возможностями CSS 3 этот вариант теперь кажется доморощенным.

Блоки из фигур на CSS

.block-figure-3 * {

    box-sizing: border-box;

}    

.block-figure-3 {

    margin: 20px auto;

    padding: 0;

    position: relative;

    max-width: 600px;

    width: 100%;

    overflow: hidden;

}

.block-figure-3 .figure-txt {

    border: 6px solid #BFE2FF;

}

.block-figure-3 .image-wrap {

    border: 6px solid #BFE2FF;

    border-radius: 100%;

    width: 200px;

    height: 200px;

    position: absolute;

    top: 30px;

    background: #FFF;

    z-index: 1;

    right: 0;

}

.block-figure-3 .image-lay {

    width: 100px;

    height: 200px;

    position: absolute;

    top: -6px;

    background: #FFF;

    z-index: 2;

    right: -6px;

}

.block-figure-3 .image {

    transform-style: preserve-3d;

    perspective: 1000px;

    border-radius: 50%;

    position: absolute;

    z-index: 3;

    height: 176px;

    width: 176px;

    top: 6px;

    right: 6px;

}

.block-figure-3 .front,

.block-figure-3 .back {

    background-size: cover;

    background-position: center;

    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);

    backface-visibility: hidden;

    text-align: center;

    border-radius: 50%;

    color: #fff;

    height: 176px;

    width: 176px;    

    border: 6px solid #BFE2FF;    

    position: absolute;

}

.block-figure-3 .inner {

    transform: translateY(-50%) translateZ(60px);

    top: 50%;

    position: absolute;

    margin: auto;

    z-index: 4;

    width: 100%;

}

.block-figure-3 .image .back{

    transform: rotateY(180deg);

    transform-style: preserve-3d;

}

.block-figure-3:hover .back{

    transform: rotateY(0deg);

    transform-style: preserve-3d;

}

.block-figure-3:hover .front{

    transform: rotateY(-180deg);

    transform-style: preserve-3d;

}

.block-figure-3 .inner a {

    font-weight: bold;

    font-family: Verdana, sans-serif;

    text-transform: uppercase;

    text-decoration: none;

    color: #337AB7;

    text-align: center;

    margin: auto;

    display:block;

    font-size: 14px;

    line-height: 130px;

    height: 142px;

    width: 142px;

    border:6px solid #BFE2FF;

    border-radius: 50%;

    transition:all .6s ease-in-out;

    overflow:hidden;    

}

.block-figure-3 .inner a::before{

    content:'';

    position:absolute;

    top:-12px;

    margin:auto;

    display:block;

    border-radius:50%;

    width:166px;

    height:166px;

    left:-1px;

    transition:box-shadow .6s ease-in-out;

    z-index:-1;

}

.block-figure-3 .inner a:hover{

    color:#fff;

}

.block-figure-3 .inner a:hover::before{

    box-shadow: inset 0 0 0 166px #337AB7;

}

 

.block-figure-3 .figure-txt {

    position: relative;

    z-index: 1;

    padding: 10px 20px;

    margin-right: 100px;

    min-height: 260px;

}

.block-figure-3 .figure-txt h4 {  

    text-transform: uppercase;

    color: #337AB7;

    font-weight: bold;

    font-family: Verdana, sans-serif;

    font-size: 20px;

    margin: 6px 100px 12px 0;    

}

.block-figure-3 .figure-txt p {

    font-family: Verdana, sans-serif;

    font-size: 16px;

    margin: 10px 100px 10px 0;

}

@media (max-width: 560px) {

    .block-figure-3 .figure-txt,

    .block-figure-3 .figure-txt h4,

    .block-figure-3 .figure-txt p {

        margin-right: 0;

    }

    .block-figure-3 .figure-txt {

        min-height: auto;

        border-bottom: none;

    }

    .block-figure-3 .image-lay {

        display: none;

    }

    .block-figure-3 .image-wrap {

        border: 6px solid #BFE2FF;

        border-top: none;

        border-radius: 0;

        width: 100%;

        height: 160px;

        position: static;

    }  

    .block-figure-3 .image {

        border-radius: 0;

        position: static;

        height: 160px;

        width: 100%;

    }

    .block-figure-3 .front,

    .block-figure-3 .back {

        height: 154px;

        width: 100%;

        position: static;

        border-radius: 0;

        border: none;

    }

    .block-figure-3 .inner {

        transform: translateY(-100%) translateZ(60px);

        top: -6px;

    }

    .block-figure-3 .inner a::before{

        display: none;

    }

    .block-figure-3 .inner a:hover{

        color:#000;

    }

}

Как сделать блок со скруглёнными уголками через CSS3?

Internet Explorer Chrome Opera Safari Firefox Android
iOS
9.0+ 1.0+ 10.5+ 3.0+ 1.0+ 2.1+ 1.0+

Задача

Сделать блок со скруглёнными уголками с помощью CSS3.

Решение

Традиционные прямоугольные уголки в дизайне сайтов давно уже всем надоели. В моде скруглённые уголки, которые делаются не с помощью изображений, а через стили, для чего используется свойство border-radius. Это свойство может иметь одно, два, три или четыре значения разделённых пробелом, которые и определяют радиус всех уголков или каждого по отдельности.

В табл. 1 приведёно разное количество значений и вид блока, который получается в этом случае.

Код Описание Вид
div { border-radius: 10px; } Радиус скругления для всех уголков сразу.
div { border-radius: 0 10px; } Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div { border-radius: 20px 10px 0; }
Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div { border-radius: 20px 10px 5px 0; } Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

Чтобы учесть старые браузеры наряду с border-radius добавляют свойства с префиксами, как показано в примере 1. Из-за наличия этих свойств код CSS становится невалидным.

Пример 1. Уголки у блока

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Радиус</title>
  <style>
   div {
    background: #007E3E; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 10px; /* Поля вокруг текста */
    -moz-border-radius: 5px; /* Для Firefox 3 */
    -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    border-radius: 5px; /* Для современных браузеров */
   }
  </style>
 </head>
 <body>
   <div>Меня — супплетивная форма винительного падежа от я.</div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Блок со скруглёнными уголками

Совет CSS: лучшее скругление углов

Совет CSS: лучшее скругление углов

От автора: все мы применяли в своем дизайне border-radius для скругления углов изображений, div’ов, nav’ов и т.д… Но замечали ли вы, что происходит, когда к элементу с радиусом добавляется толстая рамка?

Как известно из моей статьи Углубляемся в CSS, закругленные углы в border-radius формируются из радиуса четверти окружности.

Совет CSS: лучшее скругление углов

Четвертые части каждой окружности формируют закругленные углы элемента.

Когда объединяются толстые рамки

При объединении border-radius с широким border-width возникает небольшая проблемка. У следующего изображения, например, значение радиуса равно двум значениям толщины рамки.

Совет CSS: лучшее скругление углов

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.mike { border-radius: 12px; border: 6px solid crimson; }

.mike {

  border-radius: 12px;

  border: 6px solid crimson;

}

Совет CSS: лучшее скругление углов

Пока нет проблем.

Но если установить значение border-width больше border-radius, мы потеряем скругленные углы – края нашего изображения станут квадратными.

.mike { border-radius: 12px; border: 14px solid crimson; }

.mike {

  border-radius: 12px;

  border: 14px solid crimson;

}

Совет CSS: лучшее скругление углов

Рамка становится шире, а углы изображения – квадратными.

Почему так происходит?

Это из-за того, что на самом деле border-radius придает форму внешней части рамки –– не внутренней. Очертание внутреннего радиуса определяется значением border-radius минус толщина рамки. Это отражается на внутреннем радиусе, который обычно меньше внешнего.

Так что, если значение ширины рамки border-width больше border-radius, мы видим эффект четверти радиуса, соединяющего две рамки, которые толще самого радиуса. Обратите внимание на квадратный внутренний радиус:

Совет CSS: лучшее скругление углов

Совет CSS: лучшее скругление углов

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чтобы оба радиуса были пропорциональными, нам понадобится подогнать значение радиуса примерно к двойной ширине рамки, или сумме ширины border-width и радиуса рамки border-radius.

.mike { border-radius: 26px; border: 14px solid crimson; }

.mike {

  border-radius: 26px;

  border: 14px solid crimson;

}

Совет CSS: лучшее скругление углов

При изменении значения border-radius до 26px мы получаем обратно свои закругленные углы изображения.

Метод Box-shadow

При образовании тени блока тень следует за радиусом рамки элемента. Помня об этом, можно использовать значение дополнительного расширения box-shadow для создания того, что смотрится в точности как рамка.

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

.mike { border-radius: 12px; box-shadow: 0 0 0 14px crimson; }

.mike {

  border-radius: 12px;

  box-shadow: 0 0 0 14px crimson;

}

Результат смотрится в точности как пример со стилем рамки. Но теперь нам не нужно беспокоиться о возрастании border-radius каждый раз при увеличении ширины рамки, потому что расширенное значение последует за радиусом.

Совет CSS: лучшее скругление углов

Применение переменных Sass

Если мы используем препроцессор типа Sass, то для ширины и радиуса рамки можно создать переменные, затем применить простую математическую операцию, которая пропорционально сформирует радиус.

$border-width: 14px; $radius: $border-width*1.9; .mike { border: $border-width solid crimson; border-radius: $radius; }

$border-width: 14px;

$radius: $border-width*1.9;  

 

.mike {

  border: $border-width solid crimson;

  border-radius: $radius;

}

Заключение

Должен предупредить вас насчет указанного здесь метода box-shadow. Так как тени блока не являются частью блочной модели элемента, фальшивые рамки перекрывают части других встраиваемых или «плавающих» элементов, поэтому понадобится компенсировать их с помощью дополнительных полей. Тени блока CSS поддерживаются во всех последних браузерах, включая IE9+.

Автор: Guil Hernandez

Источник: http://blog.teamtreehouse.com/

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

Совет CSS: лучшее скругление углов

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Совет CSS: лучшее скругление углов

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *