Zee Agency ZeeAgency
ZeeAgency
/ dabblet.css
Created
February 12, 2012 20:41
— forked from LeaVerou/dabblet.css
TV screen
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
| /** | |
| * TV screen | |
| */ | |
| html { background: white; } | |
| .tv { | |
| position: relative; | |
| width: 200px; | |
| height: 150px; |
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
| <!doctype html> | |
| <style type="text/css"> | |
| .outer { | |
| width: 200px; | |
| height: 200px; /* 200px = list's height, outer will end to 300px */ | |
| padding: 50px 0; /* Here's the Hack */ | |
| border: 1px dotted red; /* to aid debugging */ | |
| } | |
| .header, .footer { |
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
| @media only screen and (max-width: 960px) { | |
| div#header { | |
| background-position: center -20px; | |
| } | |
| h1#logo { | |
| height: 99px; | |
| } | |
| div#page { | |
| width: auto; | |
| } |
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
| div { | |
| position: absolute; | |
| padding: 3px; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(0, 0, 0, 0.5); | |
| border-radius: 50%; | |
| text-align: center; | |
| color: #FFF; |
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
| section { | |
| margin: 20px; | |
| width: 400px; | |
| padding: 60px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) inset; | |
| border-radius: 6px; | |
| } | |
| .red { | |
| background-color: #d70f00; |
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
| body { | |
| font-family: Trebuchet MS, Helvetica, Arial, sans; | |
| } | |
| style { | |
| display: block; | |
| margin: 10px; | |
| padding: 10px; | |
| white-space: pre; | |
| font-family: Monaco, monospace; | |
| line-height: 3em; |
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
| div { | |
| margin: 20px; | |
| border: 1px solid #CCC; | |
| padding: 10px; | |
| width: 200px; | |
| height: 200px; | |
| background: #FFF; | |
| overflow: scroll; | |
| } |
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
| body { | |
| font-family: Trebuchet MS, Helvetica, Arial, sans; | |
| } | |
| div { | |
| margin: 20px; | |
| border: 1px solid black; | |
| padding: 10px; | |
| width: 400px; |
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
| body { | |
| font-family: Trebuchet MS, Helvetica, Arial, sans; | |
| } | |
| div { | |
| margin: 20px; | |
| border: 1px solid black; | |
| padding: 10px; | |
| width: 400px; |
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
| /** | |
| * The -Webkit-scrollbar challenge | |
| * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
| * Make the first div’s scrollbar like the second’s | |
| * without changing the styling of the div (i.e. you | |
| * can only change the ::-webkit-scrollbar-* rules | |
| * * * * * * * * * * * * * * * * * * * * * * * * * * * * | |
| * It doesn't matter if the second div doesn't look the same | |
| * after your changes, it's only there to show you how the |