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 50 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.

Recommended Reading: 20 Useful CSS Tips For Beginners

1. CSS Resets

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; } html { height: 101%; } body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } p { font-size: 1.2em; line-height: 1.0em; color: #333; }

Basic CSS browser resets are some of the most common snippets you’ll find online. This is a customized snippet by myself which is based off Eric Meyer’s reset codes. I have included a bit for responsive images and set all core elements to border-box, keeping margins and padding measurements aligned properly.

2. Classic CSS Clearfix

.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }

This clearfix code has been around the Web for years circulating amongst savvy web developers. You should apply this class onto a container which holds floating elements. This will ensure any content which comes afterwards will not float but instead be pushed down and cleared.

3. 2011 Updated Clearfix

.clearfix:before, .container:after { content: ""; display: table; } .clearfix:after { clear: both; } /* IE 6/7 */ .clearfix { zoom: 1; }

From what I can tell there isn’t a major difference in rendering between this newer version and the classic version. Both of these classes will effectively clear your floats, and they should work in all modern browsers and even legacy Internet Explorer 6-8.

4. Cross-Browser Transparency

.transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ }

Code Source

Some of the newer CSS3 properties have pampered us into thinking they may be applied everywhere. Unfortunately opacity is one such example where CSS still requires some minor updates. Appending the filter property should handle any older versions of IE with grace.

5. CSS Blockquote Template

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

Code Source

Not everybody needs to use blockquotes inside their website. But I feel these are an excellent HTML element for separating quoted or repeated content within blogs or webpages. This basic chunk of CSS offers a default style for your blockquotes so they don’t appear as drab and bland.

6. Individual Rounded Corners

#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; } /* alternative syntax broken into each line */ #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; }

Most developers are familiar with the CSS3 rounded corners syntax. But how would you go about setting different values for each of the corners? Save this code snippet and you should never run into the problem again! I’ve included both a condensed version and a longer base with each corner radius broken down into a different property.

7. General Media Queries

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

Code Source

This is an excellent template which you can find on CSS-Tricks for other bits and pieces of media queries. However I’ve copied their example in full which includes tons of real mobile devices. These codes will even target retina-based devices using min-device-pixel-ratio.

8. Modern Font Stacks

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

Code Source

It is difficult brainstorming your own CSS font stacks for designing new webpages. I hope this snippet may alleviate some torture and give you a few templates for getting started. If you want to find more examples check out CSS Font Stacks which is one of my favorite resources.

9. Custom Text Selection

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

Some newer web browsers will allow you to define the highlight color on your webpage. This is set to light blue by default, but you can setup any color value which tickles your fancy. This snippet includes the typical ::selection target along with vendor prefixes for Webkit and Mozilla.

10. Hiding H1 Text for Logo

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

I first noticed this technique being implemented on the old Digg layout. You can setup an H1 tag which also has your website’s name in plaintext for SEO purposes. But using CSS we can move this text so it isn’t visible, and replace it with a custom logo image.

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

Code Source

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

Code Source

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

Code Source

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

Code Source

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

Code Source

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

Code Source

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

Code Source

20. CSS3 Zebra Stripes

