With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison.
For this article I want to present 10 handy CSS2/CSS3 code snippets for any web professional. These are perfect for storing in your development IDE of choice, or even keeping them saved in a small CSS file. Either way I am sure designers & developers can find some use for some of the snippets in this collection.
11. Polaroid Image Border
img.polaroid {
background: #000; /*Change this to a background image or remove*/
border: solid #fff;
border-width: 6px 6px 20px 6px;
box-shadow: 1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
-webkit-box-shadow: 1px 1px 5px #333;
-moz-box-shadow: 1px 1px 5px #333;
height: 200px; /*Set to height of your image or desired div*/
width: 200px; /*Set to width of your image or desired div*/
}
Applying this basic snippet will allow you to implement .polaroid classes onto your images. This will create the old photo-style effect with a large white border and some slight box shadows. You’ll want to update the width/height values to match that of your image dimensions and website layout.
12. Anchor Link Pseudo Classes
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
Most CSS developers know about the anchor link styles and :hover effects. But I wanted to include this small code snippet as a reference for newcomers. These are the four default states for an anchor link, and also a few other HTML elements. Keep this handy until you can memorize some of the more obscure ones.
13. Fancy CSS3 Pull-Quotes
.has-pullquote:before {
/* Reset metrics. */
padding: 0;
border: none; /* Content */
content: attr(
data-pullquote
); /* Pull out to the right, modular scale based margins. */
float: right;
width: 320px;
margin: 12px -140px 24px 36px; /* Baseline correction */
position: relative;
top: 5px; /* Typography (30px line-height equals 25% incremental leading) */
font-size: 23px;
line-height: 30px;
}
.pullquote-adelle:before {
font-family: "adelle-1", "adelle-2";
font-weight: 100;
top: 10px !important;
}
.pullquote-helvetica:before {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
.pullquote-facit:before {
font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
font-weight: bold;
top: 7px !important;
}
Pull-quotes are different from blockquotes in that they appear off to the side of your blog or news article. These often reference quoted text from the article, and so they appear slightly different than blockquotes. This default class has some basic properties along with 3 unique font families to choose from.
14. Fullscreen Backgrounds with CSS3
html {
background: url("images/bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I should note that this code will not work properly in older browsers which do not support CSS3 syntax. However if you’re looking for a quick solution and don’t care about legacy support, this is the best chunk of code you’ll find! Great for adding big photographs into the background of your website while keeping them resizable and fixed as you scroll.
15. Vertically Centered Content
.container {
min-height: 6.5em;
display: table-cell;
vertical-align: middle;
}
Using the margin: 0 auto technique it is very easy to embed content into the horizontal center of your page. However vertical content is a lot harder, especially considering scrollbars and other methods. But this is a pure CSS solution which should work flawlessly without JavaScript.
16. Force Vertical Scrollbars
html {
height: 101%;
}
When your page content doesn’t fill the entire height of your browser window then you don’t end up getting any scrollbars. However resizing will force them to appear and append an extra 10-15 pixels to the width of your window, pushing over your webpage content. This snippet will ensure your HTML element is always just a little bit higher than the browser which forces scrollbars to stay in place at all times.
17. CSS3 Gradients Template
#colorbox {
background: #629721;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
from(#83b842),
to(#629721)
);
background-image: -webkit-linear-gradient(top, #83b842, #629721);
background-image: -moz-linear-gradient(top, #83b842, #629721);
background-image: -ms-linear-gradient(top, #83b842, #629721);
background-image: -o-linear-gradient(top, #83b842, #629721);
background-image: linear-gradient(top, #83b842, #629721);
}
CSS3 gradients are another wondrous part of the newer specifications. Many of the vendor prefixes are difficult to memorize, so this code snippet should save you a bit of time on each project.
18. @ font-face Template
@font-face {
font-family: "MyWebFont";
src: url("webfont.eot"); /* IE9 Compat Modes */
src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("webfont.woff") format("woff"),
/* Modern Browsers */ url("webfont.ttf") format("truetype"), /* Safari, Android, iOS */
url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}
body {
font-family: "MyWebFont", Arial, sans-serif;
}
Here is another bit of CSS3 code which isn’t the easiest to memorize. Using @ font-face you may embed your own TTF/OTF/SVG/WOFF files into your website and generate custom font families. Use this template as a base example for your own projects in the future.
19. Stitched CSS3 Elements
p {
position: relative;
z-index: 1;
padding: 10px;
margin: 10px;
font-size: 21px;
line-height: 1.3em;
color: #fff;
background: #ff0030;
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10, 10, 0, 0.5);
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10, 10, 0, 0.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
p:before {
content: "";
position: absolute;
z-index: -1;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border: 2px dashed #fff;
}
p a {
color: #fff;
text-decoration: none;
}
p a:hover,
p a:focus,
p a:active {
text-decoration: underline;
}
20. CSS3 Zebra Stripes
tbody tr:nth-child(odd) {
background-color: #ccc;
}
Possibly the best item to include zebra stripes is within a table of data. It can be difficult when users are scanning 40 or 50 rows to determine exactly which cell is lined up to which row. By adding zebra stripes on default we can update odd rows with varying background colors.
Final Thoughts
The frontend style language for websites has grown into a majority controller on the World Wide Web. The W3C has put out public specs for HTML5 and CSS3, deeming them as the default languages for constructing websites. Both experienced and new developers should be able to enjoy this collection and hopefully find some useful codes.
All readers should be able to copy and save any of these snippets without a required attribution. Mostly all CSS codes released today are held under open source licenses and offered free, based on the publication. If you have thoughts or questions about this collection feel free to share with us in the comments discussion area below.