How To Create CSS Gradient Border Colours

This article is part of our “HTML5/CSS3 Tutorials series” – dedicated to help make you a better designer and/or developer. Click here to see more articles from the same series.

With all the brand new options in CSS3, we at the moment are capable of construct picture-much less web sites. Up to now, using picture was inevitable in relation to displaying gradient colours. At this time, it turns into a lot leaner with using CSS3 Gradient Background. In earlier posts, we’ve proven you easy methods to deliver CSS3 Gradient into play as a background colour in numerous varieties and instructions; Linear, Elliptical, and Repeating gradients.

However CSS3 Gradient doesn’t cease just for background use. Do you know that you may also put it to use inside borders? Learn on to discover ways to do that.

First Technique

The primary technique is by making use of CSS3 Gradient inside pseudo-parts. Nicely, let’s examine how the trick works.

Prime to Backside gradient border

We’ll begin off with a easy gradient that spreads from prime to backside. To get began, create a field with a div, as follows.

HTML

 <div class="field"></div> 

CSS

 .field  width: 400px; peak: 400px; background: #eee; 

To type the gradient within the field borders, set a strong border on the highest and backside aspect of the field first. We additionally create 2 rectangles with 2 pseudo-aspects — :earlier than and :after — and specify the width in the identical measurement because the field border width. Place the rectangles on the left and proper aspect of the field and make use of linear-gradient by way of background-picture. You’ll be able to see how this trick seems under:

Left to Proper Border Gradient

Now let’s create a gradient that spans to the left and proper in …read more

The post How To Create CSS Gradient Border Colours appeared first on DICKLEUNG DESIGN 2014.