Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Faded/Gradient Borders in Pure CSS
@import "compass/css3";
@mixin gradient-border($width: 28%, $float: right) {
width: $width;
float: $float;
overflow: hidden;
border-width: 0 0 0 1px;
@include box-shadow(inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF);
@include border-image(linear-gradient(top, rgba(0,0,0,.09), rgba(0,0,0,0)) 1 100%)
}
.border-container {
width: 28%; /* border will be on the left on this container */
float: right;
overflow: hidden; /* only needed if floating container */
min-height: 600px; /* static height if you want your container to be taller than its content */
-moz-box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
-webkit-box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
box-shadow: inset 15px 0 5px -16px rgba(0,0,0,.1), -1px 0 0 #FFF;
border-width: 0 0 0 1px;
-webkit-border-image:
-webkit-gradient(linear, 0 100%, 0 0, from(rgba(0,0,0,.09)), to(rgba(0,0,0,0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(top, rgba(0,0,0,.09), rgba(0,0,0,0)) 1 100%;
-moz-border-image:
-moz-linear-gradient(top, rgba(0,0,0,.09), rgba(0,0,0,0)) 1 100%;
}
<html>
<head>
<title>Gradient borders</title>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" />
</head>
<body>
<div class="border-container">
<div class="content">
Ohai!
</div>
</div>
</body>
</html>
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
@import "gradient-border";
.border-container {
min-height: 600px;
@include gradient-border;
}
.content {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
font-size: 150%;
font-weight: bold;
}
@stevenh512

This comment has been minimized.

Copy link
Owner Author

@stevenh512 stevenh512 commented May 19, 2012

Yeah, I totally stole this one too.. preliminary SCSS/Compass conversion of another awesome gist by @nrrrdcore (this one needs a little more work). No screenshot this time because apparently my browser (FF7) is too old. 😁

@flipactual

This comment has been minimized.

Copy link

@flipactual flipactual commented May 21, 2012

http://css-tricks.com/examples/GradientBorder/

Chris Coyier is a mad css scientist.

I take the strange route of accomplishing the same effect by putting a div inside a div and... I don't know!

@stevenh512

This comment has been minimized.

Copy link
Owner Author

@stevenh512 stevenh512 commented May 21, 2012

I ended up making another mixin that uses the "div inside a div", too, see this gist. It's mostly based on this one and something I saw on StackOverflow.

Thanks for the link, playing with Compass again for these gists (and seeing some of the cool things that are possible with CSS in a modern browser) has sparked my interest in design.. so I'll probably be referring to that site quite a bit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.