50 Useful CSS Snippets Every Designer Should Have

Keeping pace with the ever-evolving web design trends can be challenging. Web designers and front-end developers are deeply involved in exploring CSS3 properties, ensuring cross-browser compatibility and finding innovative solutions. However, many valuable CSS2 snippets also exist, often overshadowed by the newer ones.

In this article, I’m excited to share 50 useful CSS2/CSS3 code snippets that are must-haves for web professionals. These snippets are great for integrating into your development IDE or keeping in a CSS file. They are practical tools that designers and developers will find invaluable in their work.

Read Also:  20 Basic CSS Tips for Designers

Table of Content:

CSS Resets

Basic CSS resets are a staple found in many online resources. This snippet, which I’ve customized, is inspired by Eric Meyer’s reset codes. It includes responsive image settings and applies the border-box model to all core elements for consistent margin and padding measurements.

/* Resetting Styles */
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, 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, article,
aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Set HTML height to 101% */
html {
  height: 101%;
}

/* Basic Body Styles */
body {
  font-size: 62.5%;
  line-height: 1;
  font-family: Arial, Tahoma, sans-serif;
}

/* Block-Level Elements */
article, aside, details, figcaption, figure, footer, header,
hgroup, menu, nav, section {
  display: block;
}

/* Lists */
ol, ul {
  list-style: none;
}

/* Quotes */
blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

/* Strong Text */
strong {
  font-weight: bold;
}

/* Table Styles */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Images */
img {
  border: 0;
  max-width: 100%;
}

/* Paragraph Styles */
p {
  font-size: 1.2em;
  line-height: 1.0em;
  color: #333;
}

Classic CSS Clearfix Technique

This traditional CSS clearfix method is widely known among expert web developers. Use this clearfix class on a container that includes elements with float properties. It ensures that subsequent content is properly pushed down and cleared, rather than floating.

/* Clearfix */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

Updated Clearfix Approach

The newer version of clearfix doesn’t show significant differences in how it’s rendered compared to the classic method. Both versions effectively clear floats, ensuring compatibility across modern browsers, including older versions like Internet Explorer 6-8.

/* Clearfix and Container Styles */
.clearfix:before, .container:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

Implementing Cross-Browser Transparency in CSS

While CSS3 properties like opacity are convenient, they’re not universally compatible yet. By adding the filter property, you can ensure older Internet Explorer versions also display transparency correctly.

/* Transparent Class */
.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5; /* KHTML, old Safari */
  -moz-opacity: 0.5; /* Mozilla, Netscape */
  opacity: 0.5; /* Firefox, Safari, Opera */
}

Styling CSS Blockquotes for Visual Appeal

Blockquotes are essential for highlighting quotes or specific content on blogs and web pages. This CSS snippet provides a basic yet appealing style for your blockquotes, making them stand out rather than blend in.

/* Blockquote Styles */
blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: .5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: .1em;
  margin-right: .25em;
  vertical-align: -.4em;
}

blockquote p {
  display: inline;
}

Creating Individually Rounded Corners with CSS

For developers looking to customize the rounded corners on elements, this code snippet is a lifesaver. It includes both a compact format and a detailed version, where each corner’s radius is individually set.

/* Container Styles */
#container {
  -webkit-border-radius: 4px 3px 6px 10px;
  -moz-border-radius: 4px 3px 6px 10px;
  -o-border-radius: 4px 3px 6px 10px;
  border-radius: 4px 3px 6px 10px;
}

#container {
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-right-radius: 6px;
  -webkit-border-bottom-left-radius: 10px;

  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomright: 6px;
  -moz-border-radius-bottomleft: 10px;
}

Essential Media Queries for Various Devices

Find this comprehensive template on CSS-Tricks, perfect for a wide range of media queries. It’s fully equipped to target numerous real-world mobile devices, including retina-based devices using min-device-pixel-ratio.

/* Smartphones (portrait and landscape) */
@media only screen 
and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}

/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

/* Large screens */
@media only screen and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

Contemporary Font Stacks for Web Design

Selecting the right CSS font stacks for new webpages can be challenging. These examples provide a solid starting point. For more options, visit CSS Font Stacks, a fantastic resource for web designers.

/* Times New Roman-based serif */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* A modern Georgia-based serif */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* A traditional Garamond-based serif */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* The Helvetica/Arial-based sans serif */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* The Verdana-based sans serif */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* The Trebuchet-based sans serif */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/* The heavier "Impact" sans serif */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* The monospace */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Customizing Text Selection Color on Webpages

Modern browsers allow you to customize the highlight color on your webpages. While the default is light blue, you can choose any color. This snippet covers ::selection along with vendor-specific prefixes for Webkit and Mozilla browsers.

/* Text Selection Styles */
::selection {
  background: #e2eae2;
}

::-moz-selection {
  background: #e2eae2;
}

::-webkit-selection {
  background: #e2eae2;
}

SEO-Friendly Technique for Hiding Text with a Logo

This method, first seen on the old Digg layout, involves setting up an H1 tag with your site’s name for SEO, while using CSS to hide the text and replace it with a custom logo image.

/* Header Logo Styles */
h1 {
  text-indent: -9999px;
  margin: 0 auto;
  width: 320px;
  height: 85px;
  background: transparent url("images/logo.png") no-repeat scroll;
}

CSS3 Polaroid Image Effect

By using the .polaroid class, you can give your images a nostalgic Polaroid-style effect with a prominent white border and subtle box shadows. Adjust the width and height to fit your images and layout.

/* Polaroid Image Styles */
img.polaroid {
  background: #000; /* Optional: Change 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 size */
  width: 200px; /* Set to width of your image or desired size */
}

Styling Anchor Link States in CSS

While experienced CSS developers might be familiar with anchor link styles, this snippet is a handy reference for beginners. It covers the four primary states of an anchor link, useful for both newcomers and as a quick reminder.

/* Link Styles */
a:link {
  color: blue;
}

/* Visited Link Styles */
a:visited {
  color: purple;
}

/* Hovered Link Styles */
a:hover {
  color: red;
}

/* Active Link Styles */
a:active {
  color: yellow;
}

Creating Fancy CSS3 Pull-Quotes

Pull-quotes, distinct from blockquotes, are designed to stand out alongside your blog or article content. This default class comes with basic properties and offers three unique font family options to enhance the visual appeal of pull-quotes.

/* Pullquote Styles */
.has-pullquote:before {
  /* Reset metrics */
  padding: 0;
  border: none;

  /* Content */
  content: attr(data-pullquote);

  /* Pull out to the right, with margins */
  float: right;
  width: 320px;
  margin: 12px -140px 24px 36px;

  /* Baseline correction */
  position: relative;
  top: 5px;

  /* Typography */
  font-size: 23px;
  line-height: 30px;
}

/* Pullquote Adelle Styles */
.pullquote-adelle:before {
  font-family: "adelle-1", "adelle-2";
  font-weight: 100;
  top: 10px !important;
}

/* Pullquote Helvetica Styles */
.pullquote-helvetica:before {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  top: 7px !important;
}

/* Pullquote Facit Styles */
.pullquote-facit:before {
  font-family: "facitweb-1", "facitweb-2", Helvetica, Arial, sans-serif;
  font-weight: bold;
  top: 7px !important;
}

CSS3 Fullscreen Backgrounds

Note that this code might not function correctly in older browsers lacking CSS3 support. However, for modern designs, it’s an excellent solution for incorporating large, resizable, and fixed scrolling background photographs into your website.

/* HTML Background Styles */
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;
}

Centrally Aligning Content Vertically

Centering content horizontally is straightforward, but vertically aligning it can be more challenging, especially when considering scrollbars and other factors. This CSS solution offers a hassle-free way to center content vertically without using JavaScript.

/* Container Styles */
.container {
  min-height: 6.5em;
  display: table-cell;
  vertical-align: middle;
}

Ensuring Persistent Vertical Scrollbars

When your page content doesn’t fill the entire height of the browser window, scrollbars may not appear. However, this snippet ensures that the HTML element is always slightly taller than the browser, maintaining the presence of vertical scrollbars at all times.

/* HTML Styles */
html {
  height: 101%;
}

CSS3 Gradient Template

CSS3 gradients add a dynamic element to web design. This template covers various vendor prefixes, saving time and ensuring cross-browser compatibility for gradient effects.

/* Colorbox Styles */
#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);
}

Using the @font-face Rule in CSS3

This @font-face example is a handy reference for embedding custom TTF, OTF, SVG, and WOFF font files into websites. Use this template as a foundation for incorporating unique font families in your web design projects.

