This works on text inputs (e.g. text, email, etc) but you cannot change actual password inputs. Use case = ???.
input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }
Text in <pre> tags doesn't wrap by default. For example, see the code snippet below! If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.
/* Browser specific (not valid) styles to make preformatted text wrap */
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}Link, Visited, Hover, Active
L, V, H, A
LoVe, HAte
<div class="layered-paper">
Howdy
</div>.layered-paper {
background: #eee;
box-shadow:
0 1px 1px rgba(0,0,0,0.15), /* The top layer shadow */
0 10px 0 -5px #eee, /* The second layer */
0 10px 1px -4px rgba(0,0,0,0.15), /* The second layer shadow */
0 20px 0 -10px #eee, /* The third layer */
0 20px 1px -9px rgba(0,0,0,0.15); /* The third layer shadow */
}
@-webkit-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes NAME-YOUR-ANIMATION {
0% { opacity: 0; }
100% { opacity: 1; }
}#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */
-moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */
-o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */
animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+ */
}For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above
@keyframes fontbulger {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
}
#box {
-animation: fontbulger 2s infinite;
}If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values:
@keyframes fontbulger {
0%, 100% {
font-size: 10px;
}
50% {
font-size: 12px;
}
}Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate.
.box {
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}| timing-function | ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
| duration & delay | Xs or Xms |
| duration-count | X |
| fill-mode | forwards, backwards, both, none |
| animation-direction | normal, alternate |
Just space-separate all the individual values. The order doesn't matter except when using both duration and delay, they need to be in that order. In the example below 1s = duration, 2s = delay, 3 = iterations.
-webkit-animation: test 1s 2s 3 alternate backwards@keyframes infinite-spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}You can comma-separate the values to declare multiple animations on a selector.
.animate-this {
animation:
first-animation 2s infinite,
another-animation 1s;
}The steps() function controls exactly how many keyframes will render in the animation timeframe. Let's say you declare:
@keyframes move {
from { top: 0; left: 0; }
to { top: 100px; left: 100px; }
}If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time.
.move {
animation: move 10s steps(10) infinite alternate;
}The math works out nicely there. Every one second, the element will move 10px to the left and 10px down, until the end of the animation, and then again in reverse forever.
This can be great for spritesheet animation like this demo by simurai.
Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+
@media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
/*Language-specific*/
:lang(af){quotes:'\201E' '\201D' '\201A' '\2019';}
:lang(ak){font-family:Lucida,"DejaVu Sans",inherit;}
:lang(ar){font-family:Tahoma 12,Nazli,KacstOne,"DejaVu Sans",inherit;}
:lang(bg){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(bn){font-family:FreeSans,MuktiNarrow,Vrinda,inherit;font-size:1.1em;line-height:1.4em;}
:lang(cs){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(da){quotes:'\00BB' '\00AB' '\203A' '\2039';}
:lang(de){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(el){font-family:"DejaVu Sans",inherit;quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D';}
:lang(es){quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(fa){font-family:Terafik,Traffic,Roya,Nazli,Nazanin,sans;font-size:1.5em;}
:lang(fi){quotes:'\201D' '\201D' '\2019' '\2019';}
:lang(fr){quotes:'\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a';}
:lang(hr){quotes:'\00BB' '\00AB' '\203A' '\2039';}
:lang(is){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(ja){font-size:1.1em;}
:lang(km){font-family:"Khmer OS System","Khmer OS","Khmer Kampongtrach","CDT Khmer",inherit;line-height:2em;}
:lang(ko){font-size:1.1em;}
:lang(lt){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(nl){quotes:'\201E' '\201D' '\201A' '\2019';}
:lang(pl){quotes:'\201E' '\201D' '\201A' '\2019';}
:lang(ro){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(sk){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(sq){quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(sr){quotes:'\201E' '\201C' '\201A' '\2018';}
:lang(sv){quotes:'\201D' '\201D' '\2019' '\2019';}
:lang(tr){quotes:'\00AB' '\00BB' '\2039' '\203A';}
:lang(vi){font-family:"Lucida Grande","Vu Phu Tho","DejaVu Sans",inherit;}
:lang(vi) a:hover,:lang(vi) a:active{text-decoration:none;color:#606047;}
:lang(zh){font-size:1.5em;}
<div class="hexagon"><span></span></div>.hexagon {
width: 100px;
height: 55px;
position: relative;
}
.hexagon, .hexagon:before, .hexagon:after {
background: red;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
.hexagon:before, .hexagon:after {
content: "";
position: absolute;
left: 22px;
width: 57px;
height: 57px;
-moz-transform: rotate(145deg) skew(22.5deg);
-webkit-transform: rotate(145deg) skew(22.5deg);
transform: rotate(145deg) skew(22.5deg);
}
.hexagon:before {
top: -29px;
}
.hexagon:after {
top: 27px;
}
.hexagon span {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 55px;
background:red;
z-index: 1;
}
a {
position: relative;
padding-bottom: 6px;
}
a:hover::after {
content: "";
position: absolute;
bottom: 2px;
left: 0;
height: 1px;
width: 100%;
background: #444;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,transparent), color-stop(50%,#444), color-stop(100%,transparent));
background: -webkit-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: -moz-linear-gradient(left, transparent 0%, #444 50%, #transparent 100%);
background: -ms-linear-gradient(left, transparent 0%,#444 50%,#transparent 100%);
background: -o-linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
background: linear-gradient(left, transparent 0%,#444 50%,transparent 100%);
}
This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text.
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Like mid-2012 Twitter.
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}See the Pen Glowing Blue Inputs by Chris Coyier (@chriscoyier) on CodePen
a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
cursor: pointer;
}Some elements that are clickable mysteriously don't trigger a pointer cursor in browsers. This fixes that, and provides a default class "pointer" for applying it to other clickable things as needed.
At the time of this writing, this will only work in Chrome 18+, but it's standardized so support will eventually come to everywhere.
@media print {
body {
/* IE4-8 and 9 (deprecated). */
filter: Gray();
/* SVG version for IE10, Chrome 17, FF3.5,
Safari 5.2 and Opera 11.6 */
filter: url('#grayscale');
/* CSS3 filter, at the moment Webkit only. Prefix it for
future implementations */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* future-proof */
}
}
html {
overflow-y: scroll;
}This is invalid CSS, but it works in everything except Opera. The reason for this is to prevent "centering jumps" when navigating back and forth between pages with enough content to have a vertical scroll bar and pages that do not.
Firefox and IE have the "choose file" button to the right of the filepath, while Webkit puts it on the left. This makes WebKit put it on the right as well.
<input type="file">input[type="file"]{
-webkit-appearance: none;
text-align: left;
-webkit-rtl-ordering: left;
}
input[type="file"]::-webkit-file-upload-button{
-webkit-appearance: none;
float: right;
margin: 0 0 0 10px;
border: 1px solid #aaaaaa;
border-radius: 4px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#d2d0d0), to(#f0f0f0));
background-image: -moz-linear-gradient(90deg, #d2d0d0 0%, #f0f0f0 100%);
}
A.K.A The "Clearfix" hack.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */Just apply a class="clearfix" to the parent element. This is an improved version of the original, and documented here.
Updated by Jeff Starr to be cleaner, based on the fact that nobody uses IE for Mac, which is what the backslash hack was all about.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */Updated again... "group" class name is nicer and more semantic (via Dan Cederholm). Content property doesn't even need the space, can be empty string (via Nicolas Gallagher). Without any text, font-size is un-needed (Chris Coyier).
.group:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */Of course if you drop IE 6 or 7 support, remove the associated lines.
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}Update August 2012: I'd say for the most part these days (if you only need IE 8 and up) this is fine:
.group:after {
content: "";
display: table;
clear: both;
}
/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
body {
font: font-style font-variant font-weight font-size/line-height font-family;
}body {
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
}
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 */
}
Just wrap the first character of the paragraph in a span, then target the span with CSS and style away.
<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }Target the first character of the first paragraph using pseudo class selectors. No extra markup needed, but no IE < 9 support.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
#example-gradient {
height: 200px;
margin: 0 0 20px 0;
background-color: #eaeaea;
background-size: 20px 20px;
background-image:
-webkit-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
-webkit-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
background-image:
-moz-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
-moz-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
background-image:
-o-repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
-o-repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
background-image:
repeating-linear-gradient(45deg, rgba(0, 191, 255, .5), rgba(0, 191, 255, .5) 1px, transparent 1px, transparent 15px),
repeating-linear-gradient(-45deg, rgba(255, 105, 180, .5), rgba(255, 105, 180, .5) 1px, transparent 1px, transparent 15px);
}Based on original code from Christopher Burton. Also and example "without the dot".
#foo:checked::before,
input[type="checkbox"] {
position:absolute;
clip: rect(0,0,0,0);
clip: rect(0 0 0 0);
}
#foo:checked,
input[type="checkbox"] + label::before {
content: url('checkbox.png');
}
input[type="checkbox"]:checked + label::before {
content: url('checkbox-checked.png');
}#foo doesn't reference any particular element, it's there purely to prevent browsers from implementing the later selectors if it doesn't understand that (since most browsers will drop the entire selector if any part of it fails).
<input type="file" class="custom-file-input">.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}See the Pen Custom File Inputs in WebKit/Blink by Chris Coyier (@chriscoyier) on CodePen
Fair warning: it doesn't show you the file name selected, but you might be able to tweak it to do that. I find typically these days you're triggering an event after file selection and snagging the data that way anyway.
The selectors here are specific to Wufoo markup, but the concepts at work can work for any form. The overall idea is that you make the default radio buttons and checkboxes invisible by setting their opacity to zero, and replace them with graphics. Then use the :checked selector to alternate the graphics between their checked and unchecked versions.
/*
Hide the original radios and checkboxes
(but still accessible)
:not(#foo) > is a rule filter to block browsers
that don't support that selector from
applying rules they shouldn't
*/
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
/* Hide the input, but have it still be clickable */
opacity: 0;
float: left;
width: 18px;
}
li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
margin: 0;
clear: none;
/* Left padding makes room for image */
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(off.png) left center no-repeat;
}
/*
Change from unchecked to checked graphic
*/
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
background-image: url(check.png);
}
tbody tr:nth-child(odd) {
background-color: #ccc;
}
You can make them with a single div. It's nice to have classes for each direction possibility.
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}Dave Everitt writes in:
For an equilateral triangle it's worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width
Regular text shadow:
p { text-shadow: 1px 1px 1px #000; }Multiple shadows:
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:
1. value = The X-coordinate
2. value = The Y-coordinate
3. value = The blur radius
4. value = The color of the shadow
Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).
The third value, the blur radius, is an optional value which can be specified but don’t have to. It’s the amount of pixels the text is stretched which causes a blur effect. If you don’t use the third value it is treated as if you specified a blur radius of zero.
Also, remember you can use RGBA values for the color, for example, a 40% transparency of white:
p { text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); }
One big reason to use image preloading is if you want to use an image for the background-image of an element on a mouseOver or :hover event. If you only apply that background-image in the CSS for the :hover state, that image will not load until the first :hover event and thus there will be a short annoying delay between the mouse going over that area and the image actually showing up.
Load the image on the element's regular state, only shift it away with background position. Then move the background position to display it on hover.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }If the element in question already has a background-image applied and you need to change that image, the above won't work. Typically you would go for a sprite here (a combined background image) and just shift the background position. But if that isn't possible, try this. Apply the background image to another page element that is already in use, but doesn't have a background image.
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }The idea create new page elements to use for this preloading technique may pop into your head, like #preload-001, #preload-002, but that's rather against the spirit of web standards. Hence the using of page elements that already exist on your page.
I had the idea to try to and use the same element, only use the :after pseduo-class to load the image, so you didn't need to rely on there being enough extraneous background-free images on your page to work with, but for whatever reason didn't want to preload them properly.
Check this article out for some more techniques, including JavaScript.
html>/**/body .selector, x:-moz-any-link {
color:lime;
}html>/**/body .selector, x:-moz-any-link, x:default {
color:lime;
}@-moz-document url-prefix() {
.selector {
color:lime;
}
}
Arial, sans-serif;
Helvetica, sans-serif;
Gill Sans, sans-serif;
Lucida, sans-serif;
Helvetica Narrow, sans-serif;
sans-serif;
Times, serif;
Times New Roman, serif;
Palatino, serif;
Bookman, serif;
New Century Schoolbook, serif;
serif;
Andale Mono, monospace;
Courier New, monospace;
Courier, monospace;
Lucidatypewriter, monospace;
Fixed, monospace;
monospace;
Comic Sans, Comic Sans MS, cursive;
Zapf Chancery, cursive;
Coronetscript, cursive;
Florence, cursive;
Parkavenue, cursive;
cursive;
Impact, fantasy;
Arnoldboecklin, fantasy;
Oldtown, fantasy;
Blippo, fantasy;
Brushstroke, fantasy;
fantasy;
Find mistakes in HTML and highlight the crap out of them.
/* Empty Elements */
div:empty, span:empty, li:empty, p:empty, td:empty, th:empty
{ padding: 20px; border: 5px dotted yellow !important; }
/* Empty Attributes */
*[alt=""], *[title=""], *[class=""], *[id=""], a[href=""], a[href="#"]
{ border: 5px solid yellow !important; }
/* Deprecated Elements */
applet, basefont, center, dir, font, isindex, menu, s, strike, u
{ border: 5px dotted red !important; }
/* Deprecated Attributes */
*[background], *[bgcolor], *[clear], *[color], *[compact], *[noshade], *[nowrap], *[size], *[start],
*[bottommargin], *[leftmargin], *[rightmargin], *[topmargin], *[marginheight], *[marginwidth], *[alink], *[link], *[text], *[vlink],
*[align], *[valign],
*[hspace], *[vspace],
*[height], *[width],
ul[type], ol[type], li[type]
{ border: 5px solid red !important; }
/* Proposed Deprecated Elements */
input[type="button"], big, tt
{ border: 5px dotted #33FF00 !important; }
/* Proposed Deprecated Attributes */
*[border], a[target], table[cellpadding], table[cellspacing], *[name]
{ border: 5px solid #33FF00 !important; }div:empty, span:empty,
li:empty, p:empty,
td:empty, th:empty {padding: 0.5em; background: yellow;}
*[style], font, center {outline: 5px solid red;}
*[class=""], *[id=""] {outline: 5px dotted red;}
img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}
img[title=""] {outline: 3px dotted fuchsia;}
img:not([title]) {outline: 5px solid fuchsia;}
table:not([summary]) {outline: 5px solid red;}
table[summary=""] {outline: 3px dotted red;}
th {border: 2px solid red;}
th[scope="col"], th[scope="row"] {border: none;}
a[href]:not([title]) {border: 5px solid red;}
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}
Used in casting shadows off block-level elements (like divs).
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}.shadow {
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}You need extra elements...
<div class="shadow1">
<div class="content">
Box-shadowed element
</div>
</div>.shadow1 {
margin: 40px;
background-color: rgb(68,68,68); /* Needed for IEs */
-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
zoom: 1;
}
.shadow1 .content {
position: relative; /* This protects the inner element from being blurred */
padding: 100px;
background-color: #DDD;
}Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box.
.one-edge-shadow {
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}box-shadow.
div {
min-height: 500px;
height:auto !important;
height: 500px;
}This works because (thankfully?) IE treats "height" how "min-height" is supposed to be treated.
Source: Dustin Diaz
div {
height: expression( this.scrollHeight < 501 ? "500px" : "auto" );
}Sets the minimum height in IE to be 500px. Make sure that this.scrollHeight < 501 is 1 px greater than the minimum height that you want or you will get some strange results.
hr {
border : 0;
height : 15px;
background : url(hr.gif) 50% 0 no-repeat;
margin : 1em 0;
}hr {
display : list-item;
list-style : url(hr.gif) inside;
filter : alpha(opacity=0);
width : 0;
}
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}Reference/Explanation here and here.
<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
Start your CSS files with this PHP (and name it style.php):
<?php
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " .
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
body { color: red; }Then call your CSS with the PHP file name:
<link rel='stylesheet' type='text/css' href='css/style.php' />
a[href^="mailto:"]:before { content: "\2709"; }
.phone:before { content: "\2706"; }
.important:before { content: "\27BD"; }
blockquote:before { content: "\275D"; }
blockquote:after { content: "\275E"; }
.alert:before { content: "\26A0"; }<p>
<a href="mailto:chriscoyier@gmail.com">
chriscoyier@gmail.com
</a>
</p>
<p class="phone">
555-555-5555
</p>
<p class="important">
REMEMBER: drink slushies too fast.
</p>
<blockquote>
Designers tend to whisper, ad agencies tend to shout.
</blockquote>
<p class="alert">
Stranger Danger!
<p>
body {
font-size: 62.5% /* 1em = 10px */
}The stuff inside the /* */ marks are CSS comments. This allows you to enter notes into CSS that will not be interpreted. In this case, this comment lets someone reading the CSS file know that that particular line of CSS was intended to allow for using ems to set font size later in the CSS in a more intuitive base 10 way.
/* Mozilla based browsers */
::-moz-selection {
background-color: #FFA;
color: #000;
}
/* Works in Safari */
::selection {
background-color: #FFA;
color: #000;
}