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...") |
(No difference)
|
Revision as of 22:56, 30 April 2013
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 13px;
line-height: 1.4;
}
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
h1, h2, h3 {
font-weight: 300;
}
h2 {
font-size: 26px;
position: relative;
}
#page-wrap {
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;
}