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;
}
h1#logo {
width: 200px; // width of image
height: 100px; // height of image
background: url(../path/to/image.jpg);
text-indent: -9999px;
}This technique is credited to Mike Rundle and referred to as the Phark Method. There are many more techniques for CSS Image Replacement.
<div class="papers"></div>body {
background: #666;
}
.papers {
background-color: white;
height: 350px;
padding: 20px;
width: 260px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
}
<nav>
<ul class="top-menu">
<li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
<li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
<li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
<li><a href=#>About</a><div class="menu-item" id="about"></div></li>
<li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
</ul>
</nav>nav {
width: 960px;
height: 100px;
margin: 120px auto;
text-align: center;
}
.top-menu li {
display: inline-block;
text-align: center;
margin: 30px 5px;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.top-menu li:hover {
margin: 30px 20px;
}
.top-menu li:active {
margin: 30px 33px;
}
.top-menu li a {
width: 100px;
height: 100px;
z-index: 9999;
position: absolute;
top: 35px;
font-weight: bold;
display: block;
text-decoration: none;
font-size: 20px;
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
.top-menu li:active a {
font-size: 26px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {
width: 100px;
height: 100px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B; }
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }
Here's for Google Code Prettify (found at this source).
.prettyprint {
color: #839496;
background-color: #002b36;
}
.prettyprint .pln {
color: inherit;
}
.prettyprint .str,
.prettyprint .lit,
.prettyprint .atv {
color: #2aa198;
}
.prettyprint .kwd {
color: #268bd2;
}
.prettyprint .com,
.prettyprint .dec {
color: #586e75;
font-style: italic;
}
.prettyprint .typ {
color: #b58900;
}
.prettyprint .pun {
color: inherit;
}
.prettyprint .opn {
color: inherit;
}
.prettyprint .clo {
color: inherit;
}
.prettyprint .tag {
color: #268bd2;
font-weight: bold;
}
.prettyprint .atn {
color: inherit;
}And here's for CodeMirror. Rebecca Murphey found it but couldn't remember original source.
html * {
color-profile: sRGB;
rendering-intent: auto;
}
.cm-s-solarized-light {
background-color: #fdf6e3;
color: #657b83;
}
.cm-s-solarized-light .emphasis {
font-weight: bold;
}
.cm-s-solarized-light .dotted {
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light .CodeMirror-gutter {
background-color: #eee8d5;
border-right: 3px solid #eee8d5;
}
.cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
color: #93a1a1;
}
.cm-s-solarized-light .CodeMirror-cursor {
border-left-color: #002b36 !important;
}
.cm-s-solarized-light .CodeMirror-matchingbracket {
color: #002b36;
background-color: #eee8d5;
box-shadow: 0 0 10px #eee8d5;
font-weight: bold;
}
.cm-s-solarized-light .CodeMirror-nonmatchingbracket {
color: #002b36;
background-color: #eee8d5;
box-shadow: 0 0 10px #eee8d5;
font-weight: bold;
color: #dc322f;
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-keyword {
color: #657b83;
font-weight: bold;
}
.cm-s-solarized-light span.cm-atom {
color: #2aa198;
}
.cm-s-solarized-light span.cm-number {
color: #586e75;
}
.cm-s-solarized-light span.cm-def {
color: #268bd2;
}
.cm-s-solarized-light span.cm-variable {
color: #cb4b16;
}
.cm-s-solarized-light span.cm-variable-2 {
color: #cb4b16;
}
.cm-s-solarized-light span.cm-variable-3 {
color: #cb4b16;
}
.cm-s-solarized-light span.cm-comment {
color: #93a1a1;
}
.cm-s-solarized-light span.cm-property {
color: #b58900;
}
.cm-s-solarized-light span.cm-operator {
color: #657b83;
}
.cm-s-solarized-light span.cm-string {
color: #6c71c4;
}
.cm-s-solarized-light span.cm-error {
font-weight: bold;
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-light span.cm-bracket {
color: #cb4b16;
}
.cm-s-solarized-light span.cm-tag {
color: #657b83;
}
.cm-s-solarized-light span.cm-attribute {
color: #586e75;
font-weight: bold;
}
.cm-s-solarized-light span.cm-meta {
color: #268bd2;
}
.cm-s-solarized-dark {
background-color: #002b36;
color: #839496;
}
.cm-s-solarized-dark .emphasis {
font-weight: bold;
}
.cm-s-solarized-dark .dotted {
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark .CodeMirror-gutter {
background-color: #073642;
border-right: 3px solid #073642;
}
.cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
color: #586e75;
}
.cm-s-solarized-dark .CodeMirror-cursor {
border-left-color: #fdf6e3 !important;
}
.cm-s-solarized-dark .CodeMirror-matchingbracket {
color: #fdf6e3;
background-color: #073642;
box-shadow: 0 0 10px #073642;
font-weight: bold;
}
.cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
color: #fdf6e3;
background-color: #073642;
box-shadow: 0 0 10px #073642;
font-weight: bold;
color: #dc322f;
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-keyword {
color: #839496;
font-weight: bold;
}
.cm-s-solarized-dark span.cm-atom {
color: #2aa198;
}
.cm-s-solarized-dark span.cm-number {
color: #93a1a1;
}
.cm-s-solarized-dark span.cm-def {
color: #268bd2;
}
.cm-s-solarized-dark span.cm-variable {
color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-2 {
color: #cb4b16;
}
.cm-s-solarized-dark span.cm-variable-3 {
color: #cb4b16;
}
.cm-s-solarized-dark span.cm-comment {
color: #586e75;
}
.cm-s-solarized-dark span.cm-property {
color: #b58900;
}
.cm-s-solarized-dark span.cm-operator {
color: #839496;
}
.cm-s-solarized-dark span.cm-string {
color: #6c71c4;
}
.cm-s-solarized-dark span.cm-error {
font-weight: bold;
border-bottom: 1px dotted #cb4b16;
}
.cm-s-solarized-dark span.cm-bracket {
color: #cb4b16;
}
.cm-s-solarized-dark span.cm-tag {
color: #839496;
}
.cm-s-solarized-dark span.cm-attribute {
color: #93a1a1;
font-weight: bold;
}
.cm-s-solarized-dark span.cm-meta {
color: #268bd2;
}
Requires jQuery and jQuery UI for the actual slider. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow.
<div id="slider"></div>
<div id="face">
<div id="mouth-box">
<div id="mouth" class="straight"></div>
</div>
</div>#face {
width: 100px;
height: 100px;
position: relative;
border: 2px solid black;
border-radius: 50px;
margin: 20px auto;
}
#face:before, #face:after {
position: absolute;
content: "";
width: 10px;
height: 10px;
top: 30px;
border-radius: 10px;
background: black;
}
#face:before {
left: 30px;
}
#face:after {
left: 60px;
}
#mouth-box {
width: 60px;
height: 20px;
left: 20px;
top: 60px;
overflow: hidden;
background: white;
position: relative;
}
#mouth {
width: 60px;
height: 60px;
border-radius: 30px;
border: 2px solid black;
position: absolute;
top: 0;
left: 0;
}
#mouth.straight {
height: 0px !important;
top: 7px !important;
border-width: 1px;
bottom: auto !important;
}var newWidth,
mouth = $("#mouth");
$( "#slider" ).slider({
slide: function(event, ui) {
if (ui.value > 51 ) {
mouth.css({ bottom: 0, top: "auto" });
newWidth = 160 - ui.value;
mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -25 + ((ui.value-50) / 2)
})
.removeClass("straight");
} else if ((ui.value > 48) && (ui.value < 52)) {
mouth.addClass("straight");
} else {
mouth.css({ top: 0, bottom: "auto" });
newWidth = ui.value + 60;
mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -ui.value / 2
})
.removeClass("straight");
}
},
value: 50
});
From the footer of the v8 design of CSS-Tricks.
footer {
clear:both;
overflow:hidden;
font-size:16px;
line-height:1.3;
}
#footer-boxes {
-moz-column-count:2;
-moz-column-gap:10px;
-webkit-column-count:2;
-webkit-column-gap:10px;
column-count:4;
column-gap:10px;
}
.footer-box {
margin:0 0 10px 0;
display:inline-block;
width:262px;
height:140px;
padding:15px;
background:#e6e2df;
color:#b2aaa4;
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
background-position:320px 50%;
background-repeat:no-repeat;
text-decoration: none;
}
.footer-box h5 {
font: bold 24px Sans-Serif !important;
text-transform:uppercase;
font-size:38px;
line-height:1;
padding:0 0 10px 0;
}
.footer-box:hover h5 {
text-shadow:0 0 4px rgba(0,0,0,0.4);
color:white;
}
.footer-box:hover p {
color:white;
}
.footer-box p {
font-size:12px;
width:175px;
line-height:1.5;
}
.footer-box:hover {
background-position:200px 50%;
}
#f-diw {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1288px;
}
#f-diw:hover {
background-color:#237abe;
background-position:186px -1288px;
}
#f-qod {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1448px;
}
#f-qod:hover {
background-color:#37597a;
background-position:186px -1448px;
}
#f-htmlipsum {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1608px;
}
#f-htmlipsum:hover {
background-color:#333333;
background-position:186px -1608px;
}
#f-qod:hover p {
color:#adbde3;
}
#f-bookshelf {
background-image:url(http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-8/images/css-tricks.png);
background-position:290px -1768px;
}
#f-bookshelf:hover {
background-color:#ff8400;
background-position:186px -1768px;
}
#f-html-ipsum:hover p {
color:#fff8da;
}
#f-twitter {
background-image:url(http://cdn.css-tricks.com/images/css-tricks.png);
background-position:290px -1928px;
}
#f-twitter:hover {
background-color:#4ed2fe;
background-position:186px -1928px;
}
#f-forrst {
background-image:url(http://cdn.css-tricks.com/images/css-tricks.png);
background-position:290px -2088px;
}
#f-forrst:hover {
background-color:#203f16;
background-position:186px -2088px;
}
#f-forrst:hover p {
color: #92c59c;
}
The blockquote displays in standards-compliant browsers with the "big quotes before" effect, and in IE with a thick left border and a light grey background.
Unlike other blockquote techniques, this style does not require a nested block-level element (like p). As such, it turns a paragraph into an inline-styled element to keep the content from dropping below the quote.
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
Any ol' anchor link can be a link to a PDF document, but clicking a link like that thinking otherwise can be surprising and uncomfortable for a user. This CSS can visually signify those links.
/* Add " (PDF)" text after links that go to PDFs */
a[href$=".pdf"]:after { content: " (PDF)"; }
/* If file size specified as data attribute, use that too */
a[href$=".pdf"][data-size]:after { content: " (PDF, " attr(data-size) ")"; }
So...
<p>Watch out for the <a href="some.pdf">PDF bomb</a> here!</p>Becomes:
Watch out for the PDF bomb (PDF) here!
Or...
<p>Watch out for the <a href="some.pdf" data-size="2 MB">PDF bomb</a> here!</p>Becomes:
Watch out for the PDF bomb (PDF, 2 MB) here!
This only works on webkit based browsers (Chrome, Safari). It degrades gracefully for non-webkit browsers (no change is seen, rather than an unanimated size bump).
#blah { -webkit-transition: all .2s ease-in-out; }
#blah:hover { -webkit-transform: scale(1.1); }
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 0;-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]
-moz-border-radius: 10px 20px 30px 0;-moz-border-radius-topleft: [horizontal radius] [vertical radius];
-moz-border-radius-topleft: 10px 40px;-moz-border-radius: [horizontal radius] / [vertical radius];
-moz-border-radius: 10px / 40px;-moz-border-radius: 10px 20px 30px 40px / 15px 30px 45px 60px;Above is the same as:
-moz-border-radius-topleft: 10px 15px;
-moz-border-radius-topright: 20px 30px;
-moz-border-radius-bottomright: 30px 45px;
-moz-border-radius-bottomleft: 40px 60px;All corners:
-webkit-border-radius: 36px 12px;Right corners only:
-webkit-border-top-right-radius: 50px 30px;
-webkit-border-bottom-right-radius: 50px 30px;
<h1 class="ribbon">
<strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 50%;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em; /* Adjust to suit */
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
}
.ribbon:before, .ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}This technique uses negative z-index values on some of the pseudo elements. That means that they can go behind other elements that have opaque backgrounds, which ruins the effect. To fix this, you'll need to make sure the immediate parent of the ribbons does not have a background applied and has relative postioning with positive z-index. Use an additional wrapper if needed.
<div class="non-semantic-protector">
<!-- ribbons and other content in here -->
</div>.non-semantic-protector { position: relative; z-index: 1; }Everybody loves ribbons
For right-to-left languages, you can swap the default left-to-right layout in most browsers simply through the dir attribute.
<body dir="rtl">
text in right-to-left language
</body>You can use that attribute on any text element, it doesn't have to be the body. Likewise, you can swap it with just CSS:
body {
unicode-bidi:bidi-override;
direction:rtl;
}The following are "less practical" but still interesting:
/* Flip each letter backwards */
div {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
unicode-bidi:bidi-override;
direction:rtl;
}/* Entire text flipped around */
div {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
}
For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}Or other highish-res:
/* 1.25 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* Retina-specific stuff here */
}
/* 1.3 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* Retina-specific stuff here */
}
/* 1.5 dpr */
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* Retina-specific stuff here */
}@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1) {
/* Retina-specific stuff here */
}This is more future proof...
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here */
}Notes:
The super weirdmin--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed.
Here's the spec on resolution units.
Example:
Let's say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it's best on any screen (retina or not) and not waste any bandwidth. You'd set up 6 media queries, one for each breakpoint and one for each one of those breakpoints on retina. Then you'd override the background image all the way down.
@media only screen and (min-width: 320px) {
/* Small screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and ( min-resolution: 192dpi) and (min-width: 320px),
only screen and ( min-resolution: 2dppx) and (min-width: 320px) {
/* Small screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 700px) {
/* Medium screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px),
only screen and ( min-resolution: 192dpi) and (min-width: 700px),
only screen and ( min-resolution: 2dppx) and (min-width: 700px) {
/* Medium screen, retina, stuff to override above media query */
}
@media only screen and (min-width: 1300px) {
/* Large screen, non-retina */
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px),
only screen and ( min-resolution: 192dpi) and (min-width: 1300px),
only screen and ( min-resolution: 2dppx) and (min-width: 1300px) {
/* Large screen, retina, stuff to override above media query */
}
a {
outline: 0;
}Be careful removing outline styles from links, as they are a usability feature. If you do, make sure to define clear focus styles.
If your problem is that the dotted outlines travel all the way to the left or right of the screen because they are floated, try setting the overflow to hidden.
By default all versions of IE have a scrollbar on textareas, even when they are empty.
No other browsers do this, so if you want to remove it so IE can visually match other browsers, just:
textarea { overflow: auto; }The scrollbar will return (rightfully) when the text in the textarea expands beyond it's bounds.
It can sometimes be desirable to remove the top or left margin from the first element in a container. Likewise, the right or bottom margin from the last element in a container. You can do this by manually applying classes to the HTML:
.first { margin-top: 0 !important; margin-left: 0 !important; }
.last { margin-bottom: 0 !important; margin-right: 0 !important; }The "top"/"bottom" zeroing being useful with a vertical stack of elements, "left"/"right" zeroing being useful for horizontal rows (in general). But... this method is dependent on you adding classes to the HTML yourself. Pseudo-selectors can be a better less intrusive way to go:
* > :first-child { margin-top: 0 !important; margin-left: 0 !important; }
* > :last-child { margin-bottom: 0 !important; margin-right: 0 !important; }You may want to replace the * with more specific selectors as per your needs.
Lets say you had a floated block of 9 elements, 3 by 3. It's very common that you might need to remove the right margin from the 3rd, 6th, and 9th items. The nth-child pseudo-selector might be able to help there:
* > :nth-child(3n+3) { margin-right: 0; }The equation there, 3n+3, works like this:
(3x0)+3 = 3
(3x1)+3 = 6
(3x2)+3 = 9
etc.
jQuery uses CSS3 selectors, which includes :first-child, :last-child, and :nth-child(). This means that in browsers with don't or don't fully support these selectors, they WILL work in jQuery, so you can substitute the CSS support with JavaScript support. For example:
$("* > :nth-child(3n+3)").css("margin-right", 0);:first-child and :last-child works in the latest release from all major browsers, but not in IE 6. :first-child is supported in IE 7+. :nth-child works in Safari 3+, Firefox 3.5+, and Chrome 1+, but still doesn't work in IE8.
Also see David Oliver's article.
-webkit-tap-highlight-color: rgba(0,0,0,0);And then to allow :active styles to work in your CSS on a page in Mobile Safari:
document.addEventListener("touchstart", function(){}, true);
Dotted borders around links are an accessibility feature most browsers have by default. It's for users who must or choose to navigate by keyboard, there is a visual style applied to those links when "tabbed" to. These borders also show up when the link is clicked (in it's "active" state), and can be an eyesore depending on the design (especially when using something like CSS image replacement, the borders span the length of the screen). You can remove them with this:
a:active {
outline: none;
}NOTE: The advantage here is that the :focus style still will use the outlines, meaning that keyboard navigators will still have the focus styling/visual feedback.
Demo:
.field { position:relative; font-family: Arial; text-transform:uppercase; font-weight:bold; display:inline-block; }
label { position:absolute; left:0; top:0; transition: all .2s linear; color:#999; font-size:10px; }
input { margin-top:15px; border:1px solid #999; padding:3px 2px; }
input:invalid + label { top:3px; opacity:0; }
input:valid + label { opacity:1; top:0; }
input:focus { outline:none; }
input:focus + label { color:#33A; }
The code is only a few lines long
<html lang="en">
<head>
<title>Simplest jQuery Slideshow</title>
<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
.fadelinks, .faderandom { position:relative; height:332px; width:500px; }
.fadelinks > *, .faderandom > * { position:absolute; left:0; top:0; display:block; }
.multipleslides { position:relative; height:332px; width:500px; float:left; }
.multipleslides > * { position:absolute; left:0; top:0; display:block; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
</head>
<body>
<h1>
Simplest jQuery Slideshow</h1>
Check out the <a href="https://www.blogger.com/archives/javascript/simplest-jquery-slideshow">blog post</a>.
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" />
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" />
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" />
</div>
<h2>
More Simple jQuery Slideshow: Random</h2>
<script>
$(function(){
$('.faderandom > :gt(0)').hide();
setInterval(function(){
var rand = Math.floor(Math.random() * ($('.faderandom').children().length-1));
$('.faderandom > :first-child').appendTo('.faderandom').fadeOut();
$('.faderandom > *').eq(rand).prependTo('.faderandom').fadeIn();
}, 3000);
});
</script>
<div class="faderandom">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<h2>
More Simple jQuery Slideshow: With Links</h2>
<script>
$(function(){
$('.fadelinks > :gt(0)').hide();
setInterval(function(){$('.fadelinks > :first-child').fadeOut().next().fadeIn().end().appendTo('.fadelinks');}, 3000);
});
</script>
<div class="fadelinks">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<h2>
More Simple jQuery Slideshow: Multiple Slideshows</h2>
<script>
$(function(){
$('.multipleslides').each(function(){
// scope everything for each slideshow
var $this = this;
$('> :gt(0)', $this).hide();
setInterval(function(){$('> :first-child',$this).fadeOut().next().fadeIn().end().appendTo($this);}, 3000);
})
});
</script>
<div class="multipleslides">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
<div class="multipleslides">
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" /></a>
<a href="https://www.blogger.com/blogger.g?blogID=4771519697269718024#"><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" /></a>
</div>
</body>
HTML:
<input class="button" type="button" value="Go">
.. or ..
<button class="button">Go</button>CSS:
input.button { text-indent: -9000px; text-transform: capitalize; }Negative-indent alone unfortunately doesn't work to remove text from a button element in IE7, but add text-transform: capitalize; and presto!
Slightly lighter color (assuming your text is black), dotted bottom border, and a question-mark cursor. This has become a somewhat standardized approach, which is always a good thing in design usability.
abbr {
border-bottom: 1px dotted #222;
color: #222;
cursor: help;
}
@media print{
a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub { top: 0.4em; }Css code to stop superscripts from breaking line heights once and for all
Or any long bit of text, really.
.comment-text {
word-wrap: break-word;
}A more robust browser support, you'll need more (via):
-ms-word-break: break-all;
/* Be VERY careful with this, breaks normal words wh_erever */
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;The above works in Internet Explorer 8+, Firefox 6+, iOS 4.2, Safari 5.1+ and Chrome 13+.
Just make sure you zero out the margin and padding on those elements as well (normal in any reset or normalization).
html, body {
height: 100%;
overflow: hidden;
}
.yourselector {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}Cannot be used with repeating, needs fixed with and height.
img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}This requires a 1x1px transparent GIF image
As in, the game PICROSS3D.
.btn {
color: white;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 20px;
text-decoration: none;
text-shadow: -1px -1px 1px #616161;
position: relative;
padding: 15px 30px;
-webkit-box-shadow: 5px 5px 0 #666;
-moz-box-shadow: 5px 5px 0 #666;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
margin: 0 10px 0 0;
}
.btn:hover {
-webkit-box-shadow: 0px 0px 0 #666;
-moz-box-shadow: 0px 0px 0 #666;
top: 5px;
left: 5px;
}Smoother, but more markup and CSS needed.
<div class="rela">
<a class="btn green btn1" href="index.html">Jack</a>
<span class="shadow"></span>
</div>.rela {
display: block;
width: 96px;
height: 56px;
position: relative;
margin: 10px;
}
.btn {
display: block;
line-height: 56px;
text-align: center;
color: white;
font-family: Helvetica, Arial, Sans-Serif;
font-size: 20px;
text-decoration:none;
text-shadow: -1px -1px 1px #616161;
position: relative;
}
.shadow {
position: absolute;
top:5px;
left: 5px;
background: #666;
z-index: -1;
width: 100%;
height: 100%;
}$(".btn").hover(function(){
$(this).stop().animate({
top: "5",
left: "5"
}, 100 );
},
function(){
$(this).stop().animate({
top: 0,
left: 0
}, 100 );
});
<a class=”GlobalOrangeButton” href=”http://yourwebsite.com”><span>So Neat!</span></a>a.GlobalOrangeButton span {
background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprite-SlideButton/images/button_left_orange.png’) no-repeat 0 0;
display: block;
line-height: 22px;
padding: 7px 0 5px 18px;
color: #fff;
}
a.GlobalOrangeButton {
background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right;
display: block;
float: left;
height: 34px;
margin-right: 6px;
padding-right: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.GlobalOrangeButton:hover span {
background-position: 0 -34px; color: #fff;
}a.GlobalOrangeButton:hover {
background-position: right -34px;
}
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }Be careful that these boxes aren't sitting within another element that has a background, otherwise the negative z-index values (required for this to work) will force the shadows underneath that and not show up.
img {
-ms-interpolation-mode: bicubic;
}If you scale down an image with width and/or height attributes, it's going to look terrible in IE unless you use this.
<section class="fieldset">
<h1>This is not a fieldset</h1>
<p>Booyah!</p>
</section>.fieldset {
position: relative;
border: 1px solid #ddd;
padding: 10px;
}
.fieldset h1 {
position: absolute;
top: 0;
font-size: 18px;
line-height: 1;
margin: -9px 0 0; /* half of font-size */
background: #fff;
padding: 0 3px;
}
background-image: url(data:image/png;base64,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);
This is the css, html code for displaying Treeview Without any JavaScript
Demo: Course folder at http://www.liketly.com/course/features/
.css-treeview ul,
.css-treeview li
{
padding: 0;
margin: 0;
list-style: none;
}
.css-treeview input
{
position: absolute;
opacity: 0;
}
.css-treeview
{
font: normal 11px "Segoe UI", Arial, Sans-serif;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.css-treeview a
{
color: #00f;
text-decoration: none;
}
.css-treeview a:hover
{
text-decoration: underline;
}
.css-treeview input + label + ul
{
margin: 0 0 0 22px;
}
.css-treeview input + label + ul
{
display: none;
}
.css-treeview label,
.css-treeview label::before
{
cursor: pointer;
}
.css-treeview input:disabled + label
{
cursor: default;
opacity: .6;
}
.css-treeview input:checked:not(:disabled) + label + ul
{
display: block;
}
.css-treeview label,
.css-treeview label::before
{
background: url("icons.png") no-repeat;
}
.css-treeview label,
.css-treeview a,
.css-treeview label::before
{
display: inline-block;
height: 16px;
line-height: 16px;,
vertical-align: middle;
}
.css-treeview label
{
background-position: 18px 0;
}
.css-treeview label::before
{
content: "";
width: 16px;
margin: 0 22px 0 0;
vertical-align: middle;
background-position: 0 -32px;
}
.css-treeview input:checked + label::before
{
background-position: 0 -16px;
}
/* webkit adjacent element selector bugfix */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
.css-treeview
{
-webkit-animation: webkit-adjacent-element-selector-bugfix infinite 1s;
}
@-webkit-keyframes webkit-adjacent-element-selector-bugfix
{
from
{
padding: 0;
}
to
{
padding: 0;
}
}
}<div class="css-treeview">
<ul>
<li><input type="checkbox" id="item-0" /><label for="item-0">This Folder is Closed By Default</label>
<ul>
<li><input type="checkbox" id="item-0-0" /><label for="item-0-0">Ooops! A Nested Folder</label>
<ul>
<li><input type="checkbox" id="item-0-0-0" /><label for="item-0-0-0">Look Ma - No Hands!</label>
<ul>
<li><a href="./">First Nested Item</a></li>
<li><a href="./">Second Nested Item</a></li>
<li><a href="./">Third Nested Item</a></li>
<li><a href="./">Fourth Nested Item</a></li>
</ul>
</li>
<li><a href="./">Item 1</a></li>
<li><a href="./">Item 2</a></li>
<li><a href="./">Item 3</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-0-1" /><label for="item-0-1">Yet Another One</label>
<ul>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-0-2" disabled="disabled" /><label for="item-0-2">Disabled Nested Items</label>
<ul>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-1" checked="checked" /><label for="item-1">This One is Open by Default...</label>
<ul>
<li><input type="checkbox" id="item-1-0" /><label for="item-1-0">And Contains More Nested Items...</label>
<ul>
<li><a href="./">Look Ma - No Hands</a></li>
<li><a href="./">Another Item</a></li>
<li><a href="./">And Yet Another</a></li>
</ul>
</li>
<li><a href="./">Lorem</a></li>
<li><a href="./">Ipsum</a></li>
<li><a href="./">Dolor</a></li>
<li><a href="./">Sit Amet</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2" /><label for="item-2">Can You Believe...</label>
<ul>
<li><input type="checkbox" id="item-2-0" /><label for="item-2-0">That This Treeview...</label>
<ul>
<li><input type="checkbox" id="item-2-2-0" /><label for="item-2-2-0">Does Not Use Any JavaScript...</label>
<ul>
<li><a href="./">But Relies Only</a></li>
<li><a href="./">On the Power</a></li>
<li><a href="./">Of CSS3</a></li>
</ul>
</li>
<li><a href="./">Item 1</a></li>
<li><a href="./">Item 2</a></li>
<li><a href="./">Item 3</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2-1" /><label for="item-2-1">This is a Folder With...</label>
<ul>
<li><a href="./">Some Nested Items...</a></li>
<li><a href="./">Some Nested Items...</a></li>
<li><a href="./">Some Nested Items...</a></li>
<li><a href="./">Some Nested Items...</a></li>
<li><a href="./">Some Nested Items...</a></li>
</ul>
</li>
<li><input type="checkbox" id="item-2-2" disabled="disabled" /><label for="item-2-2">Disabled Nested Items</label>
<ul>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
<li><a href="./">item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 |