Using CSS animations - Web developer guide

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints along the way. There are three key advantages to CSS animations over traditional script-driven animation techniques: They're easy to use for simple animations; you can create them without even having to know JavaScript. Configuring the animation To create a CSS animation sequence, you style the element you want to animate with the animation property or its sub-properties. The sub-properties of the animation property are: animation-delay Configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-direction animation-duration Configures the length of time that an animation should take to complete one cycle. animation-iteration-count Examples

CSS you can get excited about in 2015 CSS is a constantly evolving language, and as the new year begins it’s a great time to take a look at some of the emerging features that we can start to experiment with. In this article I’ll take a look at some newer modules and individual CSS features that are gaining browser support. Not all of these are features you’ll be able to use in production immediately, and some are only available behind experimental flags. However you’ll find plenty of things here that you can begin to play with — even if only during a prototyping stage of development. CSS Selectors level 4 The level 3 selectors specification is well implemented in browsers and brought us useful selectors such as nth-child. The negation pseudo-class :not The negation pseudo-class selector :not appears in level 3 but gets an upgrade in level 4. In level 4 of the specification you can pass in a comma separated list of selectors. The relational pseudo-class :has The matches-any pseudo-class :matches CSS Blend Modes Using mix-blend-mode

Dicas de CSS para impressão Uma das premissas básicas do Design Responsivo é oferecer a melhor experiência do usuário, independente do meio utilizado para acessar a informação. Muitas vezes nos preocupamos muito com smartphones, tablets e outros dispositivos móveis e esquecemos de um tipo de mídia que ainda é essencial para a leitura: o papel. Pois é, o usuário pode sentir a necessidade de imprimir uma página na web por muitos motivos: portabilidade, guardar o conteúdo “offline” ou simplesmente por que – eReaders que me desculpem – é muito mais confortável ler em um papel. Mas nem todos os sites da web estão preparados para serem impressos. São muitos os elementos de um layout que na hora da impressão não servem para mais nada além de nos fazer gastar tinta a toa e distrair do foco do texto. Para ilustrar este post eu criei uma pequena demo utilizando como base um outro artigo aqui do Tabless só para ter um conteúdo. Primeiros passos Você pode definir o CSS para impressão de duas maneiras. 1. 2. Ressetando estilos

A Quick Lesson in CSS3 Animation Hey guys! Long time no post… I’ve been busy working on awesome client projects as well as crafting an identity for my new company: Rocket Mouse Design . Over the weekend I wanted to whip up a simple landing page with some simple CSS3 animation. I learned a few things along the way and wanted to share. Not So Simple… So I have a rocket in my logo (which is still a work in progress). What I wanted to do was translate the position of the rocket after a few seconds (or on hover) and make it fly off the screen. #rocket { -webkit-transition: 1s; This makes the animation take 1 second. And then on hover make it fly off the screen. body:hover #rocket { -webkit-transform: translate(0,-600px); Check it out in action: Wait… Rockets Don’t Do That… You will notice that after the hover the rocket comes back! I needed the animation to run its course and then stop. Luckily I have some awesome and helpful friends on twitter that pointed me in the right direction. position:relative;

Rendera - Online HTML5 Editor o testar design responsivo Você já sabe como criar layouts e desenvolver um site responsivo. Na verdade seu projeto já está quase pronto. A última etapa é testar o funcionamento! Existem diversas maneira de garantir a efetividade do layout. Bibliotecas de Dispositivos Se você trabalhar em uma empresa grande (ou tiver grana sobrando) talvez seja bacana investir em um laboratório de testes com uma biblioteca de dispositivos. Device Lab – Rio de Janeiro, BrasilClearleft – Brighton, InglaterraHelsinki Open Device Lab – Helsinque, FinlândiaMobile Portland – Portland, EUAOttawa Open Device Lab – Ottawa, Canadá Através do site Open Device Lab é possível procurar o laboratório mais perto de você. Artigos interessantes sobre como montar seu próprio laboratório:LabUpEstablishing An Open Device LabTest on Real Mobile Devices without Breaking the BankHow to Build a Device Lab Ou você pode entrar em uma onda faça você mesmo e improvisar a estrutura. Simuladores Screenfly Responsinator Outras ferramentas Adobe Edge Inspect Conclusão

Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.