background preloader

CSS3 transitions, transforms and animations

CSS3 transitions, transforms and animations
Browser Support for CSS transitions How to use transitions If you haven't used transitions before, here's a brief introduction. On the element you want to have animate, add the following CSS: There is a lot of duplication due to vendor prefixes - until the specification if finalised, this will persist. Another approach is simply to write the CSS without the prefixes, then use Lea Verou's -prefix-free to add them in at runtime. Something you definitely shouldn't do is to only include the webkit prefix. It's worth noting as well that there isn't an -ms- prefix on these properties. The syntax is pretty straightforward, you specify the property you want to animate, all or border-radius or color or whatever, the time to run, then the transition timing function. Whenever any property changes, then it will animate instead of changing directly. To see the difference in speed, have a look at the speed test. Different timing functions Delays The syntax for a CSS3 transition is of the form: Related:  Programowanieangelinasmithyackey

OOP in JS, Part 1 : Public/Private Variables and Methods This page shows how to create private variables and methods in "classes" in Javascript through the rather simple example of a person. (This is really a very rough approximation of the classical OOP pattern, and not necessarily a "best-practice" for JavaScript programming.) Part 2 covers inheritance. Summary Example In this example, a person's name and race are set at birth and may never be changed. <- click to run the example code below (the code block being run appears after the Person constructor). The Example Code Notes This page copyright ©2003 by Gavin Kistner.

Etiqueta div HTML - Etiqueta de apertura: <div>Etiqueta de cierre: </div> Definición La etiqueta <div> se utiliza para definir una sección dentro del documento. Esta etiqueta se usa comunmente para agrupar un bloque de elementos, para luego añadirle un estilo determinado. Posibles Atributos de la Etiqueta <div> Referencias: DTD nos indica en que DTD se permite cada atributo. : Internet Explorer : Firefox : Google Chrome : Opera : Safari Atributos Estándard de la Etiqueta <div> Estos atributos son soportados por todos los navegadores Eventos de la Etiqueta <div> Los eventos son soportados por todos los navegadores

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. These should be applicable to both images and HTML elements, but obviously browsers will vary for the foreseeable future. The property used to control all of this stuff is filter. 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). Blur Ever wanted to do a gaussian blur on an image or text with just CSS? Sepia

Keyframe Animation Syntax Basic Declaration & Usage For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above Multiple steps If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values: Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate. Calling keyframe animation with separate properties Animation Shorthand Just space-separate all the individual values. animation: test 1s 2s 3 alternate backwards Combine transform and animation Multiple animations You can comma-separate the values to declare multiple animations on a selector. Steps() The steps() function controls exactly how many keyframes will render in the animation timeframe. If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. The math works out nicely there. Browser Support More Resources

Page Transitions with CSS3 In the last few years, we've seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I'm gonna teach you how you can have your own, but instead I'll be using CSS Transitions and the :target property to do all the magic. View demo Download source In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. The Dribbble shots used in the demos are by Matt Kaufenberg. Markup The HTML will contain five main divisions: a header and the four content sections. In the header we will have the main heading and the navigation: The reason for having such an “unordered” structure by adding the header to the end, is that we make the navigation “reachable” using the general sibling selector (~), so that we can color the respective items differently. First we will give style to our header and the navigation. And that’s all you need.

div, section y article Quizás, lo más repetido desde que comenzamos a trabajar con HTML5 es que esta nueva versión nos ofrece la posibilidad de dotar de semántica a los contenidos de una web. Para ello dos nuevos elementos han aparecido: section y article. Pero, ¿realmente conocemos como y cuando debemos usarlos? Y tenemos claro que lo diferencia del antiguo (y todavía válido) div. Pues bien, voy a intentar explicar los posibles usos de cada uno y dar los suficientes ejemplos para que lleguéis a comprender mejor las diferencias entre estas etiquetas. div La etiqueta div sigue funcionando exactamente igual que lo hacía hasta el momento. article Esta etiqueta será usada para representar un contenido específico de nuestra web. Por lo tanto, este tipo de contenido tiene un alto valor semántico ya que aporta información relevante dentro de nuestro documento. Por ejemplo, en el caso de mostrar un listado de noticias, lo que estaremos listando será un listado de elementos article. section

