Зубчики на CSS
31 Jul, 2013Внезапно пост! Небольшой странный чисто webkit трюк который вам пригодится разве что чтобы удивить свою девушку верстальщицу.
Что будет
Зззубчики:Как это сделать
Будем считать что у нас такой вот HTML:- <div class="pic">
- <img src="pic.jpg">
- </div>
Первое и самое простое, как это можно сделать, вырезать непрозрачную картинку с фоном и зубчиками, и накладывать поверх нашей.
Но тогда станет невозможным такой вариант
CSS Маски
Да, это существует, хотя и работает пока далеко не везде и не полностью. Но к счастью мой проект только для webkit. Да, да, в этом месте можно завидовать.Как это работает: мы рисуем картинку (gif, png, svg), важно только что у нее есть прозрачные и не очень пиксели-области.
Потом «накладываем» на блок и получается:
Делается в CSS это как-то так:
- mask-image: url(mask.png); // можно и svg
- // или так:
- mask-image: url(mask.svg) top left / cover; // можно и svg
-webkit-mask-box-image
Эта штука называется страшно и непонятно, но суть ее такая же как у border-image. Она условно делит картинку на 9 областей, и растягивает их или повторяет, чтобы создать рамку и уголки вокруг блока. Только нашем случае это не рамка, а маска, вот и вся разница. Вдаваться в теорию не буду, она по ссылке.А вот такой код сотворит магию:
- -webkit-mask-box-image: url(mask.png) 0 3 0 3 repeat;
Числа 0 означают что ширина бордера-маски сверху и снизу равна 0, там у нас гладкая картинка. Два других числа это ширины двух зубчиков, по 3 пикселя.
Но и этого оказалось мне мало, ведь теперь уголки у блоков не стыковались, зубчики соседних элементов не могли войти друг в друга и образовать цельный блок.
Обводка
Тут все скучно, несмотря на то как красиво выглядят зубчики, ниborder
ни outline
ни box-shadow
не обходят всю границу, выглядит это примерно так:
Потому пришлось идти дедовским способом известным со времен не работающего в браузерах text-shadow:
- .pic:before{
- -webkit-mask-box-image: url(mask.png) 0 3 0 3 repeat; такая же маска
- position: absolute;
- top: -1px;
- right: -1px;
- left: -1px;
- display: block;
- height: 100%;
- width: 100%;
- padding: 1px; // Это важно, делает высоту блока ровно 100% + 2px
- background: yellow;
- z-index: 2;
Такая вот маленькая приятная штука получилась, надеюсь кому-то пригодится =) А вот codepen, поиграться с ней.
Я до сих пор не могу удивиться больше, понадобилась всего одна миниатюрная картинка для реализации того что, еще несколько лет назад казалось невозможным.
35 комментариев к “Зубчики на CSS”