/* Define Web Font */
@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 Styles with Web Font */
body {
  font-family: 'MyWebFont', Arial, sans-serif;
}

Stitched Look with CSS3

This CSS code styles paragraph elements with a red background, white text, and a white dashed border inside a shadowed box, while also styling links within paragraphs to be white with an underline on hover, focus, or active state.

/* Paragraph Styles */
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, .5);
  -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10, 10, 0, .5);
  box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, .5);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

/* Paragraph Border Styles */
p:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 3px;
  right: 3px;
  border: 2px dashed #fff;
}

/* Paragraph Link Styles */
p a {
  color: #fff;
  text-decoration: none;
}

/* Paragraph Link Hover, Focus, and Active Styles */
p a:hover, p a:focus, p a:active {
  text-decoration: underline;
}

Enhancing Tables with CSS3 Zebra Stripes

Zebra stripes in tables enhance readability, especially in large data sets. This CSS trick colors odd rows differently, aiding users in aligning cells with the correct rows.

/* Odd-Numbered Rows in tbody */
tbody tr:nth-child(odd) {
  background-color: #ccc;
}

Styling the Ampersand with Elegance

This class, applied to a span element around an ampersand, enhances its appearance with classic serif fonts and italics, giving a touch of elegance to your web content.

/* Amp Styles */
.amp {
  font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
  font-style: italic;
  font-weight: normal;
}

Drop Cap Effect for Paragraphs

Often seen in print media, drop caps can add a sophisticated touch to web pages or blogs. This CSS rule targets the first letter of paragraphs to create a drop cap effect, enhancing the visual appeal of your content.

/* First Letter of Paragraph Styles */
p:first-letter {
  display: block;
  margin: 5px 0 0 5px;
  float: left;
  color: #ff3366;
  font-size: 5.4em;
  font-family: Georgia, Times New Roman, serif;
}

Inner Shadow Effect with CSS3

Box shadow properties transform website design, adding depth and character to elements. This code snippet creates an inner shadow, a sophisticated effect that, when used appropriately, can enhance the aesthetics of your design.

#mydiv {
  -moz-box-shadow: inset 2px 0 4px #000;
  -webkit-box-shadow: inset 2px 0 4px #000;
  box-shadow: inset 2px 0 4px #000;
}

Outer Shadow Effect with CSS3

Complementing inner shadows, outer shadows add another dimension to your web elements. The blur and spread parameters in the syntax can be adjusted for different effects. Learn more about these values at W3Schools.

#mydiv {
  -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
  -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}

CSS3 Triangle-Shaped List Bullets

Creating triangle-shaped bullets in CSS3 is a unique technique that looks impressive in modern browsers. Although it lacks support for fallback methods, it’s a creative way to style lists for an enhanced visual impact.

ul {
  margin: 0.75em 0;
  padding: 0 1em;
  list-style: none;
}

li:before {
  content: "";
  border-color: transparent #111;
  border-style: solid;
  border-width: 0.35em 0 0.35em 0.45em;
  display: block;
  height: 0;
  width: 0;
  left: -1em;
  top: 0.9em;
  position: relative;
}

Creating a Centered Layout with Fixed Width

Earlier, we discussed horizontal positioning. Here’s a quick snippet for horizontally centering a fixed-width layout, ensuring your page content is perfectly aligned.

#page-wrap {
  width: 800px;
  margin: 0 auto;
}

Implementing CSS3 Text Columns

Use CSS3 columns to divide text into multiple, evenly distributed sections, enhancing the layout and readability of your website. This snippet allows for any number of columns, aligning your text neatly within each.

#columns-3 {
  text-align: justify;
  -moz-column-count: 3;
  -moz-column-gap: 12px;
  -moz-column-rule: 1px solid #c4c8cc;
  -webkit-column-count: 3;
  -webkit-column-gap: 12px;
  -webkit-column-rule: 1px solid #c4c8cc;
}

Styling a Fixed Footer with CSS

Adding a fixed footer to your website can be more beneficial than it seems. It scrolls with the user, providing easy access to useful information or contact details. This technique is best used when it enhances the user experience.

#footer {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 30px;
  width: 100%;
  background: #444;
}

/* IE 6 */
position: absolute;
top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');

Fix for Transparent PNGs in IE6

