background preloader

All you need to know about CSS Transitions

CSS3 transitions bring simple and elegant animations to web applications, but there’s a lot more to the spec than first meets the eye. In this post I’m going to delve into some of the more complicated parts of CSS transitions, from chaining and events to hardware acceleration and animation functions. Letting the browser control animations sequences allows it to optimize performance and efficiency by altering the frame rate, minimizing paints and offloading some of the work to the GPU. Browser support CSS transitions are supported in practically every version of Firefox, Safari and Chrome. Webkit based browsers (Safari and Chrome), still require -webkit prefixes for animations and gradients, but these are soon being removed. Applying transitions A simple way of applying transitions is with CSS pseudo-classes, such as :hover. When the :hover pseudo-class is activated, the height will be transitioned linearly from 100px to 200px over a period of 2 seconds. Transitioning gradients Clipping

Separation, Abstraction, and Cascading in CSS | LispCast TLDR: LESS and Sass (and similar solutions) have saved CSS for three reasons: separation, abstraction, and cascading. While I welcome them, CSS still has other problems which I believe can be solved. I propose some solutions. Introduction A lot is said about LESS and Sass, and for good reason. But when people talk about why they are so great, they miss the main point. In this essay, I will try to put into words (and some pictures) what my intuition tells me as a developer and programming language enthusiast to clarify why CSS is innately unmaintainable, does not satisfy its own design goals, and why LESS and Sass make a bad language more bearable. Zero Degrees of Separation Way back when, people used HTML tables to style their pages. Those were the days of font tags and tables. Then CSS came along, and people talked a lot about separation of content from presentation. Your styles were still tied to the structure of the document they were styling. HTML and CSS are separate but not equal.

Coding Q&A: CSS Performance, Debugging, Naming Conventions Advertisement Howdy folks! Welcome to another round of Smashing Magazine CSS Q&A — the final one, as of now. It was a great experience to run this Q&A with you – thanks a lot for sharing all your questions with us! CSS Performance Vitaly asks: “Could you recommend some rules of thumb or general tips on how to improve the performance of CSS? Most of the time, I don’t think you should even bother thinking about the performance of your CSS. The first thing to check is your website’s response time. CodePen rocks a respectable 216 millisecond response time. Usually, that’s not the problem with slow websites. In the vast majority of situations, doing any of the following things would take less effort and have a far greater impact on performance than CSS optimizations: You can learn more about these things in this slide deck3 that I’ve put together. If you’re already doing all of these things and you’re still having problems, that’s where Jon Rohan’s tips4 can help. Naming Classes Staying Up To Date

Conditional loading of resources with mediaqueries Here is a quick idea about making mediaqueries not only apply styles according to certain criteria being met, but also loading the resources needed on demand. You can check a quick and dirty screencast with the idea or just read on. Mediaqueries are very, very useful things. They allow us to react to the screen size and orientation and even resolution of the device our apps and sites are shown in. That is in and of itself nothing new – in the past we just used JavaScript to read attributes like window.innerWidth and reacted accordingly but with mediaqueries we can do all of this in plain CSS and can add several conditions inside a single style sheet. In addition to the @media selectors in a style sheet we can also add a media attribute to elements and make them dependent on the query. Handy isn’t it? Load all the things – even when they don’t apply Let’s take this HTML document: That works. Matchmedia to the rescue Here is what it does: But, what if JavaScript is not available?

Makeappicon - Generate app icons of all sizes in a click! Une taille de police en fonction de la largeur d’écran J’ai souvent eu l’occasion à travers mes divers projets Web mobile (responsive), d’avoir à réduire la taille des polices de titre car même un simple mot ne passait pas en largeur. Pour éviter d’avoir une césure sur chaque mot du titre, le plus simple était de s’autoriser une réduction approximative du corps. (approximative… façon de parler). Je vous propose des solutions relative. CSS3 à la rescousse Il existe une unité encore peu connue car prise en charge par nos navigateurs depuis peu de temps, il s’agit des unités relative au viewport. Pour résumer, nous allons proposer un corps de texte qui dépend de la largeur de la fenêtre du navigateur. Très bien, mais que représente une unité de vw, par exemple ? Prenons un exemple plus parlant. Mon corps de texte aura un équivalent de 10% de la largeur de mon viewport, à savoir la largeur de la fenêtre de votre navigateur. Il vous faudra donc recharger la page sur la page de démonstration à chaque redimensionnement de la fenêtre du navigateur.

2013 Work Plans I've got some ambitions plans for CSS this year, and I thought it would be useful to get them out there and socialize them before I start working on them in earnest. My overriding goal this year is to pursue generative solutions to problems. CSS has a complexity problem, and I've been tackling it from the sides for a while, but my approach doesn't scale. If CSS is supposed to grow out to satisfy all the demands that people put on it, our current modus operandi is insufficient. We too often solve the specific problem in front of us, too scared of overreaching to solve a more generic instance of the problem. This makes CSS a hodgepodge of well-designed (when we're lucky) but overly-specific solutions, which increases the complexity debt. So, what does that mean for CSS? Animations CSS Animations are great, when your problem is shaped exactly like the problem they were designed to solve - a static animation known at page-load time. I'm trying to fix this in a few ways. Layout Polyfills

