High Performance Animations We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps. Take a look at this side-by-side slow motion video of the same animation: One is done with transforms, the other isn’t. From DOM to Pixels in DevTools When you use the Chrome DevTools timeline you should see a pattern similar to this: The process that the browser goes through is pretty simple: calculate the styles that apply to the elements (Recalculate Style), generate the geometry and position for each element (Layout), fill out the pixels for each element into layers (Paint Setup and Paint) and draw the layers out to screen (Composite Layers). To achieve silky smooth animations you need to avoid work, and the best way to do that is to only change properties that affect compositing -- transform and opacity. Animating Layout Properties
Animating CSS Shapes with CSS Animations & Transitions Notes About Current Browser Support for CSS Shapes: The Shapes properties are still in flux at this time. Most of this article's demos use the shape-inside property, which will be temporarily removed from Webkit and Blink. The principles of animating shapes is applicable to both CSS Shapes and CSS Clipping masks. All the demos in this article use clipping masks to visualize CSS Shapes. Today we're going to be talking about animating CSS shapes with CSS animations. This is the third article in a series of articles I'm writing about CSS shapes, so in this article I'm assuming you have a basic understanding of how CSS shapes are created. There is a bug in some versions of Safari causing it to crash when the clip-path property is animated. Animatable CSS Shapes There are two ways we can create a shape with CSS shapes: using an image URI which the browser uses to extract the shape from, and using one of the available CSS shapes functions, such as polygon() and circle(), among others. 1.
LESS « The Dynamic Stylesheet language CSS3 Filters: Altering HTML and Images with just CSS CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work. Using just CSS we can accomplish some pretty complicated effects. filter: filter(value); As you might expect though, browser prefixes will be required. -webkit-filter: filter(value);-moz-filter: filter(value);-o-filter: filter(value);-ms-filter: filter(value); There are quite a few filter, so to get a better idea lets take a look at them individually. filter: blur(5px) brightness(0.5); There are a few filters that I won’t outline below, but these can be easily accomplished with already existing CSS (opacity and drop shadows). I will provide the filtered version of the photo (the first photo) and a picture of what the filter should look like (the second photo) should you be using a browser that can’t see filters. Blur Brightness Saturation Hue Rotate Contrast Invert Grayscale Sepia
Tetris & The Power Of CSS To be really good at CSS, you have to learn CSS. I know this sounds like a tautology but I've become aware of a peculiar attitude that preprocessors such as SASS are somehow successors to CSS. Some SASS and LESS nerds are fond of proliferating the following aphorism. It should be noted that its author did not himself intend it as an advocation of preprocessors. The four stages of CSS:1. They forget that all preprocessors do is make writing CSS easier, not qualitatively different: It's still CSS that comes out of the end. Put down your classes, ladies and gentlemen, because we're talking about dynamic content and they cannot save you now. Incomplete grids Let's imagine we have a three-column grid but that we don't know how many items will be in that grid. Now, I'm the sort of designer who couldn't give a toss about "pixel perfection" so long as the page is usable and accessible. We could do this by adding some logic to the template and writing a last class to whichever item comes last.
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License
Increasing the Clickable Area of Inline Links Demo It has been best practice for some time now to ensure that navigation links have appropriate padding. This makes clicking these links much easier, especially if you are on a mobile device. Here is an article, written four years ago, discussing this very idea. Why aren’t we taking this one step further? Now keep in mind that this is only a thought. The trick is to be subtle with this technique; increase the click area enough that users don’t have to be 100% accurate, but don’t increase it too much so that the behavior becomes unexpected. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this technique? Tweet this
9 Most Common IE Bugs and How to Fix Them Internet Explorer - the bane of most web developers' existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn't really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? 1. Centering an element is probably something every web developer has to do while creating a layout. Consider the Following Code: The output you'd expect: But what IE actually gives you: This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. The Fix The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly. 2. Almost every web developer uses lists to create his navigation. And the IE screen shot: Fix #1 3.
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare […] View demoDownload source Today I want to show you how to create an amazing slide out menu or navigation for your website. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: The list is getting an ID because we want to refer to it later in the JavaScript. 2. First, we define the CSS properties for the list: The navigation should always be accessible for the user, even if he scrolls down the page. Now, let’s look at the list element properties: For the links in the list elements, we define the following CSS properties: The JavaScript
Revised Font Stack | A Way Back Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.”—Nathan Ford, Better CSS font stacks Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond.
Visual Basic 2012 Tutorial Visual Basic 2012 was launched by Microsoft in 2012. It is integrated with other Microsoft Programming languages C# and C++ in a package known as Visual Studio 2012. It is a full fledged object oriented programming(OOP) language. However, you don’t need to have prior knowledge of OOP to learn Visual Basic 2012 programming.Visual Basic 2012 retains most of the syntaxes that are similar to older versions of Visual Basic. Start learning VB2012 by following the lessons below: script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”> If you wish to learn more about Visual Basic 2012, you can download our E-Book, Visual Basic 2010 Made Easy written by our webmaster and tutor Dr.Liew.