You can flip images with CSS! Possible scenario: having only one graphic for an "arrow", but flipping it around to point in different directions.
img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
* { margin:0; padding:0; }
html, body {
height: 100%;
}
body #fixedElement {
position:fixed !important;
position: absolute; /*ie6 and above*/
top: 0;
right: 0;
}
#page-wrap {
width: 600px;
margin: 0 auto;
font: 16px/2 Georgia, Serif;
}The 100% height on the body and html stuff is in case you want to do fixed positioning along the bottom edge of the browser window.
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
Dan Cederholm has long used the Baskerville Italic ampersand, and tells us to Use The Best Ampersand Available (also here). For better or worse, this has gotten to be ridiculously popular. If you'd like to use this fancy ampersand:
Script <span class="amp">&</span> Style.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
From the v8 design of CSS-Tricks.
nav {
background: #444;
border-bottom: 8px solid #E6E2DF;
overflow: hidden;
position: relative;
width: 100%;
}
nav:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: white;
}
nav ul {
background: -moz-linear-gradient(left,
#444 0%,
#444 50%,
#41d05f 100%);
background: -webkit-gradient(linear, left top, right top,
color-stop(0%,#444),
color-stop(50%,#444),
color-stop(50%,#41d05f),
color-stop(100%,#41d05f));
list-style: none;
overflow: hidden;
padding: 0 0 0 20px;
width: 810px;
}
nav li {
display: inline;
}
nav a {
color: white;
display: block;
float: left;
font-family: "myriad-pro-1","myriad-pro-2", HelveticaNeue, Helvetica, Arial, Sans-Serif;
font-size: 22px;
padding: 12px 0;
text-decoration: none;
text-align: center;
width: 19%;
-webkit-transition: width 0.12s ease;
-moz-transition: width 0.12s ease;
-o-transition: width 0.12s ease;
transition: width 0.12s ease;
}
nav a:hover {
color: white;
}
nav a:hover span {
border-bottom: 2px solid white;
}
nav .a-home {
background: #ff8400;
z-index: 100;
position: relative;
}
nav .a-forums {
background: #e42b2b;
}
nav .a-videos {
background: #a800ff;
}
nav .a-downloads {
background: #49a7f3;
}
nav .a-snippets {
background: #41d05f;
}
.home nav {
border-bottom-color: #ff8400;
}
.forums nav {
border-bottom-color: #e42b2b;
}
.videos nav {
border-bottom-color: #a800ff;
}
.downloads nav {
border-bottom-color: #49a7f3;
}
.snippets nav {
border-bottom-color: #41d05f;
}
nav li:hover a {
width: 24%;
}
nav ul:hover .active {
width: 19%;
}
nav ul:hover .active:hover {
width: 24%;
}
nav li a.active {
width: 24%;
}
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.
p:last-child:after {
content: "\2766"; /* Here comes the ivy leaf */
font-size: 150%; /* Makes the leaf larger than the normal text */
padding-left: 10px; /* Leaf won't clash with the last letter of the text */
float: right; /* Horizontal position is set to the right edge of the column */
position: relative; /* This is just an homage to Albert Einstein */
top: 15px /*Vertical distance from the last line of text */
}