Gradient borders with CSS
 |
The graphic designer came up with a design that includes boxes like this. At first sight it seems to be difficult to create these with HTML and CSS. It has three problems:
| ||
Let's start with the round corners. I used the jQuery javascript library with the corner plugin.
It's a bit bloated for this particulair task, but I'm also using some of its other great features for my site.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<style type="text/css">
body {
background-color: #ededed;
}
div.outer {
background: #dddddd;
width: 220px;
height: 135px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.outer').corner("round 10px");
});
</script>
</head>
<body>
<div class="outer">
<br>This box has round borders
</div>
</body>
<html>
| |||
| It generates something like this: |  |
||
Now add the gradient to it. I'm only showing the CSS-part for our box:
div.outer {
background: #dddddd;
background: -moz-linear-gradient(100% 100% 115deg, #dddddd, #ffffff); /* mozilla, firefox */
background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#dddddd)); /* Safari, chrome */
width: 220px;
height: 135px;
}
Internet explorer does support gradients. But these have some limitations and these cause weird behavior. For now, we leave this users with a more simple layout. Background images is a method to support this browser. So, the results will look like this: | |||
Firefox: |
Chrome: |
Internet Exporer: |
|
The boxes we created now, will act as our border. We'll place a white box inside for the actual content. This box has a gradient also. The complete code looks like this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://github.com/malsup/corner/raw/master/jquery.corner.js"></script>
<style type="text/css">
body {
background-color: #ededed;
}
div.inner {
background: white;
background-image: -moz-linear-gradient(100% 100% 115deg, #f4f4f4, #fffffe 15%, #ffffff);
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0.85, rgb(255,255,255)), color-stop(1, rgb(244,244,244)));
height: 115px;
}
div.outer {
background-color: #dddddd;
background-image: -moz-linear-gradient(100% 100% 115deg, #dddddd, #ffffff);
background-image: -webkit-gradient(linear, left top, right bottom, from(#ffffff), to(#dddddd));
padding: 2px;
width: 220px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('.inner').corner("round 8px");
$('.outer').corner("round 10px");
});
</script>
</head>
<body>
<div class="outer">
<div class="inner">
<br>This box has round borders
<br>and two gradients
</div>
</div>
</body>
<html>
However our final result is not perfect like the original design, we're coming pretty close. It will do for now!
| |||
Firefox: |
Chrome: |
Internet Exporer: |
|
