CSS : One-Shots

What is a One-Shot?

One-shot is a term I’ve coined from a software application, Sony Acid Pro®, one of the music-recording industry standard applications for creative audio sample looping. Some Acid Pro® loops, such as a drum cymbal crash, for example, would be considered a one-shot. A one-shot is something which tends to be used once, if not at least separated from other occurrences of itself. A drum-beat, or bass-line would not be a one-shot, just as the larger affectations of your stylesheet would be less a one-shot than a global contribution of applied styles.

The CSS One-shots here are compiled from a collection of particular solutions to perhaps sticky situations, where a bit more finesse and creativity– a torquing of the power of CSS is needed to result in the desired special effect for any given section of a layout. Some of the one-shots are answers to problems, while others simply hold some neat-o-factor value. A cursory glance through the section headings below is the best way to understand whether there is anything here which you may find of value.

²The dynamic pseudo-classes:
:hover, :active, and :focus

Example(s):

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the ‘color’ property of the A:hover
rule. Similarly, because A:active is placed after A:hover, the active
color (lime) will apply when the user both activates and hovers over
the A element.

Example(s):

An example of combining dynamic pseudo-classes:

a:focus { background: yellow }
a:focus:hover { background: white }

The last selector matches A elements that are in pseudo-class
:focus and in pseudo-class :hover.

Tab-like Paragraph First Word(s)

This is very simple, but at least it gets the page going. The example can be viewed here.

I wanted to make the first word of the paragraph “stand-out” from the rest of it– very much like the way a tab might in an old-style vertical filing cabinet. I decided to solve the problem with the following code:

.warning,
.warning a,
.warning a sup {
 background-color:#A13;
 color:#FFF;
 padding:0.3em;
 margin:0.2em;
 letter-spacing:1px;
}

²Dynamic Pseudo-Classes, CSS Level 2, Rev.1; World Wide Web Consortium; Working Draft Nov-06, 2006; Available at: http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes ; Accessed: May-20, 2007.