All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Note the …
As a follow up to asking people if they are using HTML5 or not, I asked the people who are:
…What features of HTML5 have you used on production sites?
Shadow along the top edge of the website, like this:
body::before {
content: "";
position: fixed;
top: -10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.8);
z-index: 100;
}When designing for print, having a properly calibrated monitor makes all the sense in the world. If done perfectly, what you see on the monitor should look like what you get on paper from a printer. No surprises.
When designing …
Creating an image rollover is pretty easy with CSS. Give the element a background-image, then on it’s :hover, change the background-image. It’s best practice to combine both images into one and shift the background-position rather than use two …
Just in case anyone doesn’t read Smashing Magazine, Eric Meyer has a long excerpt from his latest CSS book here which is loaded with good stuff. I particularly liked the bit about clearing :nth-child elements combined with media queries.…
Make the text color transparent but add a shadow:
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}Blurry
More browsers support color than text-shadow though, so you might want to do feature detection. Or, leave the color …
Put a file called “db-error.php” directly inside your /wp-content/ folder and WordPress will automatically use that when there is a database connection problem.
<?php // custom WordPress database error page
header('HTTP/1.1 503 Service Temporarily Unavailable');
header('Status: 503 Service Temporarily Unavailable');
.stitched {
padding: 20px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 10px;
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
