Компания
149,42
рейтинг
14 ноября 2014 в 12:25

Разработка → Подборка интересных CSS рецептов «Голые пятницы #3» tutorial

голые пятницы

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о градиентных границах, режимах наложения, о том, как рациональнее сверстать стандартную иконку меню. А так же откроем для себя заново старое css-свойство visibility и рассмотрим новое медиа-выражение @Supports.

Градиентные границы на чистом CSS


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

градиентные границы

Делается это относительно просто:

.gradient-block-vertical {
    border-top: 20px solid orange; /*задаем верхнюю и нижнюю границы*/
    border-bottom: 20px solid red;
    background-image: linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%),
                                    linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%); /*задаем 2 линейных градиента*/
    background-position: 0 0, 100% 0; /*задаем этим градиентам размеры*/
    background-size: 20px 100%; /*помещаем их по краям блока*/
    background-repeat: no-repeat; /*забываем отменить повторение фотнового изображения*/
}

С горизонтальным градиентом поступаем аналогично:

.gradient-block-horizontal {
    border-left: 20px solid #5c5fa5;
    border-right: 20px solid #893f60;
    background-image: linear-gradient(to right, #5c5fa5 0%, #893f60 100%),
                                    linear-gradient(to right, #5c5fa5 0%, #893f60 100%);
    background-position: 0 0, 0 100%;
    background-size: 100% 20px;
    background-repeat: no-repeat;

}

А вот для создания диагонального градиента придется немного повозиться и ввести псевдоэлементы:

.gradient-block-diagonal:before,
.gradient-block-diagonal:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}
.gradient-block-diagonal:before {
    background-position: 0 0, 0 100% ;
    background-repeat: no-repeat;
    background-size: 100% 20px;
    background-image: linear-gradient(to right, #5c5fa5 0%, #893f60 100%),
                                    linear-gradient(to left, #5c5fa5 0%, #893f60 100%);
}
.gradient-block-diagonal:after {
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 20px 100%;
    background-image: linear-gradient(to bottom, #5c5fa5 0%, #893f60 100%),
                                    linear-gradient(to top, #5c5fa5 0%, #893f60 100%);
}

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

UPD. Пользователь Aingis предложил более оптимизированный вариант со свойствами background-clip и background-origin. Пример

Когда-нибудь, в светлом будущем (когда весь мир откажется от IE10 и ниже) мы сможем использовать предназначенное для этого свойство border-image. Примерно вот так:

.gradient-block {
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%); /*указываем фоновое изображение/градиент*/
    border-image-slice: 1; /*задаем для него внутреннее смещение*/
}


Иконка меню без фоновых изображений


Вспомните, как часто вам приходилось добавлять на страницу стандартную иконку меню, в простонародье называемую «гамбургером»?

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

1. Тень.

.shadow-icon {
  position: relative;
}
.shadow-icon:after {
  content: "";
  position: absolute;
  left: 0;
  top: -50px;
  height: 100%;
  width: 100%;
  box-shadow: 0 5px 0 #000, 0 15px 0 #fff, 0 25px 0 #000, 0 35px 0 #fff, 0 45px 0 #000;
}

Решение простое, хотя и не слишком очевидное. Просто задаем 3 прямоугольные тени, каждую с разным смещением.

2. Градиент.

.gradient-icon {
    background: linear-gradient(to bottom, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%, #000 100%);
}

Здесь все еще проще: рисуем 3 полоски градиентом.

3. Символ UTF-8.
Просто копируем и вставляем символ ☰ (номер в Юникоде: U+2630, HTML-код: ☰). Очевидно, это самый простой и лаконичный метод. Однако, гибко настроить его не получится. Фактически, можно настроить только цвет, а также указать шрифт и изменить его размер.

Пример использования всех трех способов.

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

Режимы наложения слоев в CSS


Еще одна хорошая новость: с недавнего времени Firefox и Safari поддерживают режимы наложения элементов, аналогичные режимам наложения слоев в фотошопе
Также они, под флагами, но уже работают в Chrome и Opera. Это значит, что уже скоро будет включена полная поддержка и в этих браузерах. Поэтому можно начинать их использовать для некритичного функционала. Например, для стилизации ховер эффектов. У вас есть уникальная возможность сделать это одними из первых, придав лоск вашему сайту.

Например, так:
mix-blend-mode

или так:
mix-blend-mode

Вариантов использования и стилизации масса. Человек с хорошим вкусом (в отличие от автора) может создать действительно шикарные эффекты.

Код всей этой красоты достаточно прост:

/*Стили для фонового блока, в котором лежит изображение*/
.blend {
    background: #fff; /*цвет для фонового элемента*/
}
.blend:hover {
    background: #000;
}
/*Непосредственно */
.blend img {
    mix-blend-mode: darken; /*режим наложения*/
}



Включить отображение mix-blend-mode в Chrome и Opera можно использовав флаги:
chrome://flags/#enable-experimental-web-platform-features
opera://flags/#enable-experimental-web-platform-features

Пример.
Более подробно почитать о режимах наложения рекомендую здесь.

А о том, как узнать, поддерживает ли браузер mix-blending-mode, и что это за странное медиа-выражение в примере, читайте ниже.

@Supports


В CSS наконец появилось новое медиа-выражение @supports, которого очень не хватало. Как можно догадаться из названия, оно
служит для определения поддерживаемых браузером свойств. Пока что его поддерживают не все браузеры, но для проверки некритичного функционала оно уже вполне годится.

@supports (display: flex) {
	div { display: flex; }
}

/*Можно проверять и префиксы*/
@supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) {
    section {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
    	float: none;
    }
}


Visibility: visible


Как вы думаете, что призойдет, если блок со свойством visibility: visible поместить в блок visibility: hidden?

.hidden {
  visibility: hidden;
}
.hidden .visible {
  visibility: visible;
}

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

visibility

Можете попробовать сами.

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

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

Проголосовало 1230 человек. Воздержался 161 человек.

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

Автор: @Paul_King

Комментарии (14)

  • +2
    Обожаю ваши «Голые пятницы». Одно плохо — выходят не часто :(
    Автору спасибо!
    • +2
      Вам спасибо) постараемся выходить чаще)
  • 0
    По опыту: минимизировав количество псевдо-элеметнов, удалось добиться ощутимой прибавки в отрисовке страницы. Ну, т.е. вот этот гамбургер на практике лучше дивами, получится на 2 элемента больше, всего-то.
    • 0
      а у вас есть пример такой страницы? без псевдоэлементов и с ними. Особенно было бы актуальным это проверить на мобилках
      • +1
        Вот прям чтобы так — нет. Я просто сверстал «большую» адаптивную страницу и открыл ее на слабом смарте. Скажем так, оно думало.
        С псевдо-элементами особых тестов не нужно, их зачастую видно невооруженным глазом. Т.к. их нет в доме, браузер об их существовании узнает поздно и они прямо отрисовываются на глазах.
        Еще (если интересно) тормозит конструкция font-size:0 (родителю) > font-size: X (детям). Часто используется для верстки инлайн объектов без «зазоров» между ними.
        Также очень спасает абсолютная адресация к блокам.
        О, вспомнил! У гугла есть тест скорости страницы. В ней удалось увеличить количество попугаев с 80 до 91 вышеперечисленными методами.
        • 0
          Еще (если интересно) тормозит конструкция font-size:0 (родителю) > font-size: X (детям).

          Очень интересно) Часто так делал, так как довольно простой способ. Теперь, видимо, не буду.
          Может статью напишите, чего можно, чего нельзя? Что дает тормоза, а что нет? Было бы интересно!
  • +11
    Оно служит для определения поддерживаемых браузером свойств. Пока что его поддерживают не все браузеры.
    На этом моменте внезапно рассмеялся.
    • +17
      :)

      @supports (@supports)
      {
      
      }
      
  • +2
    По поводу юникод-гамбургера: есть прекрасный сайт unicode.johnholtripley.co.uk/ с подробной информацией о поддержке юникода в разных браузерах.

    И там советуют:
    Using the 3 horizontal line 'burger' icon for your navigation? Use 2261 (≡) (96%) instead of 2630 (☰) (58%)
  • +1
    Спасибо! Еще бы версии браузеров указали где это работает — цены бы вам не было )
  • 0
    С градиентами криво контент отображается см пример codepen.io/golumenov/pen/yyLzRG
    Уж лучше тогда блок контента обернуть блоком обверткой. блоку обвертке выставить какой нам нужно градиент и задать толщину границ паддингами. У блока контента задаем другой бекграунд #fff для примера и получаем то-же самое что и в примерах, только гораздо более стабильно работающее
  • +6
    Не понял, зачем так сложно с градиентом?

    border: 20px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(#fff, #fff), linear-gradient(#5c5fa5, #893f60);

    Аналогично с горизонтальным и диагональным. codepen.io/anon/pen/jEOGJe

    К изучению: www.w3.org/TR/css3-background/
    • 0
      Спасибо, добавил в статью.
  • 0
    Просто оставлю это здесь: joren.co/sass-burger/

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

Самое читаемое Разработка