Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Another take on faded/gradient borders
@import "compass/css3";
@mixin gradient-border($border: 0 0 0 2px,
$background: #fff,
$gradient-orientation: top left,
$gradient-start-color: rgba(0, 0, 0, .09),
$gradient-stop-color: rgba(0, 0, 0, 0)) {
@include inline-block;
@include background-image(linear-gradient($gradient-orientation,
$gradient-start-color,
$gradient-stop-color));
> div {
background: $background;
margin: $border;
}
}
<html>
<head>
<title>Gradient borders</title>
<link rel="stylesheet" href="stylesheets/screen.css" type="text/css" />
</head>
<body>
<div class="border-container">
<div>
<h1>Ohai!</h1>
</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 {
margin-left: 50px;
margin-top: 50px;
@include gradient-border(2px, #fff, top right);
> div {
padding: 50px;
text-align: center;
}
}
h1 {
text-align: center;
}
@stevenh512

This comment has been minimized.

Copy link
Owner Author

@stevenh512 stevenh512 commented May 20, 2012

This is inspired by what @nrrrdcore did here, I liked it but it wasn't compatible with my browser.. so I hacked together something similar 😁

This needs a little work to make it more configurable, right now it looks best if it's centered or floated to the right (the border appears on the left edge).

@stevenh512

This comment has been minimized.

Copy link
Owner Author

@stevenh512 stevenh512 commented May 20, 2012

Refactored this a bit to make it simpler and more configurable.. it's still a hack but it works lol

Screenshot

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.