Julie Ann Horvath nrrrdcore
This file contains 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: |
nrrrdcore
/ bending-shadow.css
Last active
April 22, 2024 20:54
Simple Bended-Shadow CSS: Create the Bended Photo Effect without writing a million divs.
This file contains 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%; |
nrrrdcore
/ apple-shadow.css
Created
May 17, 2012 17:19
Bending Shadows Backwards: Apple.com's Container CSS Sorcery
This file contains 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 { |
This file contains 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
| body { | |
| background-color: #FFF; | |
| } | |
| #wrapper { | |
| width: 90%; | |
| margin: 200px auto; | |
| } | |
| h1 { |
This file contains 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
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09); |
This file contains 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
| font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; |
This file contains 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; | |
| } |
This file contains 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
| /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator |
This file contains 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
| .list-container { | |
| border-radius: 5px; | |
| border: 1px solid #C5C5C5; | |
| box-shadow: inset 0 1px 0 #FFF; | |
| } | |
| ol { | |
| border: 1px solid transparent; | |
| } |
This file contains 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 */ |
OlderNewer