Created
May 20, 2012 00:08
-
-
Save stevenh512/2732912 to your computer and use it in GitHub Desktop.
Another take on faded/gradient borders
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } |
Refactored this a bit to make it simpler and more configurable.. it's still a hack but it works lol
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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).