Created
December 21, 2011 19:37
-
-
Save jennschiffer/1507357 to your computer and use it in GitHub Desktop.
Jenn Makes Signs
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
| /** | |
| * Jenn Makes Signs | |
| * Various road signage made with CSS and the RoadGeek font family | |
| * Last Updated: December 21, 2011 | |
| * Dabblet: http://dabblet.com/gist/1507357 | |
| * Gist: https://gist.github.com/1507357 | |
| */ | |
| @font-face { font-family: "RoadGeek"; src: url("http://pancaketheorem.com/css/signs/roadgeek2w.otf");} | |
| @font-face {font-family: "RoadGeek Hospital"; src: url("http://pancaketheorem.com/css/signs/roadgeekf6b.otf")} | |
| body { background: rgb(0,155,103); font-family: "RoadGeek", Arial, sans-serif; text-align: center;} | |
| h1 { color: #ffffff; font-size: 80px; text-shadow: 1px 1px 3px #000; margin: 50px auto 0 auto; } | |
| #bucket-o-signs { width: 850px; margin: 0 auto; height: 600px;} | |
| .description { font-size: 15px; color: #fff; width: 850px; margin: 10px auto; text-align: center; line-height: 1.2em;} | |
| .description a { color: rgb(255,242,0); text-decoration: none; font-weight: bold;} | |
| /* DO NOT ENTER */ | |
| #donotenter { position: relative; top: 20px; left: 20px; width: 250px; } | |
| #donotenter .square { border-radius: 10px; display: block; position: absolute; top: 0px; left: 0px; width: 244px; height: 244px; background: #ffffff; border: 1px solid #ffffff; box-shadow: 1px 1px 5px #000;} | |
| #donotenter .circle { border-radius: 5000px; display: block; position: absolute; top: 3px; left: 3px; width: 240px; height: 240px; background: rgb(181,39,60);} | |
| #donotenter .text { color: #ffffff; text-transform: uppercase; text-align: center; font-size: 54px; position: absolute; top: 20px; left: 36px; line-height: 110px;} | |
| #donotenter .bar { border-radius: 5000px; display: block; position: absolute; top: 20px; left: 20px; width: 206px; height: 206px; background: #ffffff;} | |
| #donotenter .bar-block-bottom { border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 5000px; border-bottom-left-radius: 5000px; display: block; position: absolute; top: 145px; left: 20px; width: 206px; height: 85px; background: rgb(181,39,60);} | |
| #donotenter .bar-block-top { border-top-left-radius: 5000px; border-top-right-radius: 5000px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; display: block; position: absolute; top: 18px; left: 20px; width: 206px; height: 85px; background: rgb(181,39,60); } | |
| /* hospital */ | |
| #hospital { position: relative; top: 20px; left: 290px; width: 250px; } | |
| #hospital .square { border-radius: 10px; display: block; position: absolute; top: 0px; left: 0px; width: 236px; height: 236px; background: rgb(0,107,177); border: 5px solid #ffffff; box-shadow: 1px 1px 5px #000;} | |
| #hospital .text { color: #ffffff; text-transform: uppercase; text-align: center; font-size: 296px; position: absolute; top: -6px; left: 26px; font-family: "RoadGeek Hospital", "Roadgeek", Arial, sans-serif;} | |
| /* dead end */ | |
| #deadend { position: relative; top: 40px; left: 590px; width: 250px;} | |
| #deadend .frame { border-radius: 10px; display: block; position: absolute; top: 0px; left: 0px; width: 204px; height: 204px; background: rgb(255,242,0); border: 2px solid #000000; box-shadow: 1px 1px 5px #000; transform: rotate(-45deg);} | |
| #deadend .diamond { border-radius: 10px; display: block; position: absolute; top: 7px; left: 7px; width: 182px; height: 182px; background: rgb(255,242,0); border: 6px solid #000000; transform: rotate(-45deg);} | |
| #deadend .text { color: #000; text-transform: uppercase; font-weight: bold; text-align: center; font-size: 64px; position: absolute; top: 52px; left: 32px;} | |
| /* r/r */ | |
| #rr { position: relative; top: 310px; left: 20px; width: 250px;} | |
| #rr .frame { border-radius: 5000px; border: 3px solid #000; display: block; position: absolute; top: 0px; left: 0px; width: 240px; height: 240px; background: rgb(255,242,0); box-shadow: 1px 1px 5px #000;} | |
| #rr .circle { border-radius: 5000px; border: 5px solid #000; display: block; position: absolute; top: 6px; left: 6px; width: 224px; height: 224px;} | |
| #rr .cross-a { display: block; position: absolute; background: #000; height: 25px; width: 228px; top: 111px; left: 8px; transform: rotate(-45deg);} | |
| #rr .cross-b { display: block; position: absolute; background: #000; height: 25px; width: 228px; top: 110px; left: 11px; transform: rotate(45deg);} | |
| #rr .text { color: #000; text-transform: uppercase; text-align: center; font-size: 78px; font-family: "RoadGeek Hospital", "RoadGeek", Arial, sans-serif; position: absolute; top: 87px; left: 21px; letter-spacing: 107px;} | |
| /* railroad crossing */ | |
| #railroad { position: relative; top: 310px; left: 570px; width: 250px; } | |
| #railroad .black-a { display: block; position: absolute; background: #000; height: 50px; width: 244px; top: 100px; left: 0px; transform: rotate(-45deg);} | |
| #railroad .black-b { display: block; position: absolute; background: #000; height: 50px; width: 244px; top: 100px; left: 0px; transform: rotate(45deg);} | |
| #railroad .white-a { display: block; position: absolute; background: #fff; height: 46px; width: 240px; top: 102px; left: 2px; transform: rotate(-45deg);} | |
| #railroad .white-b { display: block; position: absolute; background: #fff; height: 46px; width: 240px; top: 102px; left: 2px; transform: rotate(45deg);} | |
| #railroad .text-railroad {color: #000; text-transform: uppercase; text-align: center; font-size: 43px; font-weight: bold; letter-spacing: 1px; word-spacing: 28px; position: absolute; top: 105px; left: 8px; transform: rotate(45deg);} | |
| #railroad .text-railroad .road {letter-spacing: -3px;} | |
| #railroad .text-crossing {color: #000; text-transform: uppercase; text-align: center; font-size: 42px; letter-spacing: 6px; font-weight: bold; position: absolute; top: 106px; left: 11px; transform: rotate(-45deg);} | |
| /* yield */ | |
| #yield { position: relative; top: 330px; left: 290px; width: 250px;} | |
| #yield .frameborder { width:0; height:0; border-left: 122px solid transparent; border-right: 122px solid transparent; border-top: 214px solid #000000; border-bottom: 0px solid transparent; border-radius: 5px; position: absolute; top: 0; left: 0;} | |
| #yield .frame { width:0; height:0; border-left: 119px solid transparent; border-right: 119px solid transparent; border-top: 208px solid #ffffff; border-bottom: 0px solid transparent; border-radius: 5px; position: absolute; top: 2px; left: 3px;} | |
| #yield .redtriangle { width:0; height:0; border-left: 110px solid transparent; border-right: 110px solid transparent; border-top: 193px solid rgb(181,39,60); border-bottom: 0px solid transparent; border-radius: 10px 10px; position: absolute; top: 7px; left: 12px;} | |
| #yield .whitetriangle { width:0; height:0; border-left: 53px solid transparent; border-right: 53px solid transparent; border-top: 90px solid #ffffff; border-bottom: 0px solid transparent; border-radius: 5px; position: absolute; top: 42px; left: 69px; } | |
| #yield .text {color: rgb(181,39,60); text-transform: uppercase; text-align: center; font-size: 30px; position: absolute; top: 47px; left: 88px;} |
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
| <h1>HEY I MADE SOME SIGNS</h1> | |
| <div class="description">Handcrafted with CSS (by me, <a href="http://madeby.jennschiffer.com">Jenn Schiffer</a>), using the infamous the <a href="http://www.triskele.com/index.html" target="_blank">Roadgeek</a> font family.</div> | |
| <div id="bucket-o-signs"> | |
| <div id="donotenter"> | |
| <div class="square"></div> | |
| <div class="circle"></div> | |
| <div class="bar"></div> | |
| <div class="bar-block-top"></div> | |
| <div class="bar-block-bottom"></div> | |
| <div class="text">DO NOT<br /> ENTER</div> | |
| </div> | |
| <div id="hospital"> | |
| <div class="square"></div> | |
| <div class="text">H</div> | |
| </div> | |
| <div id="deadend"> | |
| <div class="frame"></div> | |
| <div class="diamond"></div> | |
| <div class="text">DEAD<br />END</div> | |
| </div> | |
| <div id="rr"> | |
| <div class="frame"></div> | |
| <div class="circle"></div> | |
| <div class="cross-a"></div> | |
| <div class="cross-b"></div> | |
| <div class="text">RR</div> | |
| </div> | |
| <div id="yield"> | |
| <div class="frameborder"></div> | |
| <div class="frame"></div> | |
| <div class="redtriangle"></div> | |
| <div class="whitetriangle"></div> | |
| <div class="text">YIELD</div> | |
| </div> | |
| <div id="railroad"> | |
| <div class="black-a"></div> | |
| <div class="black-b"></div> | |
| <div class="white-a"></div> | |
| <div class="white-b"></div> | |
| <div class="text-railroad">RAIL <span class="road"> ROAD</span></div> | |
| <div class="text-crossing">CROSSING</div> | |
| </div> | |
| </div> |
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
| {"view":"split","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment