Why doesn't Topaz Clarity work in PhotoFXlab

 

	Why doesn't Topaz Clarity work in PhotoFXlab? In order to have access to Clarity in PhotoFXlab, you will need to download the latest FXlab installer from topazlabs.com/downloads. Clarity should then appear in the plug-in Menu after the installation process, however if it does not, to add... Read More »

FeedaMail: Topaz Knowledgebase RSS

	Topaz Knowledgebase RSS
	Is Topaz Clarity included in the Bundle? At this moment, Topaz Clarity is not included in the Bundle and must be purchased separately. Read More »
	Delievered to you by Feedamail. Unsubscribe

How To Disable Certain Areas Of The Screen On iOS Devices

 

	How To Disable Certain Areas Of The Screen On iOS Devices 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. Related posts: Record Screen Activities On iOS Devices With Reflector How to Fix Home Button Delays on iOS Devices [Quicktip] Manage & Control Android Devices Wirelessly With AirDroid Getting Facebook Home On Unsupported Android Devices [Quicktip] Read More » 8 Tips To Increase Downloads for Your App 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. Related posts: 10 Essential Tips to Increase Android’s Performance Google Redeems Itself With Google Universal Analytics Unobtrusive Website Toolbars to Help Increase User Engagement CSS3 Circular and Elliptical Gradients [CSS3 Tips] Read More » 50 Useful CSS Snippets Every Designer Should Have 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. Related posts: A Look Into: CSS3 Box-sizing How to Create RSS Feed Logo with CSS3 UI Design: Glossy Buttons with CSS3 Gradient How to Create Gmail logo with CSS3 Read More »

Android Backup With Orange Backup App

	ll Android Backup With Orange Backup App 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. Related posts: How To Properly Backup And Restore Your iPhone Data 30 Must-Try Apps For Rooted Android Phones 20+ Data Backup & Synchronization Tools For Hard Drives How to (Automatically) Backup Your Website into Dropbox Read More » 9 Thing You Should Know About Firefox OS 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: You can use Firefox OS Desktop client for your operating system. Check the instructions for downloading and building Firefox OS Desktop client. 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. 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. 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: Keon by Geeksphone 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: Unagi Otoro Pandaboard Samsung Galaxy S Samsung Galaxy S 4G Samsung Galaxy S2 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. Related posts: How to Read .ePub Ebooks on Firefox and Chrome [Quicktip] 10 Firefox Plugins For A Safer Browsing Experience How to Optimize Firefox for Better Performance A Look Into: Essential Firefox Tools For Web Developers Read More » 5 Simple Steps To Keeping Your Smartphone (And Data) Safe 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 effecf 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. Related posts: Top 5 Mobile Apps To Keep Your Kids Safe Top 10 Security Tools for Your Smartphone How To Properly Backup And Restore Your iPhone Data Keeping Your Private Photos/Videos Hidden on Android [Quicktip] Read More »