tbody tr:nth-child(odd) { background-color: #ccc; }

Code Source

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.

21. Fancy Ampersand

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

Code Source

This class would be applied to one span element wrapped around your ampersand character in page content. It will apply some classic serif fonts and use italics to enhance the ampersand symbol. Try it out on a demo webpage and see how you like the design.

22. Drop-Cap Paragraphs

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

Typically you’ll notice dropped capitals appear in printed mediums, such as newspapers and books. However this can also be a neat effect in webpages or blogs where there is enough extra room in the layout. This CSS rule is targeting all paragraphs but you may limit this based on a single class or ID.

23. Inner CSS3 Box Shadow

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

The box shadow property has offered immense changes into how we build websites. You can portray box shadows on nearly any element, and they all generally look great. This piece of code will force inner shadows which is a lot harder to design around, but in the right cases it looks pristine.

24. Outer CSS3 Box Shadow

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

In relation to the inner CSS3 shadows I also want to present an outer shadow code snippet. Note the 3rd number in our syntax represents blur distance while the 4th number represents the spread. You can learn more about these values from W3Schools.

25. Triangular List Bullets

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

Code Source

Believe it or not it is actually possible to generate triangle-shaped bullets solely in CSS3. This is a really cool technique which does look awesome in respected browsers. The only potential issue is a major lack of support for fallback methods.

26. Centered Layout Fixed Width

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

Code Source

I know earlier it was mentioned how to setup horizontal positioning. I want to jump back in with this quick snippet for horizontal positioning, which is perfect to be used on fixed-width layouts.

27. CSS3 Column Text

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

Code Source

CSS3 columns would be nice to see in website layouts, but the reality is how we can split up text based on column styles. Use this snippet to place any number of columns inline with your paragraphs, where text will split evenly based on your column number.

28. CSS Fixed Footer

#footer { position: fixed; left: 0px; bottom: 0px; height: 30px; width: 100%; background: #444; } /* IE 6 */ * html #footer { 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'); }

Code Source

This is actually a lot more useful than it sounds, but appending a fixed footer into your website is quite simple. These footers will scroll with the user and may contain helpful information about your site or unique contact details. Ideally this would only be implemented in cases where it truly adds value to the user interface.

29. Transparent PNG Fix for IE6

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

Code Source

Using transparent images inside websites has become a very common practice. This started with gif images, but has evolved into alpha-transparent PNGs. Unfortunately older legacy versions of Internet Explorer have never supported the transparency. Adding this brief CSS snippet should clear up the problem.

30. Cross-Browser Minimum Height

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

Developers who have needed to work with min-height know all about the shady support. Many newer browsers can handle this perfectly, however Internet Explorer and older versions of Firefox do have trouble. This set of codes should provide a fix to any related bugs.

31. CSS3 Glowing Inputs

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

Code Source

I really enjoy this basic custom CSS3 class because of how it overwrites the default browser behavior. Users of Chrome & Safari know about annoying input outlines in forms. Adding these properties into your stylesheet will setup a whole new design for basic input elements.

32. Style Links Based on Filetype

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

Code Source

Quite the obscure bit of CSS but I love the creativity! You can determine the file type of your links using CSS selectors and implement icons as background images. These may include the various protocols (HTTP, FTP, IRC, mailto) or simply the file types themselves (mp3, avi, pdf).

33. Force Code Wraps

pre { white-space: pre-wrap; /* css-3 */ 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+ */ }

Code Source

The typical pre tags are used in layouts to display large chunks of code. This is preformatted text like you would find inside Notepad or Textedit, except you’ll often notice long lines produce horizontal scrollbars. This block of CSS will force all pre tags to wrap code instead of breaking outside the container.

34. Force Hand Cursor over Clickable Items

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

Code Source

There are lots of default clickable HTML elements which do not always display the hand pointer icon. Using this set of CSS selectors you may force the pointer over a number of key elements, along with any other objects using the class .pointer.

35. Webpage Top Box Shadow

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

Code Source

Developers may not find a great use for this other than some pleasing aesthetics. But I really enjoy this effect and it’s definitely something unique! Simply append this CSS code targeting your body element to display a dark drop shadow fading down from the top of your webpage.

36. CSS3 Speech Bubble

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

Code Source

Numerous user interface purposes come to mind when discussing speech bubbles. These could be handy in discussion comments, or creating bulletin boards, or displaying quoted text. Simply add the following classes into your stylesheet and you can find related HTML codes from this CSS3 snippets post.

37. Default H1-H5 Headers

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

Code Source

I have offered lots of common syntax including browser CSS resets and a few HTML element resets. This template includes default styles for all major heading elements ranging from H1-H5. You may also consider adding H6 but I have never seen a website using all six nested headers.

38. Pure CSS Background Noise

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

Code Source

Designers have seen this effect added into websites for a long time, although they generally use repeating tile images with alpha-transparency. However we can embed Base64 code into CSS to generate brand new images. This is the case as in the snippet above which generates a small noise texture above the body background, or you can create a customized noise background over at NoiseTextureGenerator.

39. Continued List Ordering

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

Code Source

I feel this may not be an extremely popular snippet, but it does have its market among developers. There may be situations where you’ll need to continue a list of items but split into two separate UL elements. Check out the code above for an awesome CSS-only fix.

40. CSS Tooltip Hovers

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%,.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%,.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; }

Code Source

There are lots of open source jQuery-based tooltips which you can implement on your websites. But CSS-based tooltips are very rare, and this is one of my favorite snippets. Just copy this over into your stylesheet and using the new HTML5 data-attributes you can setup the tooltip text via data-tooltip.

41. Dark Grey Rounded Buttons

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

Code Source

As another helpful template for web developers I have included this simplistic CSS3 buttons class. I am using the class name .graybtn which is appropriate for the colors, but this isn’t to say you couldn’t change the styles to match your own website. Check out the hex values inside a color wheel to match similar hues in different color ranges.

42. Display URLS in a Printed Webpage

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

Code Source

If you run a news website or resource with lots of print material, this is possibly one of the greatest snippets you’ll ever find. Anchor links in your webpage will look and display exactly as normal. However when printed your users will be able to see the link text along with the full hyperlinked URL. This is handy when visitors need to access a webpage you’ve linked but cannot see the URL in a typical printed document.

43. Disable Mobile Webkit Highlights

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

Depending on your experience working in mobile this snippet may not appear very helpful. But when accessing mobile websites in Safari and other Webkit-based engines, you’ll notice a grey box surrounds elements as you tap them. Just append these styles into your website and it should remove all native mobile browser highlights.

44. CSS3 Polka-Dot Pattern

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

Code Source

I was a bit taken back when initially finding this snippet online. But it is a really interesting method for generating CSS3-only BG patterns on the fly. I have targeted the body element as default but you could apply this onto any container div in your webpage.

45. CSS3 Checkered Pattern

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

Code Source

Similar to the polka-dots above we can also create a full seamless checkerboard pattern. This method requires a bit more syntax to get working, but it looks flawless in all CSS3-supported browsers. Also you can change the color values from white and black to match that of your own website color scheme.

46. Github Fork Ribbon

.ribbon { background-color: #a00; overflow: hidden; /* top left corner */ position: absolute; left: -3em; top: 2.5em; /* 45 deg ccw rotation */ -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); /* shadow */ -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% 'Helvetiva Neue', Helvetica, Arial, sans-serif; margin: 0.05em 0 0.075em 0; padding: 0.5em 3.5em; text-align: center; text-decoration: none; /* shadow */ text-shadow: 0 0 0.5em #444; }

Code Source

As a big user on Github this basic code snippet blew my mind. You can quickly generate Github corner ribbons in your webpage using CSS3 transform properties. This is perfect for open source plugins or code packs which have a popular following on Github. Also great for hosted HTML/CSS/JS demos if you have an active Github repo.

47. Condensed CSS Font Properties

p { font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica; }

Code Source

The main reason web developers don’t always use this condensed font property is because not every setting is needed. But having an understanding of this shorthand may save you a lot of time and space in your stylesheets. Keep this snippet handy just in case you ever want to shorten the formatting of your font styles.

48. Paper Page Curl Effect

ul.box { position: relative; z-index: 1; /* prevent shadows falling behind containers with backgrounds */ 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; /* avoid rotation causing ugly appearance at large container widths */ 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); }

Code Source

This page curl effect can be applied to almost any container which holds website content. Immediately I thought about image media and quoted text, but really this could be anything at all. Check out the snippet’s live demo page for a better grasp of how these page curls function.

49. Glowing Anchor Links

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

Code Source

CSS3 text shadows offer a unique method of styling your webpage typography. And more specifically this snippet is an excellent resource for custom creative links with glowing hover effects. I doubt this effect can be pulled off elegantly in the majority of websites, but if you have the patience to get it looking nice you are sure to impress visitors.

50. Featured CSS3 Display Banner

