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;
}

Example

Reference URL

Email This BlogThis! Share to X Share to Facebook

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!

Email This BlogThis! Share to X Share to Facebook

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); }

Reference URL

Email This BlogThis! Share to X Share to Facebook

Standard:

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

Individual Corners:

-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;

Shorthand:

-moz-border-radius: [top-left] [top-right] [bottom-right] [bottom-left]

-moz-border-radius: 10px 20px 30px 0;

Elliptical Rounding (Firefox 3.5+):

-moz-border-radius-topleft: [horizontal radius] [vertical radius];

-moz-border-radius-topleft: 10px 40px;

Elliptical Rounding Shorthand (Firefox 3.5+):

-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;

WebKit Elliptical Rounding

All corners:

-webkit-border-radius: 36px 12px;

Right corners only:

-webkit-border-top-right-radius: 50px 30px; 
-webkit-border-bottom-right-radius: 50px 30px;

Reference URL

Email This BlogThis! Share to X Share to Facebook

<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;
}

Protector

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; }

Example

Everybody loves ribbons

Reference URL

Email This BlogThis! Share to X Share to Facebook

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);
}

Reference URL

Email This BlogThis! Share to X Share to Facebook

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 */
}

Old Stuff (don't use, keeping for posterity)

@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:

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 */

}

Reference URL

Email This BlogThis! Share to X Share to Facebook