Difference between revisions of "User:Lex Parsimoniae/common.css"

(Created page with "→‎CSS-Tricks Example by Chris Coyier http://css-tricks.com: * { margin: 0; padding: 0; } body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvet...")
 
Line 1: Line 1:
−
/*
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
−
CSS-Tricks Example
+
<html xmlns="http://www.w3.org/1999/xhtml">
−
by Chris Coyier
 
−
http://css-tricks.com
 
−
*/
 
  
−
* { margin: 0; padding: 0; }
+
<head>
−
body {  
+
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
−
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
−
  font-weight: 300;  
+
<title>3D Text Tower</title>
−
  font-size: 13px;
+
−
  line-height: 1.4;
+
<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>
  
−
article, aside, figure, footer, header, hgroup,
+
<body>
−
menu, nav, section { display: block; }
 
  
−
h1, h2, h3 {
+
−
font-weight: 300;
+
</body>
−
}
 
−
h2 {
 
−
font-size: 26px;
 
−
position: relative;
 
−
}
 
  
−
#page-wrap {
+
</html>
−
width: 960px;
 
−
margin: 80px auto;
 
−
overflow: hidden;
 
−
background: -webkit-linear-gradient(left, #ccc, #ccc 0.5%, white 0.5%, white);
 
−
background: -moz-linear-gradient(left, #ccc, #ccc 0.5%, white 0.5%, white);
 
−
background: -ms-linear-gradient(left, #ccc, #ccc 0.5%, white 0.5%, white);
 
−
background: -o-linear-gradient(left, #ccc, #ccc 0.5%, white 0.5%, white);
 
−
}
 
−
 
 
−
.content {
 
−
width: 63%;
 
−
float: left;
 
−
padding: 0 0 0 3%;
 
−
}
 
−
.content h2 {
 
−
margin: 0 0 10px 0;
 
−
}
 
−
.content h2:not(:first-child) {
 
−
margin-top: 20px;
 
−
}
 
−
.content h2:after {
 
−
content: "";
 
−
position: absolute;
 
−
width: 0;
 
−
height: 0;
 
−
border-top: 10px solid transparent;
 
−
border-bottom: 10px solid transparent;
 
−
border-left: 10px solid #eee;
 
−
top: 50%;
 
−
margin-top: -10px;
 
−
left: -23px;
 
−
}
 
−
.content h2:before {
 
−
content: "";
 
−
position: absolute;
 
−
width: 0;
 
−
height: 0;
 
−
border-top: 16px solid transparent;
 
−
border-bottom: 16px solid transparent;
 
−
border-left: 16px solid #ccc;
 
−
top: 50%;
 
−
margin-top: -16px;
 
−
left: -23px;
 
−
}
 
−
 
 
−
aside {
 
−
width: 30%;
 
−
float: right;
 
−
}
 
−
 
 
−
.module {
 
−
background: #eee;
 
−
margin: 0 0 20px 0;
 
−
}
 
−
.module h2 {
 
−
background: #ccc;
 
−
line-height: 2;
 
−
padding: 0 0 0 10px;
 
−
font-size: 16px;
 
−
box-shadow: inset 0 25px 10px -10px rgba(255, 255, 255, 0.2);
 
−
}
 
−
.module h2 a {
 
−
float: right;
 
−
position: relative;
 
−
text-decoration: none;
 
−
color: #333;
 
−
padding: 0 10px;
 
−
border-left: 5px solid white;
 
−
-webkit-transition: padding 0.1s linear;
 
−
-moz-transition: padding 0.1s linear;
 
−
-ms-transition: padding 0.1s linear;
 
−
-o-transition: padding 0.1s linear;
 
−
}
 
−
.module h2 a:hover {
 
−
padding: 0 14px;
 
−
}
 
−
.module h2 a:active {
 
−
padding: 0 16px;
 
−
}
 
−
.module ul {
 
−
list-style: none;
 
−
padding: 10px 0;
 
−
}
 
−
.module li {
 
−
color: #333;
 
−
border-bottom: 1px solid #cfcfcf;
 
−
border-top: 1px solid #fbf6f6;
 
−
padding: 10px;
 
−
font-family: Georgia, Serif;
 
−
}
 
−
.module li:first-child {
 
−
border-top: 0;
 
−
padding-top: 0;
 
−
}
 
−
.module li:last-child {
 
−
border-bottom: 0;
 
−
padding-bottom: 0;
 
−
}
 
−
.module h2 a:before,
 
−
.module h2 a:after {
 
−
  content: "";
 
−
position: absolute;
 
−
top: 50%;
 
−
width: 0;
 
−
height: 0;
 
−
}
 
−
.module h2 a:before {
 
−
left: -12px;
 
−
border-top: 8px solid transparent;
 
−
border-bottom: 8px solid transparent;
 
−
border-right: 8px solid white;
 
−
margin-top: -8px;
 
−
}
 
−
 
 
−
.module.blue h2 a {
 
−
background: #a2d6eb;
 
−
}
 
−
.module.blue h2 a:hover {
 
−
background: #c5f0ff;
 
−
}
 
−
.module.blue h2 a:after {
 
−
left: -5px;
 
−
border-top: 6px solid transparent;
 
−
border-bottom: 6px solid transparent;
 
−
border-right: 6px solid #a2d6eb;
 
−
margin-top: -6px;
 
−
}
 
−
.module.blue h2 a:hover:after {
 
−
border-right-color: #c5f0ff;
 
−
}
 
−
 
 
−
.module.green h2 a {
 
−
background: #9cf1a4;
 
−
}
 
−
.module.green h2 a:hover {
 
−
background: #bbffcf;
 
−
}
 
−
.module.green h2 a:after {
 
−
left: -5px;
 
−
border-top: 6px solid transparent;
 
−
border-bottom: 6px solid transparent;
 
−
border-right: 6px solid #9cf1a4;
 
−
margin-top: -6px;
 
−
}
 
−
.module.green h2 a:hover:after {
 
−
border-right-color: #bbffcf;
 
−
}
 
−
 
 
−
.module.red h2 a {
 
−
background: #f0a5b5;
 
−
}
 
−
.module.red h2 a:hover {
 
−
background: #ffc7d2;
 
−
}
 
−
.module.red h2 a:after {
 
−
left: -5px;
 
−
border-top: 6px solid transparent;
 
−
border-bottom: 6px solid transparent;
 
−
border-right: 6px solid #f0a5b5;
 
−
margin-top: -6px;
 
−
}
 
−
.module.red h2 a:hover:after {
 
−
border-right-color: #ffc7d2;
 
−
}
 

Revision as of 23:03, 30 April 2013

<!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">

<head>
	<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
	
	<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>

	
</body>

</html>

Retrieved from "https://www.sarna.net/wiki/index.php?title=User:Lex_Parsimoniae/common.css&oldid=297402"