2 Comments
Tips & Tricks

There are those times when you want to achieve an effect in your web design that is quite possible to do with Photoshop, but you just want to do with pure CSS. If that’s ever the case, then here’s a plethora of CSS snippets for you to use (if that’s not the case, you probably need to start coding more).

Other snippets that don’t substitute for Photoshop are just convenient and probably useful (to some extent).

1. Transparency for everybody

For backgrounds, I still utilize alpha transparency (despite IE6′s lack of support), but for simpler hover overs, CSS is the best tool.

1
2
3
4
5
6
.nudist {
	opacity: 0.5;           /* safari, opera */
	filter: alpha(opacity=50); /* internet explorer */
	-khtml-opacity: 0.5;      /* khtml, safari */
	-moz-opacity: 0.5;       /* firefox / mozilla */
}

2. Bring it up front

Sometimes, containers fly to the background or are partially obstructed by another element. This rings particularly true with fixed userbars at the top of the screen since they precede all the other elements on the page. In this case, use z-index to force stack positioning.

1
2
3
4
.stacky {
	position: relative; /* also absolute or fixed */
	z-index: 9999; /* controls its stacked position */
}

The higher the z-index, the further in front it will be. For example, if element-1has a z-index of 5000 and element-2has a z-index of 7500, element-2 will stack on top of element-1. Negative values are allowed as well.

3. Style links – based on function

This will do exactly what it sounds like it does: style links based upon its type and function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a { padding-right: 18px; }
 
/* external links */
a[href^="http://"] {
	background: url(link.png) no-repeat center right;
}
 
/* emails */
a[href^="mailto:"] {
	background: url(email.png) no-repeat center right;
}
 
/* pdfs */
a[href$=".pdf"] {
	background: url(pdf.png) no-repeat center right;
}
 
/* png images */
a[href$=".png"] {
	background: url(image.png) no-repeat center right;
}

A little bonus for distinguishing between links that open in current window vs. new window:

1
2
3
4
5
6
7
8
a[target="_blank"]:after,
a[target="new"]:after {
	margin: 0 0 0 4px;
	padding: 1px;
	color: #333;
	font-size: 12px;
	content: "\00BB"; /* custom double arrow symbol */
}

4. Fancy drop caps

Wish to achieve that effect in old English newspapers? Style the first letter and give it a bit of distinction? Here are two ways:

This one is done by manually applying the class topdog to the first letter. Benefits include compatibility across all browsers. The HTML part first..

1
<span class="topdog">P</span>otato chips are quite enjoyable.</span>

..and now the CSS part..

1
2
3
4
5
6
7
8
.topdog {
	float: left;
	color: #222; 
	font-size: 70px; 
	line-height: 50px; 
	padding: 4px 6px;
	font-family: Georgia, Times New Roman;
}

The other method employs CSS3 by using specific selectors to trace down the first letter:

1
2
3
4
5
6
7
8
p:first-child:first-letter {
	float: left;
	color: #222; 
	font-size: 70px; 
	line-height: 50px; 
	padding: 4px 6px;
	font-family: Georgia, Times New Roman;
}

Keyword: CSS3 – so don’t try this on browsers that don’t support CSS3, or IE9.

5. Foolproof, bulletproof, time-tested custom font option of extreme greatness

I cannot emphasize enough how useful this is. In fact, this very site uses this method of custom font implementation – one far surpassing that of image replacement alternatives such as Cufont.

1
2
3
4
5
6
7
@font-face {
	font-family: 'FontMonster'; 
	src: url('fontmonster.web.eot?#iefix') format('embedded-opentype'), 
	     url('fontmonster.web.woff') format('woff'), 
	     url('fontmonster.web.ttf')  format('truetype'),
	     url('fontmonster.web.svg#svgFontName') format('svg');
}

Best site to auto generate the stylesheets and files? Font Squirrel.

6. A little shadow

By now, box shadows should be pretty well known and used, but I decided to include it anyways.

1
2
3
4
5
.shadowy {
box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 1px 3px 3px rgba(0,0,0,0.3);
}

7. Nice and round

Along with the box shadows, rounded corners are also well known – but useful nonetheless.

1
2
3
4
5
6
.rounded {
   border-radius: 10px; /* future proofing */
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   -khtml-border-radius: 8px; /* for old Konqueror browsers */
}

8. Selection colors for you and me

You know the default blue that is shown in the background of text highlighted? Well, now you can be in control of that too.

1
2
3
4
5
6
7
8
::selection {
   background: #333; /* Safari */
        color: #efefef;
   }
::-moz-selection {
   background: #333; /* Firefox */
        color: #efefef;
   }

9. Load image (to let people know something’s loading)

Put something in the background of images while they’re loading – loading images obtainable here.

1
2
3
img {
   background: url(loader.gif) no-repeat center center;
}

This tip is also applicable to banner ads (as seen at Songr with AdBlock on – I know, shameless plug). Simply put a background with “Hey, AdBlock kills our revenues” or something similar and wrap the ad in that class (don’t use the word “ad” in the class name, as it will be blocked by AdBlocks – be creative, I like combining colors with animals).

10. Reset styles, consistent across browsers (Eric Meyers’ reset) – kind of CSS snippets

This beautiful piece of code resets element styles across all browsers to ensure cross-browser consistency. Just include this as reset.css, or put this at the top of your stylesheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
 
body {
line-height: 1;
}
 
ol, ul {
list-style: none;
}
 
blockquote, q {
quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
 
/* remember to define focus styles! */
:focus {
outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
 
del {
text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

Conclusion

This list shouldn’t constitute the majority of your CSS snippet tookbox, rather, it should be your spring board to seek out more. A couple places to start include Snipplr and CSS-Trick’s own CSS gallery. If I missed a CSS snippet, don’t hesitate to drop a comment below.

Changry

Changry is a blog dedicated to providing resources to developers, designers, and webmasters alike. In other words, it’s a place for me to dump my thoughts in a way that people can enjoy (or at least tolerate).
Changry

Peanut Gallery (join in)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>