There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Shadow along the top edge of the website, like this:
body:before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}The example above rotates text 90 degrees counterclockwise.
The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.
Also see this blog post about sideways headers.
.blood {
color:silver;
text-shadow:
4px 4px 1px #300000,
4px 6px 1px #400000,
4px 8px 1px #500000,
4px 10px 1px #600000,
4px 12px 1px #700000,
4px 14px 1px #800000,
4px 16px 1px #900000,
4px 18px 1px #A00000,
4px 20px 1px #B00000,
4px 22px 1px #C00000,
4px 24px 1px #D00000,
4px 26px 1px #E00000,
4px 28px 1px #F00000,
4px 30px 1px #FA0000,
4px 32px 1px #FB0000,
4px 34px 1px #FC0000,
4px 36px 1px #FD0000,
4px 38px 1px #FE0000,
4px 40px 2px #FF0000;
}<h1 class="blood">Vampire!</h1>
p {
font-size: 24px !important;
}The !important rule at the end of a value will override any other style declarations of that attribute, including inline styles.
a[href^="http://"] {
/* fully valid URL, likely external link */
}
a[href="http://google.com"] {
/* link to specific website */
}
a[href^="/"], a[href^=".."] {
/* internal relative link */
}
a[href^="mailto:"] {
/* email link */
}
a[href$=".pdf"] {
/* PDF file */
}
a[href$=".doc"] {
/* Microsoft Word document */
}
a[href$=".mp3"] {
/* Music file */
}
a[href$=".zip"] {
/* Archive file */
}
Works great if you can apply a fixed height to the footer.
<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>* {
margin: 0;
}
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
}
.site-footer {
background: orange;
}