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 - PHPNTIC pratiqueCô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

Public Domain Collections: Free to Share & Reuse That means everyone has the freedom to enjoy and reuse these materials in almost limitless ways. The Library now makes it possible to download such items in the highest resolution available directly from the Digital Collections website. Search Digital Collections No permission required. Below you'll find tools, projects, and explorations designed to inspire your own creations—go forth and reuse! Visualize the Public Domain An experiment by NYPL Labs to help patrons understand and explore what is contained in this release. Discover the Collections Learn more about our public domain release. Apply for the Remix Residency To promote transformative, interesting, and creative new uses of our Digital Collections and data, NYPL is now accepting applications for a Remix Residency program. Use Our Data and Utilities Our digitized collections are available as machine-readable data: over one million records for you to search, crawl and compute. Navigating the Green Books

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:

6 Design Resources for Librarians – LITA Blog There’s one little bullet point at the end of my job description that reads: Participate in curation of digital displays, and use social media tools and outlets for promotion of library resources, collections, and services. I love graphic design and take every opportunity to flex my Photoshop muscles, but I know that not everyone shares my enthusiasm. Whether it’s in your job description or not, at some point you’ll find yourself designing a research poster, slide deck, workshop flyer, social media banner, or book display. When the time comes, here’s a list of resources that are guaranteed to help conquer design anxiety. COLOR Creating a color palette is not my strong suit, so I rely on the web to find inspiration. ICONS Icons are the new clipart! INSPIRATION Do I need to say it? FONTS There are plenty of places to find free fonts online, but I’m partial to DaFont. SHAPES Designing with simple shapes can be very effective. And sometimes I use all of these resources in tandem. Like this:

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.

Font Awesome, the iconic font and CSS toolkit 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: