background preloader

Tutorials

Facebook Twitter

Learning CSS3: A Reference Guide. This overview features a hand-picked and organized selection of the most useful Smashing Magazine’s articles related to CSS3 and published here over all the years.

Learning CSS3: A Reference Guide

Why We Should Start Using CSS3 and HTML5 Today For a while now, here on Smashing Magazine, we have taken notice of how many designers are reluctant to embrace the new technologies such as CSS3 or HTML5 because of the lack of full cross-browser support for these technologies. Many designers are complaining about the numerous ways how the lack of cross-browser compatibility is effectively holding us back and tying our hands — keeping us from completely being able to shine and show off the full scope of our abilities in our work. Many are holding on to the notion that once this push is made, we will wake to a whole new Web — full of exciting opportunities just waiting on the other side. So they wait for this day.

Read more… JAVASCRIPT_FREE_SAMPLE: Writing JavaScript efficiently. To develop effectively JavaScript applications require editing tools such as syntax highlighting, auto-completion, or folders management, etc. ..

JAVASCRIPT_FREE_SAMPLE: Writing JavaScript efficiently

There are many code editors that are more or less relevant for JavaScript. We will give you some tools that JavaScript developers typically use. The JavaScript editors that we will present you are not the only ones. You should choose the one you feel the most comfortable with. Of course depending on your activity, some editors may be better than other ones. For this course, you do not need a lot of features such as versioning tools or compilators etc… If you do not have chosen your JavaScript editor yet, maybe a lightweight one should be a good idea for starting with JavaScript. Therefore, we will present you the following editors: Sublime Text 2Chrome developer tools (yes, it can be used as an editor)Jetbrains WebStorm Sublime Text 2 Chrome Developer Tools 1. 2. 3.

The Guide To CSS Animation: Principles and Examples. Advertisement With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try.

The Guide To CSS Animation: Principles and Examples

Regardless of its technical form, whether traditional, computer-generated 3-D, Flash or CSS, animation always follows the same basic principles. In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages. CSS Animation Properties Before diving into the details, let’s set up the basic CSS: Animation is a new CSS property that allows for animation of most HTML elements (such as div, h1 and span) without JavaScript or Flash.

Because the technology is still relatively new, prefixes for the browser vendors are required. Understanding Pseudo-Element :before and :after. Cascading Style Sheet (CSS) is primarily intended for applying styles to the HTML markup, however in some cases when adding extra markup to the document is redundant or not possible, there is actually a feature in CSS that allows us to add extra markup without disrupting the actual document, namely the pseudo-elements. You have heard of this term, especially when you have been following some of our tutorials. There are actually a few CSS family members that are classified as pseudo-elements such as the :first-line, :first-letter, ::selection, :before and :after. But, for this article, we will limit our coverage to only the :before and :after, “pseudo-elements” here will specifically refer to both of them. We will look into this particular subject from basics. The Syntax and Browser Support The pseudo-elements have actually been around since CSS1, but the :before and :after that we are discussing here were released in CSS2.1.

What does it do? <p> <span>:before</span> This the main content. CSS Animation Studio. CSS Animation Studio. The Studio Tutorials will feature some of the newest and recent tutorials on using CSS Animation.

CSS Animation Studio

From using images or text, remember to check this section for the latest tutorials that will surely impress any designer or developer. Creating a simple CSS animation Learn how to define specific properties within the keyframe rule to create a very simple css animation. Timed notifications with CSS Animation Create a timed notification that displays a progress bar to track when time has completed. An introduction to CSS3 Keyframe Animation Using the keyframe rule follow this tutorial to learn how to create smooth css3 animations.

20 minute CSS Animation Hover Tutorial. Nov 22, 2012 20 minute CSS Animation Hover Tutorial written by tiffany Nov 22, 2012 Create a smooth hover in 20 minutes!

20 minute CSS Animation Hover Tutorial

Using hover effects can instantly change the look and feel of your site. It can bring attention to certain elements when needed and add emphasises to a section when wanting to point it out. Hovering occurs when the mouse cursor rolls over a certain section which puts that section in a “hover state” to change the appearance. I’ve created a quick tutorial that uses the hover state to animate with CSS using the animation property. W3Schools Online Web Tutorials.