Pseudo-classes pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector. Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not). Syntax How to read CSS syntax. Index of standard pseudo-classes Specifications See Also pseudo-elements Document Tags and Contributors Contributors to this page:teoli, Delapouite, SphinxKnight, wwahammy, Sheppy, trevorh, FredB, fusionchess, ethertank, Marsf, tw2113, tregagnon, McGurk, prasanthsekhar

CSS Animations Abstract This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior. Status of this document This section describes the status of this document at the time of its publication. Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. Some changes since the draft of April 2012: Added a reference to the accessibility guidelines around seizures caused by rapid visual changes. Table of contents 1. This section is not normative. This proposal introduces defined animations 2. 3. 4. The keyframe selector 5.

Resizing images with PHP The following script will easily allow you to resize images using PHP and the GD library. If you’re looking to resize uploaded images or easily generate thumbnails give it a try Update: Looking to resize transparent PNG’s and GIF’s? We’ve updated our original code, take a look at Usage Save the code from the ‘the code’ section below as SimpleImage.php and take a look at the following examples of how to use the script. The first example below will load a file named picture.jpg resize it to 250 pixels wide and 400 pixels high and resave it as picture2.jpg If you want to resize to a specifed width but keep the dimensions ratio the same then the script can work out the required height for you, just use the resizeToWidth function. You may wish to scale an image to a specified percentage like the following which will resize the image to 50% of its original width and height The code Further Information

Errores Cuando somos diseñadores o desarrolladores y no somos una empresa grande, solemos hablar cara a cara con los propios clientes. Cuando esto ocurre, hay una serie de normas y responsabilidades que uno debe tener, y no pasar por alto, nos pongan el precio que nos pongan por el proyecto. En este artículo os pongo una … Lee más! Cuando empezamos a usar CSS, como todo en la vida, cometemos errores. IE7-JS es una librería en Javascript (versión 2.0 beta) creada por Dean Edwards, que nos permitirá solucionar una gran cantidad de errores en IE. Cuando creas un sitio web o un blog, muchas veces nos fijamos en que Internet Explorer 6 no soporta algunas propiedades que hemos aplicado, mientras que otros navegadores sí. Aunque Internet Explorer sea un navegador odiado por muchos y se están realizando campañas para borrarlo del mapa, algunas personas no tienen más remedio que usarlo. CSS nos puede dar muchos quebraderos de cabeza si no sabemos usarlo bien.

12 Things You Can Do with Lectora and Code | K. Anthony: Instructional Designer Reading Time: 2 minutes I presented at my organizations quarterly Lectora brownbag luncheon this week on using Lectora and code (HTML/CSS/and JavaScript). It was a lot of fun preparing and I believe (hope!) that everyone found it useful. I wanted to post the presentation here as a demo of the types of things I have done and hope to do with code in Lectora. Why Code? There are two main reasons. The first one is that, when I first started using Lectora, I dug through the forums and one of the things I noticed pretty quickly was Lectora could be an extemely powerful and versatile tool. The second reason is that, when I have room to run (which I sometimes do) outside of the constraints of Lectora, knowing how to create cool interactions, interactive infographics, webpages, etc. is one way to create really cool learning objects that aren’t tied to any authoring tool. About the Presentation I also thought about the presentation in terms of simple to complex. The Presentation! To Be Continued…

Controlling CSS Animations and Transitions with JavaScript The following is a guest post by Zach Saucier. Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial. Web designers sometimes believe that animating in CSS is more difficult than animating in JavaScript. While CSS animation does have some limitations, most of the time it's more capable than we give it credit for! Not to mention, typically more performant. Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries. Let's jump straight in! Quick Note: Animations and Transitions are Different In this article we will cover each of them separately. Manipulating CSS Matrixes

Overlay-like Effect with jQuery A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. Vapour around me When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary. O my friend -- but it is too much for my strength -- I sink under the weight of the splendour of these visions! I am so happy, my dear friend I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I sink under the weight