8 simple CSS3 transitions that will wow your users

CSS3 has introduced countless possibilities for UX designers, and the best thing about them is that the coolest parts are really simple to implement. Just a couple of lines of code will give you an awesome transition effect that will excite your users, increase engagement and ultimately, when used well, increase your conversions. What’s more, these effects are hardware accelerated, and a progressive enhancement that you can use right now. Here are 8 really simple effects that will add life to your UI and smiles to your users’ faces. All of these effects (bar one) are controlled with the transition property. Having done so, set its width and height (so it has dimensions), its background color (so we can see it) and its transition property. Now all we need to do is change properties, and they’ll animate for us… If you’d like to follow along you can download the demo files here. 1. Having things fade in is a fairly common request from clients. 2. 3. 4. 5. 6. 3D shadow 7. 8.

Learn SVG Circle Hover Effects with CSS Transitions « Previous Demo: Animated Responsive Image Grid Back to the Codrops Article Use what you have by Angela Duncan View on Dribbble Common Causes of Stains by Antonio F. Mondragon View on Dribbble Pink Lightning by Charlie Wagers View on Dribbble 15 Amazing Websites for Finding Free Design Resources Keeping costs low and clients happy with the work you deliver can be a very difficult balance to strike, especially for freelance designers. Fortunately, there are great free design resources online to help you out. It won’t be a stretch to say that most creatives – whether you’re a web designer, illustrator, photographer, developer, etc. – know what it’s like to work with limited budgets. It can often feel like clients barely have enough to even pay you for your time, let alone have the budget for the truly unique resources that can make a project really stand out. Thankfully, there are some great places on the web that can provide some relief. The following list is for all my fellow freelancers. Free Vectors Vecteezy Vecteezy is definitely a more well-known resource for both premium and free vectors. Alphateck Nick G. Images and Photos Picjumbo PicJumbo is a rare website that provides high quality stock photos free for commercial use. Getty Images FireShot Free Fonts Open Font Library Eamejia

What Beautiful HTML Code Looks Like I originally wrote this over two years ago. It was getting a little long in the tooth, especially now that HTML5 has come along and made HTML far more beautiful than even XHTML 1.1 was. So I updated it! I can't help but view source on every nice looking website I see. It's like if you had x-ray glasses that allowed you to see any person you ever saw in their underwear at will. How could you not? It gets me to thinking, what makes beautiful code? Large PNG Original PSD Text of HTML It's big enough to print out and tape up inside your locker to impress your friends. HTML5 - HTML5 and it's new elements make for the most beautiful HTML yet.DOCTYPE - HTML5 has the best DOCTYPE everIndentation - Code is indented to show parent/child relationships and emphasize hierarchy.Charset - Declared as first thing in the head, before any content.Title - Title of the site is simple and clean. Share On

NodeSchool Top 10 best practices for front-end web developers Explain which div you’re closing Most of the time when I’m viewing a website source, I see, at the very bottom of the page, an almost endless list of closing </div> tags. In fact, many beginners think they just have to use divs instead of tables to produce quality code. Divs are cleaners than tables, but without proper code organization, it can be as (or even sometimes more) messy as table based code. Using indentation is a good start. <div id="header"><div id="sub" class="first left"> ... Use a CSS reset Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you might already know how useful a CSS reset it. Source: Don’t use @import CSS files can be included using the @import directive. <style type="text/css> @import url('a.css'); @import url('b.css'); </style> While it works, the @import directive is much slower than the other way to include stylesheets into a html document: “Smush” your images ...

linear-gradient The CSS linear-gradient() function creates an <image> which represents a linear gradient of colors. The result of this function is an object of the CSS <gradient> data type. Like any other gradient, a CSS linear gradient is not a CSS <color> but an image with no intrinsic dimensions; that is, it has neither natural or preferred size, nor ratio. Linear gradients are defined by an axis, the gradient line, with each point on it being of a different color. The gradient line is defined by the center of the box containing the gradient image and by an angle. The starting point is the point on the gradient line where the color starts. Similarly the ending point is the point on the gradient line where the final color is reached. These somewhat complex definitions of the starting and ending points lead to an interesting property sometimes called magic corners : the nearby corners of the starting and ending points also have the same color as the respective starting and ending points. Syntax Values

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. Recommended Reading: 20 Useful CSS Tips For Beginners 1. Basic CSS browser resets are some of the most common snippets you’ll find online. 2. This clearfix code has been around the Web for years circulating amongst savvy web developers. 3. 2011 Updated Clearfix From what I can tell there isn’t a major difference in rendering between this newer version and the classic version. 4. Code Source Some of the newer CSS3 properties have pampered us into thinking they may be applied everywhere. 5. Code Source 6. 7. Code Source 8. Code Source 9. 10. 11. Code Source 12.

Setting Backgrounds & Gradients - Learn to Code HTML Backgrounds have a significant impact on the design of a website. They help create a site’s look and feel, establish groupings, and assign priority, and they have a considerable influence on a website’s usability. Within CSS, element backgrounds can be a solid color, an image, a gradient, or a combination of these. As we decide how to implement these backgrounds, we should keep in mind that every background contributes to the overall appearance of our website. In this lesson we’re going to take a look at how to assign different types of backgrounds, including gradients, to elements; we’ll also play around with a handful of CSS3 properties specific to backgrounds. Adding a Background Color#background-color The quickest way to add a background to an element is to add a single-color background using the background or background-color property. When adding a background color, we have a few options for the values we can use. Transparent Backgrounds Adding a Background Image#background-image

CSS3 Animation Cheat Sheet - Justin Aguilar How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accomodate the animations - it will animate into place. Add the animation stylesheet to the <head> element of your webpage: Replace css with the name of the directory where the animation stylesheet is. Add an animation class to the element you want animated: Replace slideUp with the desired animation class. For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element: visibility: hidden; is used to hide elements before the animation is activated. The values for these animations are relative to the element's size.