Create Gradiant Border using CSS3

To make border of the main container border gradiant :

The HTML :
</pre>
<pre id="line1"><!DOCTYPE >
<html>
<head>
<title>Border Fade Demo</title>
<link rel="stylesheet" href="<a>borderfade.css</a>" media="all"/>
</head>

<body>

<div id="wrap">
<div class="borderfade">
<div class="content">

<p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit,
a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc.
Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna.
Aliquam erat
volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam
vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non, auctor dapibus, pede.
</p></pre>
<pre id="line16">
<p>Nulla dui purus, eleifend vel, consequat non, dictum porta, nulla. Duis ante mi,
laoreet ut, commodo eleifend, cursus nec, lorem. Aenean eu est. Etiam imperdiet turpis.
Praesent
nec augue. Curabitur ligula quam, rutrum id, tempor sed, consequat ac, dui. Vestibulum accumsan
erosnec magna. Vestibulum vitae dui. Vestibulum nec ligula et lorem consequat ullamcorper. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus
eget nisl ut elit porta ullamcorper. Maecenas tincidunt velit quis orci. Sed in dui. Nullam ut
mauris eu mi mollis luctus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Sed cursus cursus velit. Sed a massa. Duis dignissim
euismod quam. Nullam euismod metus ut orci. Vestibulum erat libero, scelerisque et,
porttitor et, varius a, leo.</p>

</div>

</div>

</div>
</body>
</html>

The css :

body {
margin: 0;
padding: 0;
}

#wrap {
margin: 20px auto;
width: 960px;
}

.content {
width:680px;
margin: 0 auto;
padding: 20px;
}

/*Border fadeOut */
.content {
border: 1px solid #cfcfcf;
border-bottom: 0 none;
position: relative;
background:-moz-linear-gradient(center top , #F9F9FA 33%, #FFFFFF) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9F9FA), to(white));
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.content:before,
.content:after {
content: '';
display: block;
position: absolute;
top:0;
width: 10px;/*this value should match the rounded corner radius, otherwise use 1px*/
height: 100%;
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.00, rgba(255,255,255,0)),
color-stop(0.75, rgba(255,255,255,.75)),
color-stop(0.50, rgba(255,255,255,0.5)),
color-stop(1.00, rgba(255,255,255,1))
);
background:-moz-linear-gradient(
left top,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.75) 50%,
rgba(255,255,255,0.5) 75%,
rgba(255,255,255,1) 100%
);
}

.content:before {
left:-1px;
}

.content:after {
right:-1px;
}

for more information you can check nettuts video:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-multiple-borders-with-simple-css/

Also check this :
http://mhuntdesign.com/blog/css/how-to-create-a-css3-border-fadeout/

Advertisements
Leave a comment

1 Comment

  1. comment test

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: