background preloader

Quelques idées d’animations simples en CSS3 avec la propriété transition

Quelques idées d’animations simples en CSS3 avec la propriété transition
Depuis l’arrivée des animations en CSS sur les différents navigateurs du marché, de nouvelles possibilités sont offertes aux webdesigners. En comptant certaines propriétés de mise en style déjà reconnues par la plupart d’entre eux depuis des mois, il est facile d’imaginer de petites animations pour agrémenter vos sites et offrir une meilleure expérience utilisateur à vos visiteurs. Vous trouverez sur cette page de démonstration d’animations en CSS3, quelques exemples d’animations que je vais vous décrire ici, mais il n’y a rien de bien sorcier, il suffit de trouver l’idée. Les animations en CSS3 La base Dans un premier temps, lorsque vous devez animer un élément, il faut préciser dans quelles conditions (les paramètres) grâce à la propriété raccourcie transition de CSS3. Avec cette déclaration vous prévoyez une animation sur all pour une durée d’animation de 0,7 secondes sur un effet ease-out. Voici la structure de base que j’utilise : L’effet zoom L’effet de décollage La base L’animation Related:  HTML - CSS - PHPCôté web

16 CSS Lessons via Post-it® Notes 16 CSS Lessons via Post-it® Notes Cascading Style Sheets Operate on Inheritance CSS has a ancestor-descendant relationships. Anything previously defined by an ancestor will automatically be inherited by one of its children unless otherwise specified. 2. If an element is defined in more than one place within CSS, the last definition overrides the previous. 3. For every HTML element to be styled, a corresponding CSS selector must be assigned. 4. Websites can be broken down into components or divs for layouts. 5. Likewise, structuring a site also follows the tree methodology. 6. Elements that stretch across the full width of a page are block elements. 7. There is also such a thing as setting display: inline-block to create a uniform grid. 8. All CSS elements are based on this model. 9. Margins push out around an element. 10. Padding pushes inward on content. 11. Setting margins to auto for right & left is a handy way of centering. 12. 13. 14. 15. 16.

Transitions CSS3 Beaucoup d'intégrateurs en ont rêvé : animer les pages web uniquement à l'aide de styles CSS, sans apport de JavaScript. Grâce aux dernières évolutions du langage et au module CSS3 Transitions, il est désormais possible de réaliser des transitions basiques à l'aide de CSS dans les navigateurs récents (Safari 4+, Chrome 2+, Firefox 4+, Internet Explorer 10 et Opera 10.6+) La spécification est le document qui définit de manière claire, précise et univoque le langage. La spécification relative au module est disponible à l'adresse suivante : Remarque : Les moteurs récents implémentent la spécification. Principe de base Le principe de base d'une transition CSS3 est de permettre une transition douce entre l'ancienne valeur et la nouvelle valeur d'une propriété CSS lorsqu'un événement est déclenché : soit via une pseudo-classe telles que :hover, :focus ou :active soit via JavaScript La ou les propriété(s) à animer La durée de l'animation Exemples concrets

Flexible Box Layout Module Abstract The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. Status of this document This section describes the status of this document at the time of its publication. Publication as a Last Call Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. Table of Contents 1 Introduction flex layout . The

Un background animé en CSS3 - Blog Infoject' Présentation Dans l'optique d'animer (légérement) les backgrounds des sites Internet en m'appuyant sur du CSS, j'ai voulu mettre en place un background multiple couplé à une animation. J'ai décidé de partager le résultat, bien que ce soit facilement améliorable, j'espère que le concept vous permettra de faire de belles choses. Les images Pour créer les images du fond d'écran, composées de "rayons lumineux", j'ai utilisé le flou directionnel dans Photoshop. Vous constaterez que mon visuel est plus simple que celui de ce tutoriel, mais le principe reste le même. J'ai créé trois images via ce principe, que je vous propose de récupérer ici si vous ne souhaitez pas les faire vous-même. Vous pouvez aussi rajouter une image dans le fond comme sur le turoriel du site WKS. Le code HTML Rien d'intéressant coté HTML, n'importe quelle page fera l'affaire, le concept étant mis en application au body de la page. <! Le code CSS Je n'ai pas cherché à peaufiner vraiment l'animation des rayons. Le résultat

Les formulaires javascript, form, input, text, button, radio, checkbox, hidden, password, submit, reset, select, textarea Vue d'ensemble : les éléments du formulaire Les éléments de formulaire HTML sont semblables à la plupart des contrôles rencontrés dans les logiciels. Toutefois, il faut garder à l'esprit qu'il n'est pas possible d'avoir des éléments personnalisés. Il faut se contenter des éléments prédéfinis (qui ont été conçus pour répondre à presque tous les besoins). Dans la suite de ce document, sont présentés tous les éléments de formulaire avec les propriétés, les méthodes et les événements associés. La balise FORM La balise FORM a besoin de la balise de fin. Liste des propriétés : Liste des méthodes : Liste des événements : Voyons maintenant en détail les différents éléments de formulaire. L'élément INPUT Liste des propriétés : Cette liste est générique, des particularités surviennent avec le type. Liste des méthodes : Liste des événements : Nous avons vu les éléments de formulaire, comment les déclarer, les attributs et les comportements possibles.

Can I use... Support tables for HTML5, CSS3, etc Slideshow en CSS3 Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow. Présentation et compatibilité Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable. Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" passée il y a peu en W3C Recommandation et sur le module "CSS Animations Module Level 3" actuellement en Working Draft. La pseudo-classe target Voir l'exemple

CSS railroad diagrams So next step after the sexy CSS lexer is parsing. But first - railroad diagrams to help visualize how/when the tokens make sense forming valid CSS code. Below is what I have so far. It includes pretty much everything except selectors. There are probably mistakes in these diagrams, so I'll be happy to see any cases where they don't work properly. Here's the list of png images and the powerpoint file I used to make them, in case you want to use (or correct) the diagrams for your own purposes. Stylesheet A stylesheet can have an optional charset, followed by zero or more imports, then zero or more namespace definitions. So after these intro @-rules, there could be any number or combination of rulesets, @font-face, @page, @media and @keyframes, in any order. @charset Pretty simple, just the literal @charset followed by a string. E.g. @import Any number of imports follow the charset, they can define the URL of the imported CSS as a string or using url(). Ah, media query syntax, lovely. @namespace Or:

Fond The 24 best chrome extensions for designers and web developers Two years ago I made the transition to Chrome as my default browser, and over the time I’ve drastically improved my workflow by using some awesome extensions. I would like to share with you the different extensions that I use (and also those that I have used and thought deserve to be mentioned here). The extensions shown here can be effective for anyone who is using the internet, but they mainly target designers, tech entrepreneurs, developers, and people working in the creative industry. Enjoy! Dribbble HD: while using Dribbble, do you find it annoying to click on every picture, in order to see it a little bit bigger? TabMemFree: I can’t even begin to explain how effective this extension really is, but I’ll explain anyway. Tabman Tabs Manager: This extension along with TabMemFree (listed above) is an amazing combination. Muzli is a new-tab chrome extension, it will replace your default tab and fill it with inspiration, latest design articles and quick links to relevant design sites.

Utiliser des polices différentes sur votre site avec @Font-Face - Suivez le tutoriel @Font-Face est compatible avec les navigateurs : IE 5+ / Chrome / Firefox / Opéra / Safari Quelle méthode utiliser pour changer la police d’un site internet ? Vous avez 3 solutions pour ça. La première c’est sIFR qui permet d’afficher les polices grâce à un script,(JS) . sIFR n’est pas très utilisé en réalité parce qu’il est lourd à gérer et ne permet pas toujours d’arriver au résultat attendu. La seconde passe par les police cufons, il utilise lui aussi le Java pour arriver à ses fins, il est plus répandu mais ils affichent un code souvent apparemment lourd, et même si les spécialistes du référencement assurent que cela n’affecte en rien l’optimisation du texte, il est rassurant de savoir qu’une méthode est acclamée par tous les développeurs: @Font-Face! Cette méthode consiste à “encoder” la police souhaité au format web, puis d’aller donner les informations à votre site, en les appelant dans votre fichier CSS. Je vous ai perdu en route ? Patientez 2 min et voilà ! Exemple: remplacer par

Créer un volet coulissant en CSS3 avec :target et transition Alors que CSS3 continue son chemin dans les validations, les réécritures et la prise en charge par les navigateurs, il y a des choses qui commencent à être plutôt bien implémentées par la plupart de ces derniers. La pseudo classe :target et la propriété transition - que nous avons déjà mis à l'épreuve dans ce long tutoriel sur la création d'un slideshow en CSS3 - vont être nos armes pour ce tutoriel. Qu'allons-nous produire ? Le but de ce tutoriel est de créer un volet caché dans un coin de la page que nous allons pouvoir révéler en cliquant sur un lien. Dans un premier temps nous allons juste nous charger de révéler le volet, nous verrons comment faire pour replacer notre volet à son état initial dans un second temps. la démonstration Structure de base Il va nous falloir une structure HTML (vous vous en doutiez, j'imagine). <div id="volet"><p>Lorem Elsass ipsum réchime amet sed bissame so libero. Styles de base Passons à notre code CSS. la démonstration Un peu plus de HTML Un peu plus de CSS

Boxed CSS | Best CSS Design Gallery

Related: