В этой статье я покажу один из вариантов создания градиента для границ у любого блока с помощью CSS3.
В конечном варианте у нас получится кнопка, которая на скриншоте выше.
Работать мы будем с такой вёрсткой:
<html>
<body>
<a href="http://google.com" class="magicButton">I am a button!</a>
</body>
</html>
Сначала зададим простую стилизацию для кнопки
.magicButton
{
color: #444;
font: bold 16px arial;
background: #e4e4e4;
border: 1px solid transparent; /* граница будущего градента */
border-radius: 3px;
padding: 8px 12px;
text-decoration: none;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 3px 6px -3px rgba(0,0,0,0.25);
}
Затем приступаем, собственно, к хаку.
Для того чтобы создать градиент на месте нашей границы нам понадобится в первую очередь его расположить там (background-origin: border-box;), а затем обрезать чтобы он находился точно в этом месте (background-clip: border-box;).
Основная часть готова, теперь осталось лишь прописать наш градиент. В данном примере я использую градиент в светло-серых тонах, если вы используете кнопку не на светлом фоне, то цвета градиента надо будет соответственно изменить.
linear-gradient(#e4e4e4, #ccc);Но после установки градиента появляется проблема в том что залито так же и весь фон кнопки. Для этого мы наложим ещё один градиент, только на этот раз расположим и обрежем его в пределах padding-box.
И в тоге получим вот такую кнопку: jsfiddle.net/CyberAP/DzHUj/
Минусы данного приёма:
- Нельзя использовать полупрозрачный градиент для основного фона, произойдёт наложение. Зато прозрачную обводку делать вполне возможно.
- Есть проблема с border-radius, при значении более 3px по краям градиент начинает заметно обрезаться. Пока что не нашёл решения.
Но есть и плюсы:
- Никаких изображений и лишнего трафика.
- Можно ставить какой угодно градиент для обводки, даже радиальный, их комбиниорвать.
- Работает с любой шириной границы.
Автор: CyberAP