Using Form Elements and CSS3 to Replace JavaScript Throughout this article, vendor CSS3 prefixes are omitted for brevity. If you want to see this code in action, you can check out this JS Bin demo. Now let's consider the concepts involved in creating this tab switcher. Notice the demo is not using any JavaScript. Hidden Radio Buttons Although this example is using radio buttons, we don't actually see any radio buttons on the page. Well, notice the markup also includes a label element that's associated with each radio button using IDs and for attributes. Thus, all we have to do is style our labels to look like tabs (I used rounded corners and a few other styles) and then target them using the :checked pseudo-class along with the general sibling selector (the tilde character, ~). The general sibling selector lets us target both the content section of the selected tab, as well as the label element. With some absolute positioning along with z-index, we then can make the chosen section visible. Concepts to Remember

A suite of Javascript libraries and tools designed for working with HTML5 Recent Updates Follow @CreateJS November 2014 Added Unit Tests to EaselJSUpdates in preparation for new releases (coming soon). October 2014 Added 'Extras' to EaselJSTons of updates and pull requests in all libs July 2014 Major Updates to EaselJS Graphics The Story Why we built CreateJS About CreateJS CreateJS is a suite of modular libraries and tools which work together to enable rich interactive content on open web technologies via HTML5. Featured Projects Community Show & Tell. Ion Drift A port of the Flash game Ion Drift, b10b was able to build a CreateJS version in less than a day that hit target framerates on even the lowest devices, and outperformed ports to other libraries. By b10b b10b

Live Tools - Des outils de génération d'UI en CSS3 / HTML UI Live Tools est un site web proposant 4 générateurs d'éléments d'interface: Boutons, formulaires, icones et ribbons en CSS3. Voici un site web qui va rendre grand service à ceux qui n'ont pas forcément la fibre graphique dans le sang ! ui Live Tools est un service proposant 4 générateurs: Générateur de boutonsGénérateur de formulairesConstructeur d'icônesGénérateur de ruban / ribbon A chaque fois, de nombreux paramètres sont disponibles pour personnaliser le style, les couleurs, ... Générateur de boutons CSS3 Le générateur de bouton est complet, vous pouvez personnaliser les couleurs des différents états, avec des transitions CSS3... Générateur de formulaires design CSS3 Même principe mais pour les formulaires. Il ne s'agit pas là d'un générateur de formulaires avec validateurs etc, mais un générateur de formulaire design. Générateur d'icones Le générateur d'icones permet de créer à la main, pixel par pixel à la souris. Générateur de rubans CSS3 Site Officiel

Understanding the CSS Clip Property Learn about the underused and often misunderstood CSS clip property and understand how to apply it for some nifty effects. Hi guys! First of all let me wish a belated happy new year to all of you. Today we are going to do something different: dig deep into one single CSS property. And that property is going to be the “clip” property. I’m pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. The clip property aims at defining what portion of an element you want to show. Syntax Let’s get started straight away with the syntax of the clip property which is not only a little bit weird but also probably difficult to understand at first glance. First thing you should note: the clip property only works on elements with position: absolute or position: fixed. To be honest, I don’t really know why it is like that. As I said on Twitter a few days ago — and as you might think — this is a huge downside to the clip property.

Pure CSS collapsible tree menu The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not content with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article. From there I’ve come up with a solution that works pretty well. Another demo, another bug Everything I seem to investigate lately seems to present itself with an annoying bug/feature in various browsers. So I soldiered on and came up with a pretty decent attempt, and remember folks I’m not a designer so be kinder this time with design critiques all I’m doing is showing you how to do the technique ;). General sibling combinators are flaky The CSS3 selector module has a very useful addition to compliment the CSS2.1 adjacent sibling combinator. So I dug into WebKits bug tracker and came out with this bug which has been around since 2007. <!

50 Tileable and Seamless Pattern Sets (500+ Patterns) There are no individual seamless patterns in this post, only complete sets, with each set containing anything from 3 patterns all the way up to 100, and are available in a variety of popular formats: .eps, .ai, .png, .pat, .psd and .jpg. You will find all kinds of varied patterns, such as fabrics, geometric shapes, flowery, retro, vintage, grunge, swirls, paper, dots, lines… and much more. And if all that is not enough we have also collected a selection of the best resources for you to discover even more seamless backgrounds. Seamless Paper Patterns – 6 Patterns (Photoshop & JPG) Fabric Inspired Vector Swatches – 4 Patterns (.ai) Abstract Gears – 3 Patterns (.eps & .png) Vector Panton Patterns – 16 Patterns (.ai) Monochrome Geometric Patterns – 100 Patterns (.ai) Mono Circles – 3 Patterns (.eps & .png) Vector Seamless Backgrounds – 6 Patterns (.eps) Retro Set – 3 Patterns (.eps & .png) Tiles Pattern – 3 Patterns (.ai & .jpg) Seamless Plaid – 20 Patterns (.ai) Halftone – 52 Patterns (.ai)

Related: