Незамысловатые и простые команды в CSS упрощают жизнь веб-дизайнерам. Меньше картинок — больше кода — легче сайт.
Под катом представлен один из вариантов изящного скругления углов. Примерно вот таким образом:
.block{ height: 400px; width: 100%; position: relative; background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); } .block::after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY(3deg); } На мой взгляд, закругленные углы смотрятся более симпатично, чем острые. Они смягчают дизайн и делают его более динамичным, современным. Но конечно, все зависит от концепции сайта и вкуса разработчика.
С помощью псевдо-элементов ::before и ::after, поворачиваем края элемента. В этом примере показано, как регулировать базовый край:
.block{ height: 400px; width: 100%; position: relative; background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); } .block::after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY(3deg); } Преобразователь определяет координаты элемента, который нужно преобразовать. В примере выше определено основание, которое помещает стартовые координаты на нижнюю левую сторону блока.
А с помощью Sass Mixin скругление можно сделать еще проще. Sass Mixin упрощает процесс, избавляет от лишних сложностей правил стиля. Такое смешивание быстро определяет сторону для уклонения: top-left, top-right, bottom-left или bottom-right.
@mixin angle-edge($pos-top:null, $angle-top:null, $pos-btm:null, $angle-btm:null){ width: 100%; position: relative; background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); &::before, &::after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; transition: ease all .5s; } @if $pos-top{ &::before{ @if $pos-top == 'topleft'{ top: 0; transform-origin: right top; transform: skewY($angle-top); } @if $pos-top == 'topright' { top: 0; transform-origin: left top; transform: skewY(-$angle-top); } } } @if $pos-btm{ &::after{ @if $pos-btm == 'bottomleft' { bottom: 0; transform-origin: right bottom; transform: skewY(-$angle-btm); } @if $pos-btm == 'bottomright' { bottom: 0; transform-origin: left bottom; transform: skewY($angle-btm); } } } } В смешивании есть четыре переменные. Первые две $pos-top и $angle-top, определяют главную стартовую координату и градус закругления. Остальные переменные определяют координату и градус для нижней стороны.
Если заполнены все четыре переменные, можно повернуть обе стороны – вершину и основание элемента.
Можно использовать Sass
.block{ @include angle-edge(topleft, 3deg); } Добавить искаженный край на нижней правой стороне:
.block{ @include angle-edge(bottomright, 3deg); } Добавить искаженный край на верхней левой и нижней правой стороне:
.block{ @include angle-edge(topleft, 3deg, bottomright, 3deg); } Существует множество различных способов для скругления углов. Тут все зависит от фантазии и технических навыков веб-разработчика. Вариант, описанный выше показался мне довольно простым.
А каким способами пользуетесь вы?
ссылка на оригинал статьи http://habrahabr.ru/post/272097/
Добавить комментарий