Geekly Articles each Day
📜 ⬆️ ⬇️

CSS3 gradient for block borders



In this article I will show one of the options for creating a gradient for the borders of any block using CSS3.

In the final version, we have a button, which is in the screenshot above.

We will work with this layout:
') 
<html> <body> <a href="http://google.com" class="magicButton">I am a button!</a> </body> </html> ​


First, let's set a simple styling for the button.

 .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); }

Then proceed, in fact, to the hack.

In order to create a gradient in place of our border, we will first need to place it there ( background-origin: border-box; ), and then cut it so that it is located exactly in this place ( background-clip: border-box; ).
The main part is ready, now it remains only to register our gradient. In this example, I use a gradient in light gray tones, if you use the button not on a light background, then the colors of the gradient will have to be changed accordingly.

 linear-gradient(#e4e4e4, #ccc);


But after installing the gradient, a problem appears in that the entire background of the button is also filled. To do this, we will apply another gradient, only this time we will locate and cut it within the padding-box.

And in a toga we will get this button: jsfiddle.net/CyberAP/DzHUj

The disadvantages of this technique:

But there are pluses:

Source: https://habr.com/ru/post/140760/

More articles:


All Articles