.featureBanner { position: relative; margin: 20px } .featureBanner:before { content: "Featured"; position: absolute; top: 5px; left: -8px; padding-right: 10px; color: #232323; font-weight: bold; height: 0px; border: 15px solid #ffa200; border-right-color: transparent; line-height: 0px; 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; }

Code Source

Generally you would need to setup a background image to duplicate this effect in other browsers. But in CSS3-supported engines we can generate dynamic banners which hang off the edge of your content wrappers, all without images! These may look good attached onto e-commerce products, image thumbnails, video previews, or blog articles, to list just a few ideas.

More

Here are more articles published in the pass you may be interested in:

• 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

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. I don’t claim to offer every possible CSS code you could ever want, but I’m hoping we got pretty darn close! If you have thoughts or questions about this collection feel free to share with us in the comments discussion area below.

So you’ve just built an iOS app or maybe an Android one. You’re really proud of your design, the app works on every device you tested and there seems to be no competition in your niche. After publishing it, you go ahead and share it on your Facebook Profile page. You feel you’re onto a winner!

Next day you’re eager to check out how many people have downloaded it. "12 downloads" and not a single review. Hm… something must be wrong! So you start to really promote it now. You spam your friends constantly with Twitter and Facebook updates. A month later, you’re still below 500 downloads. What are you doing wrong?

Here are a few tricks I’ve learned that will help your download numbers grow (while also keeping your Facebook friends from reporting you).

Recommended Reading: Mobile App Design/Dev: Beginner’s Guide to jQuery Mobile

1. Great Translated Descriptions

Make sure you have a nice, long description for your app to put it up the market place. This is for your clients and for your app’s ranking. You need to invest the time and do this right.

Language

Where possible, your description should be localized in most common languages such as Chinese, Korean, Spanish or French. Google Play has a nice feature (which won’t be available with the new Developer Console update, so hurry up) which will let you do the translation automatically using Google Translate. However, some translations do come up weird, so make sure you double check Google’s work.

For the App Store, you could do it yourself or look into human translation; it’s worth the money, or just use the browser-version of Google Translate.

Keywords

Your description should contain certain keywords you’re targeting with your app. Say you have a camera app named “Funky Camera Tricks”. Use the word ‘camera’ 3-6 times in your app description, (while keeping it relevant) and also use the words ‘tricks’ and ‘funky’ a few times.

Go on the normal Adwords Keyword Tool and search for lateral keywords to use as well. Using lateral keywords (the ones suggested by Google after you’ve done your main search) will improve your app’s chance to get into the search results for those main keywords. You want to create a Goldilocks description: not too much keyword usage, not too long or too short. Keep it balanced.

Declare Required Permissions

Don’t forget to talk about any permission your app is requesting upon installing. The user will see them anyway so it’s better to be honest from the start. List all your app’s features, while also being transparent about any monetization modals you have in place.

2. Make a Video

Making a video for your app is a must. If you’re going down this road, I would advise you to hire a professional agency, or a video editing (freelance) plus a voice talent. There are even mobile specific video editors, like the guys at Apptamin, who specialize in app videos.

If you are going to invest in a video, make sure it has subtitles for the local language. If you have the money, have it translated into the most common languages. It will do wonders to your download rate.

3. CPI Burst Campaigns

Most of the traffic from searches on both Google Play and the App Store will go only as far as the 50th app in the list. Naturally, developers strive to make their app reach the highest spot. One tactic is by making use of a CPI (Cost-Per-Install) Campaign via different advertisers.

You’ll pay a certain amount of money for each install. The idea is not to make a positive return on your money, but to propel yourself in the list of Top 50 apps in your niche. If you reach that spot, the effects will last long enough for you to get your money’s worth.

This is best used while you are already riding a high wave of downloads. Compounding that with a well thought-out CPI Burst Campaign can make your app into a winner.

There are tons of ad networks offering CPI Campaigns. You could look into Tapjoy, Leadbolt or even specialized app discovery services such as MagicSolver who are offering this service.

4. Limited Discounts

You can offer your app for free or at half price for a period of time. Couple that with the beforementioned CPI campaign and a medium-sized user base already in place, and the effects can be mind-blowing. There are also apps which can help promote your discounted app, similar to the way daily deal sites work. AppGratis is one of them.

So is AppTurbo.

5. Get the word out

There are some services out which can handle press release distribution for you such as PRWeb or MarketWired. Just write your press release and send if out. There are even mobile specific agencies such as AppShout which can help you contact a massive number of blogs and publications.

Even if you use these services, I would advise you to personally contact medium-sized blogs for reviews. Usually these guys are eager to see new apps, and because they aren’t that big, you won’t become yesterday’s news too fast. That will mean more traffic.

Once you get a decent-sized publication to write about you, contact every other smaller blog, referring to the first article on the medium-sized blog. They’ll be more than happy to write about you. Give a personal, unique story to each. Don’t just repeat your press release. Nobody likes double content, and I presume Google doesn’t as well.

6. Keep your eyes on the user

Having analytics is a must. You’ll want to keep your active device numbers as high as possible. That’s the key to continuous downloads. A good app analytics should offer multi-app options, give you the ability to compare between them, let you see the user’s behaviors, from download until app deletion. You’ll also want to set up key trigger points inside the app in order to run A/B testing.

Here are some tools to choose from:

Flurry Analytics. Flurry boasts some big clients, from EA to Yahoo! to Groupon. Flurry recently celebrated 5 years of their Analytics service.

Google’s Universal Analytics. The most used analytics on the planet, Google’s Analytics just received a major update, and now offers mobile support.

Countly. Countly offers real-time analytics for your app. They offer great support, and even run an old-fashioned IRC channel: #countly on irc.freenode.net.

Localytics. Localytics offers 3 pricing plans, one is free.

 

7. Use a cover image for Google Play

So many Android developers forget to do the simplest things, such as creating a cover image for their app. Don’t make the same mistake. A cover image can really boost user downloads. Make it unique, and don’t use the same picture from the screenshot. If you do use the same picture, at least take the time to resize it so it won’t look weird. You want users to trust you, before they will be willing to download your app.

Example of a cover image for a Christmas App

8. Professional real-life screenshots

Your app’s screenshots should be as crisp, clean and professional as (humanly) possible. If you can, take some high-res pictures of a real person using your app on their phone/tablet. Show a child in your shot using the app if your app is for young kids. Replace it with a business owner, if it is a business app. Make sure the app can be clearly seen.

The point of the screenshot is for the user to see the app in action. Have at least 3 screenshots, preferably 6. Each screenshot should contain a different instance of the app.

Conclusion

So there you have it. These 8 points helped me grow my app business to more than 7 million downloads on our entire portfolio in under a year. Lastly, I couldn’t have done it without my associates, so one last thing – make sure you have a great team working with you. Some of the tips above are pretty hard to implement, so you need to have talented, dedicated people around you.

Are you a parent who allow your kids to play with your iOS devices? If you are one, you might know how things could be quite a mess after they are done with your device. You might be surprised to find that some of your apps were deleted or some of the icons moved around.

If this is a problem for you, this guide will help.

There’s a feature in iOS 6 named ”Guided Access”, which allows you to lock your iOS devices into one app. Under lockdown, certain parts of the screen can be disabled. This means that your kids can only use the app you have selected for them, and will need you to make any changes or open another app.

Recommended Reading: 5 Tips For Parental Controls On Mac

How To Enable ‘Guided Access’

To enable ”Guided Access” in your iOS device, tap on Settings > General.

Then scroll down and tap on Accessibility. Scroll down and tap on ‘Guided Access’.

Turn ON the feature.

You can set a passcode to enable ‘Guided Access’. Only the person who knows the passcode will be able to enter the ‘Guided Access’ page when it is activated.

How To Disable Access To Certain Areas Of The Screen

To disable access to certain areas of the screen, first, tap on an app to run it. We are going to use Tweetbot as an example. When you’re in the app, press on the home button 3 times. This puts you in ‘Guided Access’ mode.

At the bottom left, there is an Option button. Tapping on it will reveal a page where you can set a few options.

If you turn off "Touch", the entire screen will be disabled. And if you choose to turn off "Motion" your iPhone will be locked in either portrait or landscape mode, depending on the app.

To disable certain parts of the screen, draw a circle on the area that you want to disable. Just ensure that the starting point and the ending point of the circle meets and the area will be automatically selected.

You can draw on more than one area, to disable more than one part of the screen.

Tap on Start. Now the gray part of the screen (in the shot below) is disabled; this means all the icons are not functional. The only thing that is functioning is the non-grayscaled part.

Stop ‘Guided Access’

To stop ‘Guided Access’, triple press the home button. It will ask you for the passcode that you entered earlier. Enter the passcode.

Then, on the ‘Guided Access’ page, tap on End. When ‘Guided Access’ ends, your iPhone will return to normal.

To Note

Here are a few things to note about using ‘Guided Access’.

1. Under ‘Guided Access’ is an option called ‘Enable Screen Sleep’. If you have this option OFF, when ‘Guided Access’ is activated, the power button will lose its functionality. Your screen will always stay lit up. If you do not want this function, have the option ON.

2. When you are using ‘Guided Access’ mode, your Home button will not function as normal. This means you cannot leave the app even if you press the Home button, as you have been locked in to the app.

3. To get out of ‘Guided Access’ mode, you have to triple press the Home button.