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,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==); 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.

Statistics says that online shopping is growing day by day. But what is the secret component of each popular online store? Is it the variety of goods or its quantity? I think these days they are not key elements anymore. In fact, we should be looking at design attractiveness and usability to keep buyers on the site.

In order to create really cool aesthetic design, all website elements should be taken under consideration, and when it comes to a site banked on e-commerce, we mustn’t forget about the shopping cart.

Today I’d like to showcase 40 shopping cart designs that shows how you can enable and engage online shopping. Hopefully the list will inspire you to create your own one or pick out a PSD to download for free in the second half of the list.

Recommended Reading: Open Source E-Commerce Shopping Carts – Best Of

1. Sweet House Recently Added Products by Stanislav Kirilov

2. Your shopping cart has been updated by Veerle Pieters

3. Desina Online Store

4. SpiceBlue Shopping Cart website design by Sunil Joshi

5. Menu for a French clothes shop by Antony Legrand

6. Food ordering web application by Tamerlan Soziev

7. Shopping cart by Daniel Sigvardsson

8. Shopping cart by Mynus

9. Add to Cart by Blue Acorn

10. Hulala Header by Paresh Khatri

11. Awesome Cart by Paresh Khatri

12. Online Shopping by Irshadh Ahamed

13. Shopping Cart by Jonno Riekwel

14. Search bar with shopping cart by Zoltan Mitlik

15. Cart Blueprint by Igor Garybaldi

16. Header elements for Yosto by Maksim Harmaza

17. Shopping Cart by Adi Pintilie

18. La Ganache e-commerce website by Cédric Converset

19. Checkout progress bar – Web UI by Jason Wu

20. Purple cart by Fuzzco

21. Shopping Cart by Vinny Singh

22. Tailored Cart by Matt Johnston

23. Shopping cart by Dennis Covent

24. Add To Cart Button by Blue Acorn

25. Cart & Search by Bryan Le

26. Shoppingcart by Sofie De Grande

27. Acris Shop by Prakash Ghodke

28. E-commerce by Mario Azzi

29. MUD MAP v2 – Add To Cart by Callum Chapman

30. Checkout Process by Rui Macedo

31. Give a Shirt Checkout Dropdown by Vin Thomas

32. Shopping cart by Mladen Zivanovic

33. Mouse to Minx Online Shop

34. Checkout Button by Ionut Zamfir

35. Checkout by Kevin John Gomez

36. Kickadss Checkout by Robin Kylander

37. Added To Cart by Gustavs Cirulis

38. Shopping Cart Widget by Alister Coyne

39. Product Display 3.1 by Matthew Morek

40. Boob Baby Online Store

Bonus: Free Shopping Cart PDS’s to Download

Of course, you can create a shopping cart design from scratch to give it the perfect fit to your design. But if you do not want to “reinvent the wheel”, you can use ready-made cart designs that can be downloaded for free. Here are 20 more free shopping cart designs in PSD format.

41. Free Quick Cart by Orman Clark

42. Free Shopping Cart by Asif Alleem

43. Free Shopping bag by Lukáš Majzlan

44. Free Shopping Cart Dropdown by Emrah Demirag

45. Shopping cart popup interface (PSD) by softerea

46. Free Cart Dropdown by kamal 

47. Free Add To Cart Buttons by Bharat Sharma

48. Free Product Box by Zulal Ahmad

49. Free Shopping Cart Widget

50. Your Free Cart Widget by Pawel Kadysz

51. Free Shopping Cart Elements PSD by Ali Asghar 

52. Free shopping widget PSD by Ali Asghar

53. My Shopping Cart by Adrian Alexandru

54. Free Shopping Cart Interface by Paul Mackenzie

55. Add to Cart Buttons by Orman Clark

56. Free Cart Modal Popup by Dan Edwards

57. Shopping cart by Kasper Mikiewicz

58. Free Blue Button by Maria Shanina

59. Mini Shopping Cart by Miroslav Bekyarov

60. Free Shopping Cart PSD by Jay Hafling

In our previous post, we started a discussion on how to create and insert new elements with the jQuery (and JavaScript) Append method. We’ve learned how to create and insert new elements to the body document.

In its basic form, the Append method inserts the new element as the last child or (technically) before the closing tag of a specified element. In certain cases, however, we might need to insert the new element at a more specific point. In this post, we will tackle this issue.

Recommended Reading: jQuery: Creating And Inserting New Element – Part I

For demonstration purposes, we have prepared the following HTML unordered list structure, containing the id, list.

 <ul id="list"> <li>Ut enim ad minim veniam.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Duis aute irure dolor in reprehenderit.</li> <li>Sunt in culpa qui officia deserunt mollit.</li> <li>Excepteur sint occaecat cupidatat non proident.</li> </ul> 

Insert New Element as the First Child

In this first example, we will create a new element and insert it as the first child of a specified element (parent). As in our previous post, we will first look at how it is done purely with JavaScript and subsequently with jQuery.

The idea in the following example is we will create a new <li> and then insert it as the first child of the <ul>. So, let’s create a new element as well as the text inside it, like so.

 var li = document.createElement('li'), txt = document.createTextNode('This is the text in new element.'); li.appendChild(txt); 

To insert this element as the first child, we can use the JavaScript .insertBefore() function. This function allows us to insert an element before an existing element.

Now, we need to specify which parent to nest the new element inside. In this example, we specify the element by getting its ID attribute, like so:

 ul = document.getElementById('list'); 

Then, we need to define which element to place the "new element" before. In our case, it would be the first child of the parent. In JavaScript, we can get the first child element with .firstChild function and we store it in a variable called firstChild.

 var firstChild = ul.firstChild; 

We then apply the function. First, we set the parent element with ul variable followed by .insertBefore() function, like so.

 ul.insertBefore(); 

Inside the parentheses, we specify the new element followed by the reference element (the first child of the parent).

 ul.insertBefore(li, firstChild); 

This code above will insert the new li before the first child element. If we take a look at the browsers and inspect the element through the Developer Tool, we will get this result:

We see that our new element is now the first child of the <ul>.

Using jQuery

Alternatively, we can use jQuery. jQuery has a function called .prepend(). We can achieve the same result by writing it in this one way.

 $('#list').prepend('<li>This is the text in new element. (with jQuery)</li>'); 

Insert New Element in Specific Point

Now, how about adding the new element at a more specific point, such as before or after the 3^rd child – as opposed to first and last. Here’s how we do it in both JavaScript and jQuery.

We have created a new element from the previous example, like so:

 var li = document.createElement('li'), txt = document.createTextNode('This is the text in new element.'); li.appendChild(txt); 

We need to grab the list element. In JavaScript, we use .getElementsByTagName() to select element by their tag name.

 var list = document.getElementsByTagName('li'); 

After that, we need to get the 3^rd list element, which can be specified with its index number. The index number in JavaScript started from 0, thus the 3^rd element would be 2 in the index. In the following code, we store this element in nthList variable.

 var nthList = list[2]; 

Now, we can use .insertBefore() function to add the new element before the 3^rd child of specified element:

 ul.insertBefore(li, nthList); 

If we view the browser, we will get:

To insert the new element after it, we can use .insertBefore() function along with .nextSibling(), which specifies the next element.

 ul.insertBefore(li, nthList.nextSibling); 

Contrary to the previous example, the following code will insert the new element after the 3^rd child of the specified element.

Using jQuery

jQuery introduced .before() and .after() function to simplify the process. And, we can use jQuery .eq() function to target element upon their index.

Referring to our example above, we can do the same thing with:

 $('li').eq(2).before('<li'>This is the text in new element. (with jQuery)</li>'); 

to add the new element before the 3^rd child of specified element. Or, we can write it this way to insert after it.

 $('li').eq(2).after('<li'>This is the text in new element. (with jQuery)</li>'); 

Conclusion

We have learned how to create and insert new elements with JavaScript and used jQuery functions to simplify the process (yet achieve the same result). It is now up to your choice to figure out which is more efficient to your case.

Hopefully, this session can be useful for you, paticularly for those who are just getting started with jQuery or JavaScript. If you have anything to ask, feel free to add it in the comment section below.

Useful Resources

Below are a few useful resources to dig into this subject further.

• JavaScript .insertBefore Function – MDN
• JavaScript .nextSibling function – MDN
• jQuery .before() Function – jQuery API Documentation
• jQuery .after() Function – jQuery API Documentation
• jQuery .eq() Function – jQuery API Documentation

Photography lovers would not miss out on taking photos of city skylines, and while most of us would love to put our own creations on our desktops, a city skyline view is not really that easy to capture. It’s a good thing that there are a lot of skyline wallpapers out there that you can use in place. We’ve done the hard part for you and grouped these wallpapers together in a compilation below.

In this week’s Wallpaper Wednesday, we are featuring more than 30 beautiful cities and skylines wallpapers. From Manhattan to Tokyo, Prague to Taipei, these beautiful celebrations of the architecture of the world will surely be a sight for sore eyes.

Read Also: 45 Awe-Inspiring Landmarks Around The World

Arc De Triomphe Paris France. Available in various sizes.

As Far As You Can See. Available in 1920×1080.

Buildings Foggy Sky. Available in the following size(s): 1366×768, 1920×1080, 2560×1440.

Chicago. Available in 2560×1600.

Chicago Skyline. Available in 5629×3518.

City Night Skyline. Available in 1920×1200.

City Overview. Available in the following size(s): 1440×900, 1900×900, 1920×1080, 2500×1400, 2500×1600.

City Wallpaper. Available in 1920×1080.

Colourful City. Available in 1600×1200, 1920×1080, 2560×1600.

Down On Nyc. Available in 1920×2111.

Dubai Skyscrapers. Available in various sizes.

Empire. Available in 2560×1600.

First World. Available in the following size(s): 1024×768, 1280×1024, 1680×1050, 1600×1200, 1920×1080, 1920×1200.

Future Manhattan. Available in 3226×2016.

London Panoramic. Available in the following size(s): 1280×800, 1920×1200, 4835×3021.

Manhattan New York. Available in 1920×967.

Natgeo Tokyo. Available in 1600×1000.

New York City Black And White. Available in various sizes.

New York Skyline. Available in 1680×1050.

New York State Of Mind. Available in 1680×1050.

Night City Lights. Available in 2560×1440.

Piazza San Pietro. Available in various sizes.

Prague In Tilt Shift III. Available in the following size(s): 1920×1080, 1920×1200, 2560×1600.

Sacre Coeur. Available in the following size(s): 1280×720, 1280×800, 1366×768, 1600×1000, 1920×1080, 1920×1200, 2560×1440, 2560×1600.

Skyscraper. Available in the following size(s): 1280×800, 1400×900, 1920×1200.

Taipei Tilt-Shift. Available in the following size(s): 640×960, 1280×850.

Strange Intruder. Available in 1920×1200.

Tilt Shift Wallpaper 15. Available in 1920×1080.

Tilt-Shift Wallpaper. Available in the following size(s): 640×960, 1280×850.

Top Of The Rock. Available in the following size(s): 640×1136, 2048×2048, 2880×1800.

Top Of The World. Available in 1600×900.

Vertical. Available in 2560×1600.

XYork. Available in 1680×1050.

Smartphones have evolved from being able to just check email and has now allowed us to do so many other things when paired with other devices. Nowadays, we can pay with our smartphones with digital wallet apps are able to store multiple credit cards. Most of our private information (together with other contact information) can be found in the apps on our smartphone through chatlogs, pictures, calendars, and notes.

This is why we rely so much on our smartphones and store so much sensitive data on it to make our lives easier. With all these sensitive data onboard a tiny device, we should pay more attention to keeping it safe and away from anyone unwanted. Here are some precautions to help you.

Recommended Reading: 6 Safety Steps To Making Secure Mobile Transactions

1. Set Lockscreen Security That Self-Destructs

Leaving your phone unattended on a desk for a few minutes could lead to someone accessing it to extract lots of vulnerable information. Which is why enabling lockscreen security is essential to keeping your smartphone away from unwanted users.

This is the easiet way to defend you and your data, and pretty much every smartphone has this feature. Manufacturers know privacy is important to users.

Some thieves would try breaking the lockscreen by trying out passwords but to really keep your data safe from brute force hacking, you could enable a feature that erases all data from your smartphone after a preset number of failed attempts.

On the iPhone, it can be enabled under Settings > General > Passcode Lock > Erase Data.

By default, this kind of feature is not available on the Android, but you can enable a similar effect with a free app like Autowipe .

2. Turn Off Settings When Not In Use

Hackers are able to do all sorts of things that will surprise you. Turning off phone settings like Bluetooth, Location Services, Near Field Communication (NFC), Wi-Fi and even Cellular Data when not in use not only conserves smartphone battery but also gives hackers less access to your device.

Location Services and Bluetooth should not be turned on when not in use as apps can use lots of location data without you knowing it. As Bluetooth is constantly transmitting your devices’ location and presence, it is possible for hackers to use it to gain access and extract any kind of information found on your device.

3. Don’t Download Shady Apps

Apps are probably the only thing that can harm you by stealing your personal data. When downloading an app, make sure that all the details of the app comes from the original ‘company’ or correct developer. Some sneaky apps might even trick people to download a "New and improved HD version" of a legitimate app, so make sure you check a few app details before downloading.

For instance a mobile banking app (or any app that handles financial accounts) should come from the bank itself as seen here on the iOS App Store, and not some other seller or developer.

App ratings and comments can also tell a story. If it’s a popular bank or financial service (PayPal) app that has no rating or comments, chances are it might be fake and you should be careful about downloading it and logging in. So be sure to download apps only if it has been rated many times and has multiple comments.

4. Be Wary Of Fishy Apps and Links

Viruses on mobile platforms can be present in many ways. It can be in the form of a ‘dirty’ app that runs in the background transmitting user data. As the Android system allows third-party apps or programs to be installed (very easily), Android users may open their mobile system up to attacks if they are not wary of the apps they download to their phone.

There are however anti-virus scanning apps and other tools on Android that can detect and remove anything that can harm your privacy.

iOS users do not have anti-virus scanning apps, basically because there isn’t a pressing need for it. Apple is very strict with what gets on the App Store and will take down apps that harm its users in any way. Skip clicking on links in SMS, MMS, or even email attachments from unknown or unauthorised senders. Avoiding anything fishy altogether is very simple and should be practiced.

5. Do Not Lose Your Smartphone!

Not losing your smartphone is sometimes easier said than done. Of course no one wants to lose their smartphone, but unfortunate circustances might happen. You might have left it in a bar, in public transport, someone pickpocketed you during your vacation or you might have grabbed someone else’s phone by mistake. In all accounts, chances are your phone is good as gone.

If these things have a tendency to plague your life (some of us are serial phone-losers), installing apps that can locate your smartphone on your iOS or Android device is essential. These apps can help you locate your phone and some have the option to wipeout the data on the phone so you don’t become a victim of identity theft.

Conclusion

To be fair, there is no one mobile platform that is safer than another. With so many devices but only a handful of platforms to choose from, attackers are able to target any platform they desire and the repercussions can be quite devastating to power users. We, as users have to be cautious with what we do to and with our smartphones.

If you work extensively on with your smartphone, you might want to look to BlackBerry phones as they have encryption features in their devices. Finally, because Android is an open source platform, it is more vulnerable to attacks as hackers can easily find vulnerabilities on each device; iOS or Windows Phone are less vulnerable because their system codes are not openly shared to  the public.

If you use the browser Firefox instead of Chrome and Safari, chances are you have heard about Firefox OS, the new open source operating system for smartphones and tablets from Mozilla. The organization is serious in working to make the Web open and accessible to everyone.

Though this new mobile OS is an emerging technology, it is quickly catching the eyes of users, developers, and critics. In this post, we will have a look at what’s in store.

Recommended Reading: Cloud Operating System You Can Try Out for Free

Q1: What is Firefox OS?

A: Firefox OS (codenamed Boot2Gecko or B2G) is a mobile operating system based on Linux and Mozilla’s Gecko technology. It is built upon open web standards like HTML5, CSS3, and JavaScript.

Mozilla has developed Web APIs so that HTML5 apps can communicate with the device’s hardware, which was only possible for native apps until now, e.g. Bluetooth, Wi-Fi, Camera, etc.

Mozilla Foundation has always worked to make the Web more accessible to everyone, and apart from Firefox OS, there are other tools such as the Firefox Browser, Firefox Marketplace, etc. However, some critics report that it a Mozilla tactic to reach a bigger mobile audience in order to level up to its primary competitor, Chrome.

Q2: How is Firefox OS different from Existing Mobile OS?

A: “Built entirely using HTML5 and other open Web standards, Firefox OS is free from the rules and restrictions of existing proprietary platforms.” – Mozilla

Firefox OS is different – you can think of it as something more than a browser running on a very lightweight Linux-based operating system. Every app in Firefox OS including the Camera and the Dialer is a web app, i.e. a website in the form of an app. Simple!

Web is the platform for Firefox OS – apps are built using HTML5 (along with CSS3 and JavaScript) instead of native languages. For comparison, Android apps are developed in Java; Windows Phone apps are developed in C++, C#, or HTML5, etc. Firefox OS is written entirely using open Web standards, with the exception in the lightweight operating system (codenamed Gonk) forming the base of Firefox OS.

Q3: What is The User Interface Like In Firefox OS?

A: Android is the inspiration for the user interface of Firefox OS. Hence, it has a lock screen, home screen and notification bar. However, there are some changes as compared to Android. The home screen shows a background image (along with the time and date) and has no support for widgets for now.

Sliding right on the home screen shows the list of installed apps; there is no dedicated icon to open the app drawer like on other mobile OS. Sliding left on the home screen shows the list of app categories, which when clicked, shows installed and suggested apps in the chosen category.

Long pressing the home key brings the list of opened apps along. Pressing the power button brings the power off menu. Pressing home and power keys together takes a screenshot.

Firefox OS’s user interface is better than iPhone or Windows Phone OS, but it is not as good as that of Android. Apps share common styling conventions, and thus provide a consistent design factor, making it easy for users to get around the app’s functionality.

Q4: How Are apps for Firefox OS different from apps for other Mobile OS?

A: Firefox OS, powered by Gecko engine, runs only websites in the form of apps, known as web apps. These apps are built using HTML, the same technology that powers the Web. These web apps will run on many operating systems in addition to Firefox OS. Every operating system (including Android and Windows 8) that runs Firefox browser will be able to run these web apps distributed through Firefox Marketplace.

Web apps will come in two forms for Firefox OS: hosted apps and packaged apps. Hosted apps will be hosted on Mozilla’s server and will be downloaded and loaded each time you access them, i.e., they are quite like web pages instead of apps, and they will not run if data connection fails.

Packaged apps will be downloaded once in the form of a compressed package and will be loaded from the local source each time you access them, i.e., they are quite alike apps on other operating systems. This is possible due to the local storage and cache features of HTML5 language.

Q5: What are the different ways to try Firefox OS?

A: Firefox OS, though still in its development stages, is worth a try. However, buying a phone for USD200 just to test the mobile operating system may not be in everyone’s immediate plans. Do not worry as you have other options to play with Firefox OS.

You can try Firefox OS in these four ways:

1. You can use Firefox OS Desktop client for your operating system. Check the instructions for downloading and building Firefox OS Desktop client.
2. Download Firefox OS Simulator add-on for Firefox browser (of course, you need to have Firefox browser on your system). Check the Firefox extensions page on Firefox OS Simulator.
3. You can build Firefox OS Simulator from source and use Firefox OS in a simulated environment. Check the instructions on how to build Firefox OS.
4. You can build Firefox OS from source and install it on your existing device (only if it is supported – check the question below).

It is suggested to use the Firefox OS Simulator add-on for Firefox browser because it is the easiest and safest method for trying Firefox OS. Building Firefox OS from source is tedious work and the Firefox OS Desktop client may or may not work successfully for you.

Q6: What are the devices that currently support Firefox OS?

A: Mozilla has released two phones with Firefox OS but so far they are only available for developers:

1. Keon by Geeksphone
2. Peak by Geeksphone

Firefox OS can be built and installed on some other compatible devices too. Check the guide for installing Firefox OS on a compatible device. It is even reported that Firefox OS can be dual-booted with Android on the Samsung Galaxy S2.

Some of the devices supporting Firefox OS are:

1. Unagi
2. Otoro
3. Pandaboard
4. Samsung Galaxy S
5. Samsung Galaxy S 4G
6. Samsung Galaxy S2
7. Samsung Galaxy Nexus

Q7: How does it compare with Ubuntu for Phones?

A: Ubuntu for Phones is a mobile operating system built upon the Linux kernel, same as Firefox OS. Ubuntu for Phones makes full use of the mobile’s small screen and touch functionality. The full area of the screen is provided to the app’s content (i.e., options or controls are hidden) and swiping over the corners bring the controls in view. Thus, apps on Ubuntu for Phones provide better user experience to mobile users.

Firefox OS has web apps but Ubuntu for Phones has native apps as well as web apps. Native apps use advance APIs and powerful features, e.g device’s hardware and services, etc. Web apps are developed using HTML5 and CSS3, and lack powerful features that are provided to native apps in Ubuntu for Phones.

Q8: What are the plans for Firefox OS’ Security?

A: Mozilla is actively working on the security of its new mobile OS. Many of the security features are inspired from Google’s Android. These are some of the security features of Firefox OS:

Device screen or SIM can be locked with a PIN.

Permissions required by any app are shown to the user upon installation. Low-risk permissions (e.g., web access, etc.) are provided automatically to the app while high-risk permissions (e.g. location access, etc.) are first confirmed from the user, and then provided to the app.

Permission Manager (or App Permissions) allows the user to manually allow or block permissions for an app. This is something missing in Android.

Mozilla plans to bring device encryption (using a boot-time password) to Firefox OS in near future. (Source)

Q9: What does Firefox OS mean for the Future of Smartphones?

A: Firefox OS, if successful, will change the way we use the Web. We are used to visit websites but Firefox OS will bring an era where we will be using Web apps more than Websites. Ubuntu for Phones will also support Firefox OS to help bring in this change.

Note: Android rooting is required.

Android users who want to root their phone are advised time and time again to perform regular backups. It is not uncommon to find a rooted Android device messed up so having a backup to revert to is always a good idea. Don’t want to stress out over the loss of precious data? Then, do a NANDroid backup.

NANDroid backup can only be done in custom recovery and many prefer this method in spite of other new ways of creating backups since it provides the user with a full backup of the entire system. But having to reboot into recovery every single time is a hassle.

Orange Backup allows you to create a full Android backup right from within the app itself with the option to upload your backup to your cloud storage and create a schedule backup exercise at any time you like. Plus, it’s free.

Recommended Reading: 20 Essential Apps For Your Android Phone

Here are shortcuts for fast access:

• Getting Started
• How To Setup Cloud Network
• How To Upload Backup To Cloud
• How To Schedule Backup
• How To Restore Your Backup

Getting Started

Note that Orange Backup only works with the following requirements:

• Only works for Rooted devices
• Supports CWM, TWRP, and Ex4 recoveries
• Supports Android version 2.3 and above

Get the Orange Backup. Install it and open it. You will be requested to permit a superuser request (Root Access). Choose Grant.

After that, let the app detect your device.

If the auto detection doesn’t work you can select your device from the ‘Auto-detected’ list. If you still don’t see your device on the list, manually download the patch and flash it using your custom recovery.

Select the brand. In my case, it’s Google.

I’m selecting Nexus 7 as the device model.

Then choose your backup type, depending on the version of custom recovery that you have. If you are using CWM recovery, I suggest you to choose CWM Full – bigger size (default).

Next tap on CONTINUE.

Then you will be prompted with a ‘Cloud Support’ window where you can connect to your Cloud Storage. Pick the storage support you need or do this later by tapping ‘Later’. The next section will deal with the cloud storage setup.

To start creating your backup, tap on the Magic Brand icon at the top right.

Next, tap on START to start the backup.

Let the backup run till it is done. You can also tap to hide the backup and let it run in the background.

Once the backup is completed you will be prompted with a window like this. And you’re done!

Setup Cloud Network

If you did not setup your cloud network earlier, head to Settings. Choose ‘Cloud network’.

Choose your desired cloud storage. Then, tap on CONFIGURE.

After that you will be prompted with a page requesting for your permission for access. Choose Allow.

How To Upload Backup to Cloud

By default, the upload would be done automatically by the app after you have setup a cloud network. But if you want to do the backup manually, follow these steps.

Return to the backup page, at the top right, there are 3 dots beside the Magic Brand Icon. Choose Upload last backup.

Next choose UPLOAD to start uploading.

When the upload starts, you can watch the progress at your notification bar.

How To Schedule Backup

Head to Settings and tap on Schedule backup at the top of the list.

Pick a time to schedule your backup and tap on SCHEDULE.

How To Restore Your Backup

To restore your backup data, go to the Backup page and you will see your most recently created backup. Tap on it.

To restore your backup simply tap on RESTORE. This will reboot into recovery.

Every recovery should have a similar layout of functions. Head to Restore to start restoring your backup.

Select your recently created backup.

To restore your backup fully, leave all options ticked. Next, ‘Swipe to Restore’.

The process will start.

Congratulations, you have successfully restored your backup.

Problems?

If you are new to this, there is a chance that you may have a problem or two pop up during the process. One of the more popular ones could be caused by the user selecting the wrong device-specific path. The right path is needed to tell the script where to find the boot and recovery partitions. You can find the patches here.

Backups can be done all at once rather than by selecting particular partitions to backup. Orange Backup will handle backing up all the relevant partitions for you, so unless you know what you are doing, just leave it to Orange.

Be advised that you should only use the SD-EXT option if you use apps like app2sd, link2sd, data2sd, etc. Otherwise leave that option disabled. For more support, click here.

I have always been against the principle of helping people to prepare for an interview. All the interview tips are great to help them prepare for joining the workforce but in the process, their unique personalities (and habits) lay buried under the cover stories about commitment, passion and skillsets. It’s all so scripted.

This is probably the reason why one-hour interviews fail to unearth the real person within; and only after the employee has joined your company that you realize they have lied in their resume; they are just all talk, no walk; they cannot work under minimal supervision or with any other team members; or they have the tendency to make the company adapt to their likes and preferences (true story).

Recommended Reading: Weird Questions Asked During A Job Interview

The Existing Problem

When advice-mongering sites give candidates sample answers to give, and the candidates take those sample answers to their interviews, everyone becomes the same faceless drone. That’s when recruiters may have to resort to unorthodox interview methods to separate the sheep from those who know what they are doing.

And let’s face it, half an hour is real easy to fake through, and does little to nothing to help you decide. Plus, most resumes are spell-checked (any interview guide will suggest doing that) and hyped up, so if you base you base the recruitment on just their CV, the candidate in real-life may come up short of your expectations.

Hiring talent

Unless you are searching for someone who will only be doing one thing over and over again, chances are you need them to be great problem-solvers. But don’t just ask them how they would solve a problem, introduce these problems into the interview (not during the probation period, or after they are confirmed).

If you want your employees to have certain ‘talent’ criteria, there should be an effort to make them display their talent in the interview room itself. Heineken did exactly this to sort through candidates for their internship program. It’s a classic case of "don’t tell me, show me" and it’s just brilliant.

But the best video to really illustrate this is the test scene in Men In Black. I know it’s just a movie but the principle’s the same. Put them in an uncomfortable position (see: make things ridiculously uncomfortable) and see how they react.

Put Ants In Their Pants

Textbook methods are only going to get you average, mediocre candidates to join your company. Short of putting ants in their pants, there are a lot of things you can do to spruce up the atmosphere in the interview room, for instance:

Asking off-track questions

Simple questions like "How did you get here this morning? Was the traffic bad?" can ease them into putting their guard down, and revealing more about their true self.

Plus, you get an inside look into their lifestyle: does he take public transport, does he live far from here, does he drive, does he still live with his mother, and if he has an opinion on how to solve problems, or if he is the wait-and-see kind.

Distract them

Put up special items in the room, items that are designed to distract. One of the things that will work pretty well is a mirror, or a reflective surface. You’d be surprised at how many candidates think looking good during the interview trumps paying attention to the questions.

The best place for it, right above your head, behind you. Even when they steal peeks, you’d notice.

Test Their Drive

Some jobs require you to be non-tolerant of certain situations. A chef should be picky about the quality of his raw materials, a restaurant manager about cleanliness, or a sales rep about sale quotas. Apply this to the interview process, and you can give an editor an IQ test that is riddled with mistakes, a biodata form in Comic Sans to a designer to fill in, or put a hideous vase near the corner of the interview room when interviewing an interior designer.

When their natural instincts get the best of them and they voice out about these ‘atrocities’, you know you got the right person for the job.

Catch Them Off Guard

Rather than resort to oddball questions, there are many other ways to catch a candidate off guard and see how well they approach problems. For instance:

• in your expected salary section in the company form, put only 3 boxes and see the answers that candidates give
• turn up late for the interview and say, "Oh, you’re early" and watch how they tackle with the situation
• bring in the resume for another (non-existing) candidate, explain the mistake and watch how the candidate try to sell him/herself and trump the ‘other’ candidate.

Conclusion

Sometimes, though, it boils down to how you click with the candidate. You might even consider trying to simulate an actual working environment or to explain how things are going to work if the candidate gets the job. Understanding where candidates are coming from — after peeling all the surface layers — may help find you a candidate that will be a great addition to your company.

Recruiting is a costly endeavor but it is not worth getting a bad apple to join in the growing orchard. Rather than choosing to extend the lengths of probation periods, you can always just throw them into the heat of the battle and see how they escape the zone or better yet, win the battle.

What interview methods have you tried out which helped you catch a great addition to your company?

jQuery is one of the most popular JavaScript library on the planet, which offers a lot capabilities. Using jQuery, we can easily manipulate – replace, insert, remove – elements within an HTML document and even create animation.

In this post, we are going to take a look at how to create or insert new elements within DOM with the jQuery Append method.

Recommended Reading: JQuery: Creating And Inserting New Element – Part II

Insert New Element

Appending is a method of creating and inserting new element within a specified element, it technically inserts the new element right before the closing tag of that specified element – thus becoming its child element.

Before we proceed, we will first show you how to do it purely with JavaScript, so you can see how much simpler jQuery can make the method.

In JavaScript, before we are able to add an element to the document, we need to define (create) the element. We can use .createElement() function to create a new element. In the following example, we create a new <div> element and store it in a variable named div.

 var div = document.createElement('div'); 

By the time we define a new element with this function, it only creates the element, but it doesn’t insert the new element to the document. We need to call one function, that is .appendChild() to insert that element. In the following example, we will insert this new <div>, simply, in the body document.

 var div = document.createElement('div'); document.body.appendChild(div); 

If we inspect the document in Developer Tool, you should see that our div element has been inserted there, before the body closing tag.

Now, let’s see how we do the same thing with jQuery. jQuery makes manipulating document elements simpler. jQuery provides a function called .append().

In the following example, we append a <div> to body document.

 $('body').append('<div>'); 

Like what we have demonstrated with JavaScript, the code line above returns the same result. It creates a new element and inserts it before the body closing tag. But we did it in fewer lines of code.

A note to remember, JavaScript does not save or alter document physically. Thus, when we view the actual document source, the elements that are generated by JavaScript will not be found.

Insert New Element with Text

Let’s go a bit further with this method. This time, we will insert a new element with text inside it. Like before, we will see how to do it purely with JavaScript.

To do so, we need to define the new element and the text. Since we will add text, we can create a paragraph element in this example.

 var p = document.createElement('p'); // create new paragraph element 

Next, we need to define the text. The text in JavaScript is created using .createTextNode() function. In this example, we store the text value in a variable named txt.

 var p = document.createElement('p'), txt = document.createTextNode('This is the text in new element.'); 

At this point, we have two variables, which store the new element and the text respectively. However, they are still separated and can stand alone. To insert the text to the new element we have created, we can run the same .appendChild() function, like so.

 p.appendChild(txt); 

Then again, we run .appendChild() to insert the element to the body document.

 document.body.appendChild(p); 

If we see it in the browser or through the Developer Tool, we get:

In jQuery, the process is simplified. Instead of separately defining two variables for the text and the new element, we can write them together with .append() function, like so.

 $('body').append('<p>This is the text in new element.<p>'); 

The above code essentially does the same thing, it will insert the the text with <p> element to the body (before the body closing tag).

Final Thought

You can see that using jQuery with .append() function, we are able to dynamically add new elements in a slimmer way than using pure JavaScript. But of course, there are times when using the JavaScript is better than loading jQuery Library – which is why we will also show you how to do it.

This article is only the beginning. In the next part, we will see how to insert element in more advanced way. So, stay tuned!

If you have some questions upon our discussion in this post, feel free to add it in the comment box below.

Scripted is a lightweight and nimble general purpose code editor that aims to make a developer’s life easier. The editor has been implemented in pure JavaScript, CSS and HTML. VMWare’s focus has been to provide a better, more organized and easily manageable coding experience when using JavaScript.

The editor itself is based in the browser. It will run locally on your machine (with a Node.js instance performing editor operations). As a result, it becomes mandatory that you have the latest version of Node.js installed on your device in order to run Scripted.

Recommended Reading: Top 10 Free Source Code Editors – Reviewed

Scripted’s Major Features

Can’t wait to see what Scripted has to offer? Well, here is a list of offerings:

1. Extremely fast and light-weight.
2. Comes with syntax highlighting (for HTML, CSS and JavaScript).
3. Errors and warnings for basic cases such as module resolutions.
4. Content assist (again, for HTML, CSS and JavaScript).
5. Smart hovers (hover over a JS identifier and see the inferred type signature).
6. Smart navigation (Press 8 over an identifier, and you will be navigated to its declaration).
7. Properly integrated JSbeautify.
8. Apart from the main editor, you can also open a second editor in the side panel.
9. Key bindings can invoke external commands.

There are a lot more features but you’d probably have more fun finding them out on your own.

Reasons Behind Scripted

So, why on earth did VMWare bother creating this editor in the first place? VMWare cites a couple of reasons. According to them, many users prefer lightweight code editors over full-fledged Integrated Development Environments (IDEs). IDEs come with their own added level of awesomeness, in the form of content assist and error indication, which many lightweight editors fail to match up with.

So what is a developer to do? Opt for the lightweight alternative and compromise on features, or go for the feature-rich alternative, and compromise on speed instead? Neither! Create a new lightweight editor, rich in a decent number of features!

Furthermore, in simple terms, cloud-based solutions that run entirely in the browser itself are the way to go, and Scripted doesn’t lag behind on this front either. And the fact that it relies on your own system means that you do not even need a working Internet connection all the time.

Under The Hood

According to VMWare, the editor technology comes from Eclipse Orion. I personally feel that this is a smart pick for an editor. Orion provides a wonderful coding experience, and VMWare couldn’t possibly have done better with any other editor.

Beyond that, as mentioned above, the server level things are dealt with by Node.js.

Links:

1. Scripted on Github
2. Scripted Wiki

Conclusion

So, where does Scripted go from here? VMWare is working on a plugin system as well as better integration with Google Chrome Dev Tools. Furthermore, there are plans for adding enhanced functionality to the side panel, among other things.

What do you think of this new code editor from the stable of VMWare? Will you be giving it a shot? Feel free to share your thoughts with us in the comments below!

If you are a photographer, creating a portfolio is certainly one of the most important things you need to do. There are a number of benefits that a portfolio can bring you: it helps you showcase your work online, pulls in new clients and builds a strong and wide online exposure for your work.

The sad thing is that, not all photographers possess technical skills for building a portfolio. Some may feel a little intimidated due to lack of coding skills and the others may think that building a portfolio needs a lot of time as to them, it’s an intricate process to go through.

The good news is that there are a number of platforms for you to build an online portfolio for your work without wasting your precious time and with no coding skills required.

Here is a list of the top 10 portfolio-building websites for photography lovers, in random order.

Recommended Reading: 10 Free Online Tools To Create Professional Resumes

1. Photoshelter

Photoshelter is one of the most popular platforms for building photography websites and online portfolios. The site allows you to control the layouts, fonts and images of your portfolio with ease and mobility.

The bottom line is that it doesn’t require any coding. Photoshelter doesn’t only provide you with tools to showcase your work; it also attracts buyers to purchase your photos. Its integration with social media sites and SEO turns your photo business strong and solid.

2. Orosso

Orosso is a portfolio building tool that allows its members to build professional and smart portfolios and maintain them easily. It doesn’t take much time to build a photography portfolio website. With Orosso, the process turns out easier and simplistic. In a matter of minutes you can have your portfolio created in a flash and highly customizable towards your looks and requirement.

Artists, designers and architects may consider Orosso as a viable option to create portfolios for a strong online presence. You can try it for 14 days and decide whether it’s worth a pay or not.

3. Foliolink

Foliolink is an online portfolio-building tool specifically for photographers and artists who want to build professional portfolios and sell their work online effortlessly. It doesn’t require any knowledge of HTML or CSS coding to get the portfolio created.

Foliolink features iPad and iPhone shadow sites, customization and e-commerce tools, and Search Engine Optimization for your online portfolio. You can create a free 7-days account before deciding what plan suits you best.

4. Zenfolio

Zenfolio is an online tool that helps you make amazing online portfolios fast and painlessly. Whether you are photographer looking for building a stunning portfolio or a photographer serious about selling your work online, Zenfolio is the right choice for you.

The user-friendly ecommerce interface, point-and-click interface and easy customizers are the features that can make you complete your photography website in a flash. The subscription fee starts at $30 per year. However, they provide a free premium account for trial (there is nothing to lose).

5. FolioHD

FolioHD is a self-hosted portfolio platform for photographers, artists, architects, models and designers. They offer essential features to build a website in a simple way and according to the plan you register for. In folioHD there are 3 plans: basic, power and pro. The basic only supports up to 36 uploads of media files, but the plan is free.

On the other hand, the power and pro plans provide more exciting features such as, Google Analytics, privacy options and the Fotomoto access. The power and pro plans only differ in the amount of uploads, which is 1000 and 2000, respectively.

6. Folio Websites

Folio Websites is a portfolio building website for creating mobile and professional photography websites. What makes Folio Websites stand out from the overcrowded marketplace, is their clean, simple and clutter-free design.

They work on WordPress, which is highly customizable, offers SEO benefits for better search ranking and mobile compatibility. You can register a premium account starting at $14.60 per month.

7. 1X

1X is more of a social network and online community for photographers than a portfolio building tool. However, photographers can use this platform to get strong exposure with thousands of users in this community.

The interesting thing about 1X is that, not every photo you upload is going to be published. Every photo you submit is selected for publication by a curator. 1X has a forum community where professional designers discuss the projects they are working on and give suggestions for a better craft. You can give it a go for free.

8. 500px

500px is a personalized portfolio building tool and market platform for photographers to sell their work. This platform helps photographers to create online portfolios easily.

In 500px, you maintain and control your site whenever you need and without having to touch any code. They provide their members with great features, such as, advanced tracking system of visitors, unlimited photos upload, custom domain name and a photo store that allows selling of photos online.

9. SmugMug

SmugMug is a platform for digital photo sharing where photographers can expose the masterpiece of their work to a community of thousands of members. SmugMug provides the users with beautiful and elegant themes to build professional portfolios that spark interests.

The portfolio building interface is simple to work on, with easy customizers to select photos, fonts, colors and themes. For wider exposure, share your work on Facebook, Twitter and other social media networks.

10. Pixpa

Pixpa is a portfolio building site that allows photographers to create amazing and elegant portfolios to show off their works. It provides you with hundreds of pre-designed templates to choose and you can select the one that best fits your needs in just a single click. Customizable fonts, backgrounds, colors, menus are among a plethora of features to build your site with ease.

If you are craving for your own domain name to build a strong online presence, Pixpa also supports that. In Pixpa you can also sell your photos online using an e-commerce integrated platform called Fotomoto. Give it a try for 15 days (no credit card required).

We’ve all heard it before. The inevitable request from a client to revise a design to make it more… something. The client isn’t sure what, exactly, but they know that whatever they’re looking at on the screen isn’t quite "there" yet. Sometimes they’ll even utterly confuse you with a vague or nonsensical request, like "make the black blacker," or "it’s just not poppy enough."

These types of inane directives have become so legendary in freelancing culture that, whenever they get mentioned out of context, any freelancer listening won’t be able to help giving a sympathetic eye roll or shake of the head. There are even whole blogs and other creative efforts centered around the weird things our clients sometimes ask of us; I’m sure you’ve heard of at least one.

Recommended Reading: 5 Ways To Tame Difficult And Problematic Clients

Had Enough?

As freelancers, we all want to go above and beyond to please our clients and ensure that we maintain a good relationship with them. We want to remain in good standing to get referrals and repeat business and bolster our reputations. But sometimes, some clients really can try the patience of even the most saintly of designers.

Read Also: 11 Signs Of Problematic Clients You’ll Meet In Freelancing

Fortunately, there’s a simple solution that many designers often overlook that can alleviate or even completely remove these little professional hurdles. It’s called saying no.

We’re going to go over some of the different situations in which a designer can use this powerful tool in a respectful and courteous way, while still being firm about holding onto their sanity.

The Wonders Of No

It’s really quite remarkable, the power of this "no" word. I think every designer should add it to their vocabulary if it’s not already there. Practice simply saying no to requests you find strange, incomprehensible, or just plain silly, and see what happens. You can try it out first on a client who you know has a ‘thick skin’.

Later, you can move on to establishing what you will and won’t tolerate from the very first meeting with any new client. In my experience, a lot of clients are actually just trying to get a feel for your communication style when they make an offhand, impossible request. They may be testing you to see how much you’ll let them get away with.

Don’t Let Your Guard Down

It sounds horrible, but the harsh truth is that many people will be as naughty as you let them be. They will take the opportunity to con you or treat you badly, to justify underpaying you or even not paying you at all, if they believe they can.

Not everyone is like this, of course, but you can usually tell pretty quickly whether someone is looking to scam you out of valuable services. Putting your foot down by saying no to the first signs of disrespectfulness or lunacy will set a precedent for the entire length of your interaction with your client. Initial impressions are hard to change, so it’s important to make them count.

Don’t Just Blurt It Out

First things first: when I say that designers need to start saying no, I don’t literally mean that you should respond to your clients’ requests with a blunt negative. Saying no to a paying client requires a bit of finesse to keep the working relationship in a healthy place. I recommend writing out a few responses that you can use as reference in a future situation.

Something like "I’m sorry, but I’m going to need a more specific answer before I can give you what you want" usually works well, and you don’t actually have to blurt out "noooo!" like a two-year-old, (or Darth Vader). Rehearsing a reasoned, courteous response to an insane request helps you keep your cool, and it also keeps you on track to achieving your main goal, which is solving your client’s problem.

Not A Therapist

Clients can be a kooky bunch – no doubt about it – but it’s not really your job to tend to them like a personal therapist. You can go ahead and let them be as crazy as they want to be, as long as they’re clear with you about what they need and how you can provide it to them. And as long as they pay you in a reasonable amount of time, of course.

How Much Rope Should You Give?

It’s up to you to decide how far to go with accommodating your client regardless of whatever unclear request he or she will think up. Sometimes it makes more sense to simply refuse to go any further on the project until you receive a request you can work with, since you’d only be guessing at what the client wants anyway.

Also, because there’s been such a lack of clarity, they may become even more upset if you do not deliver what they want, whatever that is. Not only will you have wasted your time, but, depending on your prior negotiation, you might even have a contract breach on your hands.

Strive To Communicate

Alternatively, you could take more of an "onion peeling" approach, testing and rephrasing different questions until you and the client both arrive at a communication pattern that gets each of you the information you require to move forward.

This method is certainly more time-consuming, and it’s not unheard of for designers to add an additional amount to their revision fee (interrogation tax?) if it starts to take too long to achieve clarity.

It’s Not Always the Client’s Fault

That’s right, I said it. Sometimes a client gives you a vague answer… because you asked them a vague question. It really helps to learn the proper ways to phrase a question so that you get the answer you’re looking for. Specifically, the thing I’ve found most helpful in achieving clarity is asking the client to give me a clear example of what they need.

Confined Selections

This can take a few tries, for example, if a client wants a "prettier" typeface for their website, but can’t exactly articulate what they mean by "pretty," you can ask them to browse a selection of fonts until they find something that is "pretty" enough for their taste.

Read Also: Quick Guide To Typography: Learn And Be Inspired

This is an example of what I call controlling fluctuations. I don’t know about you, but I like to have as few surprises or brick walls (as possible) when dealing with clients. Learning how to ask the right questions is crucial to getting through those unnecessary barriers so you can deal with the important stuff.

In Conclusion

Designers speak a cryptic language all their own, and sometimes it can be difficult to bridge the gap between what you mean to say to a client and how the client will interpret it. As the professional providing the creative service, it’s your job to make sure there is clarity all around. Your client is paying you to solve their problem, and you can’t do that unless you first establish exactly what the problem is.

With the introduction of CSS3 Media Queries, we are able to shift and apply CSS between different viewport or device screen sizes.

We can detect the viewport width threshold, which we want the style rules to be applied to, with the min-width or max-width declaration within the Media Queries, as we have shown in our Responsive Design Series.

• View Demo

Device Orientation

Mobile devices can be operated with two orientations, Portrait and Landscape. In particular cases, we might also need to apply these styles based on the devices orientation apart from the device viewport width. To serve different stylesheets based upon screen and orientation declaration in the stylesheet link:

 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

This will apply the styles for iPad, iPhone, Android, Safari, and Firefox. Alternatively, we can also add the orientation declaration within the Media Queries, like so.

 @media all and (orientation:portrait) { /* Styles for Portrait screen */ } @media all and (orientation:landscape) { /* Styles for Landscape screen */ } 

As W3C described, regardless of the device type (mobile or desktop), when the viewport height is larger than the width, the orientation is described as portrait. Conversely, it is described as landscape when the width viewport size is larger than the height.

Preview

Below are some of the test preview in iPhone, iPad and Desktop with Landscape and Protrait orientation.

iPhone (Portrait)

iPhone (Landscape)

iPad (Portrait)

iPad (Landscape)

Desktop (Portrait)

Desktop (Landscape)

You can see for yourselves the demo in action and download the source from the following links. Resize the browser window or turn your device screen to see different results as shown in the screenshots above.

• View Demo
• Download Source

Further Resource

• iPad Orientation CSS — Cloud Four
• CSS3 Media Queries — W3C

In order to create a proper website for people, you should start think in the same way they do. When it comes to designing a gorgeous restaurant website, what should you put your mind to? Well, why do people like going to restaurants? For the food, the ambience, to relax and have a good time with friends. Keeping that mind, restaurant websites can be real useful to the dining business.

Guests can have an opportunity to be acquainted with your menu, style, interior and services. Moreover, an online website also means that you can receive orders online as well as reservations for those interested to check out your restaurant. The website is a necessary attribute of any modern business.

So today I’d like to talk about creation of a proper restaurant website design. It seems easy on the surface, but still there are a few tips you totally should follow in order to create a gorgeous restaurant website that you can be proud of.

Recommended Reading: 9 Ideas for Building Great Websites With Less

1. Target Audience

From the very beginning you have to find out your target audience. If there is a university near your cafe, students will probably be your frequent visitors. If there is a business center not far from your restaurant then expect business-executive types to lunch at your place. Check your surroundings for the type of target audience, their age group and ultimately their preferences.

After the target audience is defined, you can begin website creation. If it is a students’ cafe, a clean and bright design will be the perfect choice. But if you are trying to engage the more serious managers and office workers, go for an elegant or professional style.

CAU Restaurant

Also, you can arrange “happy hours” or some other discounts to attract more customers. Don’t forget to create an extra website page, slider image or pop-up window for a brief description about it. Here you can see an offer in a slider at the website header. The visitors of this website are well-informed, because the offer is on the main page.

Giraffe

2. Keep It Simple

Every good restaurant website should include important and required pages, such as a home page or main page, the menu, the ‘About us’ page, and a Contact form. It’s critically important to create all these pages, because without any of them the website will never be complete. You can also add a review page in order to show your visitors what people say about your restaurant.

Cantilever

Also, try your best to keep it as simple as possible. There is a design principle noted by the U.S. Navy that is called KISS. It means “Keep it simple, stupid”. By this principle, simplicity and a user-friendly design is your main goal. If a user doesn’t find what he or she is looking for in three clicks,it’s byebye for good.

3. Color Sheme

Have you noticed that the color palette of most restaurant sites consists of four main colors: brown, white, red and black. Of course, these days you can see a full spectrum of colors on restaurant websites, but these main four colors were selected for a reason.

Brown color symbolizes reliability, stability, and adherence to tradition.

FIG

White gives a feeling of freshness, purity, and freedom.

Solegiallo

Black is associated with mystery and power of creation. Moreover, food photography looks great on a black background.

Daimu

The color red is most often used by fast food restaurants as it is the symbol of passion and secret desires. Always try to take into consideration the fact that colors influence a user’s behaviour. Use this knowledge to your benefit.

Backyard Burgers

4. Easy-to-use Contact Form

Your restaurant website should have an easy-to-use contact or feedback form. It’s not enough just to leave an email address or a phone number on the contact page. A contact form lets you add fields which can help narrow down what the person is trying to contact you for.

Also, don’t forget to attach a map to the form in order to show the location of your restaurant, that will remove questions about the location of your restaurant.

Cannolificio Mongibello

5. Stay Sociable

There are lots of social websites you can use to share information and find potential customers. Let your visitors follow your news, updates, and even staff via social networks. Stay open to communication, be friendly with your customers, be kind and they will act in the same way.

The Noodle Box

“Word of mouth” is a quite strong motivator. You can turn it to your advantage. Just share information that is really useful and interesting to your target audience, for example, the rules of proper nutrition with the corresponding dishes from your menu.

6. High-Quality Images

On the Web we are constantly fighting for attention and the website is usually on the front-end trying to get people to click in and find out more. Hence, it needs to be attractive first of all. Large background photos are an amazing choice for restaurant website design.

Also, you can add some high-quality images to the menu page in order to demonstrate how your dishes look like. Make the images “delicious”, they are supposed to arouse an appetite. Food photography should awaken a desire to try them out, because when they do, people can’t wait to step into your restaurant and get a bite.

Easy Bistro

Moreover, you can add some interior photos to your site to convey the cozy atmosphere that prevails in your restaurant.

7. Killing “About Us” Page

Your website is an instrument to win over the crowd and to top your competitors. The “About us” page should be unique and make you stand out from the crowd. Try to find your personality layer and add it there. Show your potential customers how friendly and professional your team is.

Square

People read the web information differently from the way they read books and magazines. They read fluently, selecting the key points for themselves. Keep this fact in mind and highlight the main moment with bold font. It will help not just to perceive the information better, but also to index it for search engines, such as Google.

Bonus Tip: Logo Placement

I’d like to share one more small tip with you. Almost all websites try to place the logo on the top left corner of the page. But why?

Napoli Centrale

According to the scientific research, when a person opens a website, his or her view runs from left to right. People are used to reading in a such way. So, the best place on the page to put a logo is the top left corner.

Conclusion

These tips are designed for beginners, but I hope that the pros appreciate them as well. Define your goals and try to achieve them with the help of your website. Remember that perfection is a journey, not a destination.

If you have more tips to share, let us know.

Rooting your Android phone is the first path towards customizing your phone for optimum use. Once you have your device rooted, you will not only be able to use certain apps, you can also remove bloatware, boost battery life, make your Android work snappier and faster plus further customize the internal systems for better performance you won’t be able to get from a non-rooted phone.

While you may enjoy exploring your Android device, rooted, please remember to always have a backup of your Android device before you begin any attempts to install these 30 must-try apps for rooted Android phones in this list.

Recommended Reading: 20 Essentials App For Your Android Phone

Orange Backup

A full Android backup that allows your phone to revert to its most recent stable state is known as NAndroid backup. With Orange backup, you will be able to create a full Android backup right from within the app itself and even upload backups to the Cloud.

It also supports scheduled backups and popular Android recovery like ClockWorkMod and TWRP.

Greenify

Overtime your Android will be filled with apps that consume a lot of your battery life, or worse make your device slow down. Greenify will help to identify and hibernate your battery-sucking apps when you are not using them.

This is different from freezing the app (which renders the program useless), a method other similar root apps use. Greenify merely puts those apps to sleep while not disabling their function entirely.

Screen Standby

The frequent display timeout that is causing your device to lose connection when the screen is off can be rather annoying. To retain that connection whenver your screen is turned off you can use Screen Standby for that.

It will also prevent your device from overheating especially if you are connecting it via MHL/HDMI for a long gaming or movie streaming session.

Chainfire 3D

Stil stuck with Froyo or Gingerbread, unable to run a high-end game? Chainfire 3D serves as the ‘middle man’ between your apps and graphic driver, allowing users to disable or enable graphics to run newer games, even on older devices.

DataSync

This awesomely crafted app works perfectly especially for users with more than one Android device. Sync your data between multiple devices with 3 quick options: over Wi-Fi, Dropbox or FTP.

Titanium Backup

Here is another popular backup app. With this app you can set a schedule backup so that you will always will have that important data saved in your phone. You can easily transfer the backups to your desktop via a USB cable and restore it at anytime with Titanium Backup.

BusyBox Installer

BusyBox is an app that combines many common UNIX utilities into a single, small executable. Android is based on Linux which is also capable of running complex UNIX commands. BusyBox simplifies this type of process.

Many rooted apps and custom roms depend on BusyBox to run their script and make them work, hence some custom roms would have this automatically installed.

Samba FileSharing For Android

Samba FileSharing enables you to project your SD Card storage in your Android and broadcast it all over your network for you to access its files. The settings are similar to what you setup on your desktop and you can even access the shared folder through another Android device too.

Pimp My Rom (Alpha)

Here’s a one-in-all tweaking app. There are just so many features and tweaks that you can enable and patch to improve your Android experience.

It also includes init.d scripts that are full of tweaks and a simplified version of buildprop to make it easier time to decide on the perfect settings for your device.

OTA RootKeeper

A very straightforward app where you can keep your ‘Root’ access by saving it as a backup. Once you have the backup, flash over your Android device OTA updates and restore your root permission through this app. Simple!

Trickster MOD Kernel Settings

A tweaking tool for your Android device that supports many kernels. One of the fewer apps that allows you to overclock your GPU while having the combined functionality of many other apps in one convenient application.

CatLog

A logcat app where you can find details on what is going on in your Android device. While scanning your logs, Catlog make it easier for you to do stacktraces to debug your apps. A neat tool for developers or testers.

LBE Privacy Guard

Akin to an interactive desktop firewall, this will scan and list all the permissions required by every app you install. Through this list you will be able to customize your own permission settings to decide what kind of data the app can take from you.

Don’t worry about losing your settings, because this very thoughtful app will remember them.

Root Uninstaller

Not happy with the bloatware your Android phone takes with it? Freeze, uninstall or hide any unsightly or useless app with Root Uninstaller and free up some space for apps that matter.

Warning: Removing system app carelessly might lead to a system crash. Know wha you are doing before you do it.

GMD GestureControl Lite

Want to breeze through your phone with gestures? Here’s an app that can help you setup multi-touch gestures to run special action commands for your phone or tablet.

Market Helper

Certain apps are optimized only for phone, or only for tablet. Market Helper helps you to transform your phone or tablet into the (popular) Android device of your choice, allowing you to download that device-specific app you want from the Play Store.

DiskDigger

If you ever lost a photo before, DiskDigger is a nifty little app that allows you to dig back all your deleted photos easily. This free app include an experimental feature where you can retrieve even your deleted videos too. Visit this link for the instruction on how to use it.

TopNTP

The objective of this app is to force your GPS to lock onto your location as fast as possible. It includes many different customized gps.conf file for you to test, to get the best possible results. You can use your own custom config and apply it via this app too.

AFWall+ (Android Firewall)

AFWall+ helps you restrict access to the data networks (2G, 3G or Wi-Fi) to cater to the needs of your apps. This can help you save battery juice and data usage while roaming.

full!screen

Wish you can hide the navigation bar at the bottom of your device to have a real full view of your application? This app lets you hide the entire system bar in fullscreen mode while still keeping two configurable softbuttons which can be changed in position, size, color and transparency (or completely disabled).

Font Installer

This app comes with hundreds of custom fonts ready for you to install. Use any custom fonts just by saving it into your device and install it from your device storage.

Link2Sd

A useful app for users who are dealing with limited storage on their device. This app will help you to move your installed app to the SD card on your device so you can free up more space in your phone memory.

Battery Calibration

Android batteries after long usage may need to recalibrate due to an effect called SOC mismatch. There are many battery calibration apps but this one has a simple UI and a notification that tells you when you have hit a full charge.

To start using it, tap on the ‘Battery Calibration’ button when your battery hits 100%.

StickMount

Through the use of OTG cable and by using this app you will be able to automatically mount and dismount USB device that is plugged into your Android.

Rescan Media ROOT

For users you keep a lot of songs in their Android, media scanning is going to take a while to complete. Rescan Media allows you to skip a media scan upon booting and will only run if you started any media app on your device.

Wireless Tether for Root Users

Tethering is a feature that allows you to turn your smartphone into a mobile hotspot. This app will allow the phone to connect using their respective data network and setup a WiFi hotspot while distributing bandwidth to connected clients.

Wifi Protector

Use Wifi Protector to protect your device from outside attack, especially on public wifi. This app will protect and inform you if there is any live attack on your device including options to enable vibrations or ringtone so you could react to it immediately.

Push Notifications Fixer

Do you have delayed push notifications on your Android device? Get this app which fixes the infamous late notifications from apps like Facebook, Gmail, Twitter and others. You can even set the heartbeat interval to 1 minute to make sure you never late in getting notifications.

Root Browser Lite

Root Browser Lite will provide you with all the necessary features on top of root access permission that you need to make changes in your system files. You can view and edit any file or even search for files and folders all within this app easily. For a Lite version this app is pretty thorough.

DriveDroid

Its ideal to have a rescue system without having to burn your Linux into a DVD or USB pendrives. Host your Linux operating system on your Android and connect it to your PC to have it booted to Linux whenever you need it.

DriveDroid also includes some downloadable Linux images in the app for your convenience.

With cloud storage, we rarely need to bring or store our files in a thumbdrive or in our devices anymore. Sometimes, however, you need to convert some of the files, but as they are in the Cloud, converting them means needing to download the file into the computer before using a desktop conversion software on it.

Wouldn’t it be easier if there’s a way to convert your files straight from your cloud storage and automatically save it in your storage after conversion? If you are a user of Google Drive, you might want to check out DriveConverter.

DriveConverter is a web app which allows you to convert files that you save in Google Drive. The type of files it can convert are documents, images and audio.

Recommended Reading: Convert Video And Music Online Free With All2Convert

Convert Google Drive Files

To start, go to DriveConverter and click on "Convert Files Now" button. It will connect to your Google Drive account and request permission to access your Google Drive account.

After that, you may select and convert Google Drive files right on DriveConverter webpage.

You can also browse to your Google Drive account and select a file that you wish to convert. Right click on the file then click Open With > DriveConverter.

It will ask you for permission to access your Google Drive.

After granting permission it will redirect you to the converting page. You will then be asked to choose what format you want to convert the document into. Let’s choose PDF.

You can automatically save the converted word document into your Google Drive by ticking "Save to drive when finished?".

Click on Convert and it will start to convert your file. When the converting is done, it will show Save Complete which means you can find your file in your Google Drive. You can also choose to download it into your computer via the Download button.

Convert Newly Uploaded Files

Click on "Convert New Files" and on the left sidebar, click on "Upload". Then, click on Choose files to upload and a directory will open up. Look for your file. Alternatively you can drag and drop the file you want to convert into the space.

After selecting the file, it will bring you to the converting page. Do ensure you tick on "Save to drive when finished?" if you want to save the converted file straight into your Google Drive. Then, click on Convert. That’s it!

Supported File Types

DriveConverter is compatible with documents, audio files and images. For documents, it can convert:

• From DOCX, DOC, RTF, TXT
• To PDF, XML, RTF, HTML, DOC, DOCX, TXT

For spreadsheets, it can convert:

• From XLX, XLSX
• To XLSX, CSV, PDF, TXT, HTML

For images, DriveConverter can convert:

• From PNG, JPG, GIF, BMP, TIFF
• To PNG, JPG, BMP, GIF, TIFF

And as for audio files it can be convert:

• From MP3, MP4, M4A, FLAC, WAV, OGG
• To MP3, M4A, MP4, WAV, FLAC, OGG

Note that you can only convert one file at a time as there is no option for batch converting just yet.

Spring is an amazing season. It brings nature back to life. The best thing to shoot within springtime is the wide range of beautiful flowers that appear. Spring paints nature in bright vivid colors of pink, green, blue, yellow, purple, and all the combinations you would not even dare to imagine. There is just so much beauty to capture.

Today we’d like to embrace spring and let it embrace you. We have collected 40 breathtaking examples of springtime photography showing the wonders of this season. Photographers captured flowers, landscapes and breath-taking flora in order to show off the true beauty of spring. You may be inspired to take a few spring shots yourself.

When you do, try to imagine how they could better represent the atmosphere of spring, by experimenting with light, colors and angles, like how it is done here.

Recommended Reading: Winter Photography: A White Escape

1. Red desire (Image credit: Barbara Florczyk)

2. Spring (Image credit: Zeljko Kujundzic)

3. Spring Time (Image credit: KittyNN)

4. Spring Celebration (Image credit: Florent Courty)

5. Tulips (Image credit: Caroline)

6. Spring (Image credit: Dimitar Dachev)

7. Kaczence (Image credit: Barbara Florczyk)

8. Green (Image credit: Barbara Florczyk)

9. Lilac (Image credit: Caroline)

10. Pink spring (Image credit: Barbara Florczyk)

11. Sundown (Image credit: Barbara Florczyk)

12. Spring Hearts (Image credit: April Bright)

13. Wild Flowers (Image credit: Barbara Florczyk)

14. Loneliness (Image credit: Barbara Florczyk)

15. Kolysanie (Image credit: Barbara Florczyk)

16. Color Splash (Image credit: Lipstickmisfit)

17. 10000 views (Image credit: Suzana)

18. Early Spring (Image credit: Maayke Klaver)

19. Spring (Image credit: Sora Belle)

20. Spring (Image credit: Minko2312)

21. Spring (Image credit: George Kirk)

22. March Magnolia (Image credit: George Kirk)

23. This is spring (Image credit: Maria Amme)

24. Spring (Image credit: Courtney Brooke)

25. Spring is in the air (Image credit: Amanda Michael)

26. Spring Spirit (Image credit: Tabuteaud Sébastien)

27. Spring Awakening (Image credit: Eva)

28. Spring in Moscow (Image credit: Roman Sayko)

29. Spring (Image credit: Abby Martell)

30. Spring Blossom View (Image credit: Shizuko Miyake)

31. A touch of Spring (Image credit: Adrian Sandor)

32. Sea of Spring (Image credit: Olivia Bell)

33. Spring (Image credit: Dainius)

34. Mystic Spring (Image credit: Tayfun Eker)

35. I turn to you (Image credit: Suna Gokturk)

36. Cromatique (Image credit: Diana Grigore)

37. Spring in the Air (Image credit: Ildiko Neer)

38. Welcome Spring (Image credit: Ildiko Neer)

39. Spring (Image credit: Agnieszka)

40. Spring (Image credit: Kira Winters)

More:

Here are more photography related articles we’ve previously published:

• Rainy day photography
• Water photography in B&W
• Nature photography
• Road and path photography

Over the years, we mainly style the font for the size or the color, and it was only recently that we can add text shadow with CSS3. There are times when we need more styles for more stunning fonts, but it would very complicated to create by ourselves. Replacing it with images is still not that good an option.

Recommended Reading: Free Web Font Services – Compared

• View Demo

Adding Stunning Effect with Google Webfont

Here’s some good news. Google Webfont has introduced a feature, which allows us to apply decorative font styles – without the hassle. There are currently over 25 font effects we can apply.

To add the effect, we insert effect= parameter followed by the font effect API name in the Google Web Font stylesheet. In the following example, we added ‘Multiple Shadow’ font effect, which is specified with shadow-multiple (API name).

 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple' rel='stylesheet' type='text/css'> 

Then, we simply add the class name to apply the effect to the font. The class name is specified with font-effect-* followed by the API name. Given the above example, the class name for Multiple Shadow effect would be font-effect-shadow-multiple.

 <p class="font-effect-shadow-multiple">This is Awesome!</p> 

This is how the Multiple Shadow font effect looks.

In case you are wondering how this effect is achieved, you can inspect the stylesheet, which will show you the following style rule.

 .font-effect-shadow-multiple { text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa; -webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa; } 

The multiple shadow effect is achieved with CSS3 text-shadow property, so the effect will only be displayed in Chrome, Firefox, Opera and Safari. Internet Explorer 9 (and earlier versions) does not support text-shadow property, but it has its own rule to define shadows with Shadow Filter.

Adding Multiple Font Effect

We are allowed to add multiple effects to the stylesheet. In this example, we added three font effects at once: Multiple Shadow, Emboss, 3D. Each effect is separated with the pipeline sign |, as follows.

 <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple|emboss|3d' rel='stylesheet' type='text/css'> 

Here is how the Emboss font effect look.

And below is the 3D effect that we’ve just added.

It is worth noting that we cannot add multiple effects into a single element, as the effect style rules will overwrite one another. Furthermore, you can head over to the demo page to see these effects in action.

• View Demo
• Download Source

Further Resource

In Google Webfont documentation you will see the other font effects you can apply, such as Fire, Fire Animation, Neon and many others.

• Google Font API Documentation – Google Webfont