|
|
| Line 1: |
Line 1: |
| − | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
| + | /* |
| − | <html xmlns="http://www.w3.org/1999/xhtml">
| + | CSS-Tricks Example |
| | + | by Chris Coyier |
| | + | http://css-tricks.com |
| | + | */ |
| | | | |
| − | <head>
| + | * { margin: 0; padding: 0; } |
| − | <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
| + | body { font: 14px/1.4 Georgia, serif; } |
| − |
| |
| − | <title>3D Text Tower</title>
| |
| − |
| |
| − | <style type="text/css">
| |
| − |
| |
| − | * { margin: 0; padding: 0; }
| |
| − | body { background: #666; }
| |
| − | h1,h2,h3,h4 { margin: 0 0 3px 0; }
| |
| − | h1 { color: white; font: bold 52px Helvetica, Arial, Sans-Serif;
| |
| − | text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
| |
| − | -webkit-transition: all 0.12s ease-out;
| |
| − | -moz-transition: all 0.12s ease-out;
| |
| − | -o-transition: all 0.12s ease-out;
| |
| − | }
| |
| − | h1:hover {
| |
| − | position: relative; top: -3px; left: -3px;
| |
| − | text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
| |
| − | }
| |
| − | h2 { color: white; font: bold 34px Helvetica, Arial, Sans-Serif;
| |
| − | text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
| |
| − | -webkit-transition: all 0.12s ease-out;
| |
| − | -moz-transition: all 0.12s ease-out;
| |
| − | -o-transition: all 0.12s ease-out;
| |
| − | }
| |
| − | h2:hover {
| |
| − | text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
| |
| − | }
| |
| − | h3 { color: white; font: bold 42px Helvetica, Arial, Sans-Serif;
| |
| − | text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
| |
| − | -webkit-transition: all 0.12s ease-out;
| |
| − | -moz-transition: all 0.12s ease-out;
| |
| − | -o-transition: all 0.12s ease-out;
| |
| − | }
| |
| − | h3:hover {
| |
| − | position: relative; top: -3px; left: -3px;
| |
| − | text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
| |
| − | }
| |
| − | h4 { color: white; font: bold 24px Helvetica, Arial, Sans-Serif;
| |
| − | text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
| |
| − | -webkit-transition: all 0.12s ease-out;
| |
| − | -moz-transition: all 0.12s ease-out;
| |
| − | -o-transition: all 0.12s ease-out;
| |
| − | }
| |
| − | h4:hover {
| |
| − | text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
| |
| − | }
| |
| − | #page-wrap { width: 700px; margin: 0 auto; padding: 20px; text-align: center; }
| |
| − | #about { margin: 50px 0 0 0; }
| |
| − | #about div { text-transform: uppercase; color: #eee; font: 15px Helvetica, Arial, Sans-Serif;
| |
| − | -webkit-transition: all 0.12s ease-out;
| |
| − | -moz-transition: all 0.12s ease-out;
| |
| − | -o-transition: all 0.12s ease-out;
| |
| − | }
| |
| − | #about div:nth-child(1) { font-size: 55px; letter-spacing: 1px;}
| |
| − | #about div:nth-child(2) { font-size: 28px; letter-spacing: 0.7px; }
| |
| − | #about div:nth-child(3) { font-size: 18px; letter-spacing: 0.2px; }
| |
| − | #about div:nth-child(4) { font-size: 14px; }
| |
| − | #about div:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); text-shadow: 3px 3px 3px #333; }
| |
| − | #about a { color: #fe4902; text-decoration: none; }
| |
| − | </style>
| |
| − | </head>
| |
| | | | |
| − | <body>
| + | button { padding: 10px; } |
| | | | |
| − |
| + | article, aside, figure, footer, header, hgroup, |
| − | </body>
| + | menu, nav, section { display: block; } |
| | | | |
| − | </html>
| + | #page-wrap { width: 300px; margin: 80px auto; } |
| | + | |
| | + | p { margin: 0 0 20px 0; } |
