Joel D. Rodrigues jdrsunshine
jdrsunshine
/ border.css
Last active
August 29, 2015 14:25
— forked from nrrrdcore/border.css
Faded/Gradient Borders in Pure CSS
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
| .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: |
jdrsunshine
/ index.html
Last active
August 29, 2015 14:25
— forked from nrrrdcore/index.html
Text-Align: Justify; Hack
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
| <p class="month"><span class="name">July</span> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31<span class="break">hi</span></p> |
jdrsunshine
/ bending-shadow.css
Last active
August 29, 2015 14:25
— forked from nrrrdcore/bending-shadow.css
Simple Bended-Shadow CSS: Create the Bended Photo Effect without writing a million divs.
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
| .bended-shadow { | |
| position: relative; | |
| width: 500px; | |
| margin: 200px auto; | |
| } | |
| .bended-shadow::before, .bended-shadow::after { | |
| content: ''; | |
| position: absolute; | |
| width: 60%; |
jdrsunshine
/ apple-shadow.css
Last active
August 29, 2015 14:25
— forked from nrrrdcore/apple-shadow.css
Bending Shadows Backwards: Apple.com's Container CSS Sorcery
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
| .shadow-stuff { | |
| -moz-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px; | |
| -webkit-border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px; | |
| border-radius: 0% 0% 100% 100% / 0% 0% 8px 8px; | |
| -moz-box-shadow: rgba(0,0,0,.30) 0 2px 3px; | |
| -webkit-box-shadow: rgba(0,0,0,.30) 0 2px 3px; | |
| box-shadow: rgba(0,0,0,.30) 0 2px 3px; | |
| } | |
| .container { |
jdrsunshine
/ inset_input.css
Last active
August 29, 2015 14:25
— forked from nrrrdcore/inset_input.css
The Perfect Inset Input CSS
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
| input { | |
| height: 34px; | |
| width: 100%; | |
| border-radius: 3px; | |
| border: 1px solid transparent; | |
| border-top: none; | |
| border-bottom: 1px solid #DDD; | |
| box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF; | |
| } |
jdrsunshine
/ divider.css
Last active
August 29, 2015 14:25
— forked from nrrrdcore/divider.css
FireFox Friendly Faded Gradient Border CSS
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
| .divider { | |
| float: right; /* float this next to ur linkz */ | |
| display: block; | |
| height: 47px; /* this */ | |
| width: 1px; /* where the magic happens */ | |
| margin: -7px 6px 0 10px; /* pulls the border to the top of the header */ | |
| background-image: -webkit-linear-gradient(top, rgba(0,93,131,.5) 50%, rgba(0,93,131,.22) 100%); /* good in safari & chrome */ | |
| background-image: -moz-linear-gradient(top, rgba(0,93,131,.5) 50%, rgba(0,93,131,.22) 100%); /* firefox friendly shit */ | |
| box-shadow: 1px 0 0 0 rgba(255,255,255,.1); /* white highlight on the inside of the border, ff now accepts this w/o a prefix */ |