Transparent PNGs are common in web design, but older versions of Internet Explorer don’t support their transparency. This CSS snippet provides a workaround for IE6, ensuring transparent PNGs display correctly.

.bg {
  width: 200px;
  height: 100px;
  background: url(/folder/yourimage.png) no-repeat;
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png', sizingMethod='crop');
}

/* 1px gif method */
img, .png {
  position: relative;
  behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
  this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
  this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
  this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
  this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}

Ensuring Minimum Height Cross-Browser Compatibility

Working with `min-height` can be tricky due to inconsistent browser support. This code ensures compatibility across browsers, including older versions of Internet Explorer and Firefox, for reliable minimum height styling.

#container {
  min-height: 550px;
  height: auto !important;
  height: 550px;
}

Glowing Input Fields in CSS3

This CSS3 class alters default browser input outlines, particularly noticeable in Chrome and Safari. It introduces a glowing effect to input fields, enhancing the user interface with a modern, interactive design.

input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #ddd;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

Custom Link Styles Based on File Type

This creative CSS technique allows styling links based on their file type or protocol using CSS selectors. It enhances user experience by visually indicating the type of content linked, such as external links, email addresses, or PDF files.

/* external links */
a[href^="http:/"] {
  padding-right: 13px;
  background: url('external.gif') no-repeat center right;
}

/* emails */
a[href^="mailto:"] {
  padding-right: 20px;
  background: url('email.png') no-repeat center right;
}

/* pdfs */
a[href$=".pdf"] {
  padding-right: 18px;
  background: url('acrobat.png') no-repeat center right;
}

Automatically Wrapping Code in Pre Tags

Preformatted text within pre tags often causes horizontal scrollbars due to long lines. This CSS code ensures that the text within these tags wraps, thus avoiding overflow and preserving readability.

pre {
  white-space: pre-wrap;     /* CSS3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  word-wrap: break-word;      /* Internet Explorer 5.5+ */
}

Custom Cursor for Clickable Elements

Not all clickable HTML elements display the hand pointer icon by default. This CSS snippet ensures that a hand cursor appears over various clickable elements, including any item with the class .pointer, enhancing user interaction.

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
  cursor: pointer;
}

Top Page Shadow for Aesthetic Effect

This CSS snippet adds a unique visual touch to your webpage: a subtle shadow that fades from the top. It’s an easy way to enhance the aesthetics of your site with minimal effort.

body:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
  z-index: 100;
}

CSS3 Speech Bubble Design

Speech bubbles are versatile UI elements, useful in discussions, bulletin boards, or for displaying quotes. This CSS3 class creates an attractive speech bubble, easily integrated into various web design contexts.

.chat-bubble {
  background-color: #ededed;
  border: 2px solid #666;
  font-size: 35px;
  line-height: 1.3em;
  margin: 10px auto;
  padding: 10px;
  position: relative;
  text-align: center;
  width: 300px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px #888;
  font-family: 'Bangers', arial, serif;
}

.chat-bubble-arrow-border {
  border-color: #666 transparent transparent transparent;
  border-style: solid;
  border-width: 20px;
  height: 0;
  width: 0;
  position: absolute;
  bottom: -42px;
  left: 30px;
}

.chat-bubble-arrow {
  border-color: #ededed transparent transparent transparent;
  border-style: solid;
  border-width: 20px;
  height: 0;
  width: 0;
  position: absolute;
  bottom: -39px;
  left: 30px;
}

Styling Default Headers from H1 to H5

This template provides default styles for major heading elements from H1 to H5, giving them a uniform color and varying sizes. While H6 is also available, it’s less commonly used in most website designs.

h1, h2, h3, h4, h5 {
  color: #005a9c;
}

h1 {
  font-size: 2.6em;
  line-height: 2.45em;
}

h2 {
  font-size: 2.1em;
  line-height: 1.9em;
}

h3 {
  font-size: 1.8em;
  line-height: 1.65em;
}

h4 {
  font-size: 1.65em;
  line-height: 1.4em;
}

h5 {
  font-size: 1.4em;
  line-height: 1.25em;
}

Creating Background Noise with Pure CSS

Adding a noise texture to your webpage’s background can be achieved using CSS alone. This snippet embeds Base64 code to generate a subtle noise effect, creating a stylish backdrop without the need for external images. Customize your noise texture at NoiseTextureGenerator for more personalization.

body {
  background-image: url(data:image/png;base64,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);
  background-color: #0094d0;
}

Sequentially Continuing Ordered Lists

This CSS snippet is perfect for times when you need to split an ordered list into multiple sections while maintaining a continuous count. It’s a simple, CSS-only solution to seamlessly continue list numbering across different list elements.

ol.chapters {
  list-style: none;
  margin-left: 0;
}

ol.chapters > li:before {
  content: counter(chapter) ". ";
  counter-increment: chapter;
  font-weight: bold;
  float: left;
  width: 40px;
}

ol.chapters li {
  clear: left;
}

ol.start {
  counter-reset: chapter;
}

ol.continue {
  counter-reset: chapter 11;
}

Creating CSS Tooltips with Hover Effects

While there are many jQuery-based tooltips available, CSS-based tooltips are less common. This snippet is a favorite of mine. Implement it into your stylesheet, and you can easily set up tooltips using HTML5 data attributes and the data-tooltip property.

a { 
  border-bottom: 1px solid #bbb;
  color: #666;
  display: inline-block;
  position: relative;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #36c;
}

a:active {
  top: 1px; 
}

/* Tooltip styling */
a[data-tooltip]:after {
  border-top: 8px solid #222;
  border-top: 8px solid hsla(0, 0%, 0%, 0.85);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  content: "";
  display: none;
  height: 0;
  width: 0;
  left: 25%;
  position: absolute;
}

a[data-tooltip]:before {
  background: #222;
  background: hsla(0, 0%, 0%, 0.85);
  color: #f6f6f6;
  content: attr(data-tooltip);
  display: none;
  font-family: sans-serif;
  font-size: 14px;
  height: 32px;
  left: 0;
  line-height: 32px;
  padding: 0 15px;
  position: absolute;
  text-shadow: 0 1px 1px hsla(0, 0%, 0%, 1);
  white-space: nowrap;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

a[data-tooltip]:hover:after {
  display: block;
  top: -9px;
}

a[data-tooltip]:hover:before {
  display: block;
  top: -41px;
}

a[data-tooltip]:active:after {
  top: -10px;
}

a[data-tooltip]:active:before {
  top: -42px;
}

Stylish Dark Grey Rounded Buttons in CSS3

Providing a simple CSS3 button design, this .graybtn class is ideal for dark grey rounded buttons. The class name reflects the color style, but you can modify the hex values to match your website’s color scheme. This template offers a starting point for a variety of button designs.

.graybtn {
  -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
  -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
  box-shadow: inset 0px 1px 0px 0px #ffffff;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1));
  background: -moz-linear-gradient(center top, #ffffff 5%, #d1d1d1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
  background-color: #ffffff;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: 1px solid #dcdcdc;
  display: inline-block;
  color: #777777;
  font-family: arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 1px 1px 0px #ffffff;
}

.graybtn:hover {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff));
  background: -moz-linear-gradient(center top, #d1d1d1 5%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
  background-color: #d1d1d1;
}

.graybtn:active {
  position: relative;
  top: 1px;
}

Displaying URLs in Printed Web Pages

For websites with print-friendly content, this CSS snippet is incredibly useful. Links on your webpage will appear normally, but when printed, the URLs will be displayed alongside the link text. This feature is particularly handy for readers who need to access hyperlinked pages from a printed document but cannot see the URLs normally.

@media print { 
  a:after { 
    content: " [" attr(href) "] "; 
  } 
}

Disabling Mobile Webkit Highlights

In mobile Safari and other Webkit-based browsers, a grey box often appears around tapped elements. This CSS snippet removes all native mobile browser highlights, offering a cleaner and more consistent user experience.

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Creating a CSS3 Polka-Dot Pattern

This interesting CSS3 snippet allows you to generate a polka-dot pattern on any element, targeted here at the body element. It’s a quick and efficient way to add a playful background pattern to your webpage without the need for external images.

body {
  background: radial-gradient(circle, white 10%, transparent 10%),
              radial-gradient(circle, white 10%, black 10%) 50px 50px;
  background-size: 100px 100px;
}

Seamless CSS3 Checkered Pattern

Similar to polka dots, this snippet creates a seamless checkerboard pattern. It’s a bit more complex but renders beautifully in CSS3-supported browsers. The color scheme can be adjusted to fit your website’s aesthetic.

body {
  background-color: white;
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
                    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
  background-size: 100px 100px;
  background-position: 0 0, 50px 50px;
}

Stylish GitHub Fork Ribbon in CSS3

For GitHub enthusiasts, this CSS snippet is a game-changer. It enables you to create attractive GitHub corner ribbons using CSS3 transforms, perfect for open source projects or hosting demos on GitHub.

.ribbon {
  background-color: #a00;
  overflow: hidden;
  position: absolute;
  left: -3em;
  top: 2.5em;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-box-shadow: 0 0 1em #888;
  -webkit-box-shadow: 0 0 1em #888;
}

.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0.05em 0 0.075em 0;
  padding: 0.5em 3.5em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 0.5em #444;
}

Creating a Paper Page Curl Effect

This CSS technique creates a page curl effect for containers on your website, suitable for adding a visual twist to content such as images or quotes. It’s an innovative way to enhance your website’s design and appeal.

ul.box {
  position: relative;
  z-index: 1;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.box li {
  position: relative;
  float: left;
  width: 250px;
  height: 150px;
  padding: 0;
  border: 1px solid #efefef;
  margin: 0 30px 30px 0;
  background: #fff;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}

ul.box li:before,
ul.box li:after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 70%;
  max-width: 300px;
  max-height: 100px;
  height: 55%;
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  -webkit-transform: skew(-15deg) rotate(-6deg);
  -moz-transform: skew(-15deg) rotate(-6deg);
  -ms-transform: skew(-15deg) rotate(-6deg);
  -o-transform: skew(-15deg) rotate(-6deg);
  transform: skew(-15deg) rotate(-6deg);
}

ul.box li:after {
  left: auto;
  right: 10px;
  -webkit-transform: skew(15deg) rotate(6deg);
  -moz-transform: skew(15deg) rotate(6deg);
  -ms-transform: skew(15deg) rotate(6deg);
  -o-transform: skew(15deg) rotate(6deg);
  transform: skew(15deg) rotate(6deg);
}

Creating Glowing Anchor Links with CSS3

Using CSS3 text shadows, this snippet provides a unique and creative way to style links with a glowing effect on hover. While it may not suit every website’s style, those who use it thoughtfully can create an impressive and engaging user experience.

a {
  color: #00e;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: #06e;
}

a:focus {
  outline: thin dotted;
}

a:hover, a:active {
  outline: 0;
}

a, a:visited, a:active {
  text-decoration: none;
  color: #fff;
  -webkit-transition: all .3s ease-in-out;
}

a:hover, .glow {
  color: #ff0;
  text-shadow: 0 0 10px #ff0;
}

Dynamic CSS3 Display Banner

Using CSS3, create dynamic, image-free banners that give the impression of hanging off the edges of content wrappers. Ideal for highlighting features on e-commerce products, image thumbnails, video previews, or blog articles, these banners add a visual pop to various elements without the need for background images.

.featureBanner {
  position: relative;
  margin: 20px;
}

.featureBanner:before {
  content: "Featured";
  position: absolute;
  top: 5px;
  left: -8px;
  padding-right: 10px;
  color: #232323;
  font-weight: bold;
  height: 0;
  border: 15px solid #ffa200;
  border-right-color: transparent;
  line-height: 0;
  box-shadow: 0px 5px 5px -5px #000;
  z-index: 1;
}

.featureBanner:after {
  content: "";
  position: absolute;
  top: 35px;
  left: -8px;
  border: 4px solid #89540c;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

Explore More

Delve into these previously published articles that might pique your interest:

• CSS Back to Basics: Terminology Explained
• 20 Useful CSS Tips For Beginners
• 11 Top CSS Editors – Reviewed
• How to Keep Your CSS3 Code Markup Slim
• Reviewing CSS Style Priority Level
• A Guide to CSS3 pseudo-classes

Closing Thoughts

The evolution of frontend styling languages, particularly CSS, has significantly influenced web development. With the W3C’s endorsement of HTML5 and CSS3 as standard web construction languages, these resources are vital for both seasoned and novice developers. This collection aims to be a valuable tool, offering a wide range of CSS codes. Remember, most CSS codes today are open source and free to use without needing attribution. While this collection may not cover every CSS need, it aims to come close. If you have any thoughts or questions about these snippets, feel free to join the discussion in the comments below.

Editor’s note: This article, first published on May 23, 2013, has been updated and revised for accuracy and completeness.