A Whole Bunch of Amazing Stuff Pseudo Elements Can Do By Chris Coyier On June 13, 2011 It's pretty amazing what you can do with the pseudo elements ::before and ::after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will. #Give you multiple background canvases Because you can absolutely position pseudo elements relative to their parent element, you can think of them as two extra layers to play with for every element. #Expand the number of shapes you can make with a single element All of the shapes above and many more can be created with a single element, which makes them actually practical. Here's an example of a six-pointed star: #Show URL's of links in printed web pages #Clear floats #Simulate float: center; #Label blocks of code with the language it is in #Create an entire icon set
CSS, JS or SMIL: What Should You Use For Animations? Web designers usually have three different tools available at their disposal for creating animations. These tools are CSS, JS or SMIL. But the bigger question here is- which is the one that offers maximum benefits in terms of functionality and near perfect designs? Well, each of these tools have their own set of pros and cons. And that’s why, it makes sense to compare all three in regards to specific web design requirements in order to arrive at a well-informed design decision, every time. Here is a little smattering on each of these tools along with their pros and cons intended to help web designers understand which amongst these is the best tool for creating animations. But before we get started with our analysis on these tools, let’s know a little about SVG as we’ll be discussing this term quite often here. SVG or Scalable Vector Graphics is an XML-based vector image format used for creating two-dimensional graphics. Now, let’s get started. JavaScript
CSS Animation 101 - Learn how to add animation to web pages using CSS Become a CSS animation expert with an email and a few minutes each day Next course starts on Monday! Animation using CSS can be overwhelming to learn all at once. This course breaks up lessons into 20 emails. By the end of four weeks you will have a good understanding of CSS transitions and animations, and how to apply them to your work. CSS Animation 101 was the perfect primer for anyone who’s looking to add animations to their websites. You will get A total of 20 emails over 4 weeks (one each weekday)Loads of code and project examples (on CodePen)Download cheatsheet for CSS animation and transitionsHelp and support every step of the way from Donovan himself100% money-back guarantee Who this course is for This course is for people who build for the web and want to add animation to their designs and sites. Contents Week 1 What is animation, and why should you animate? Week 2 All about transitions. Week 3 Animations. Week 4 Putting it all together. Ready to become a CSS animation expert? Buy now
Using CSS animations You can get additional control over animations — as well as useful information about them — by making use of animation events. These events, represented by the AnimationEvent object, can be used to detect when animations start, finish, and begin a new iteration. Each event includes the time at which it occurred as well as the name of the animation that triggered the event. We'll modify the sliding text example to output some information about each animation event when it occurs, so we can get a look at how they work. Adding the CSS We start with creating the CSS for the animation. Adding the animation event listeners We'll use JavaScript code to listen for all three possible animation events. const element = document.getElementById("watchme"); element.addEventListener("animationstart", listener, false); element.addEventListener("animationend", listener, false); element.addEventListener("animationiteration", listener, false); element.className = "slidein"; Why? Receiving the events
CSS3 : animations – Laravel Avec les transformations on peut réaliser des animations d’éléments mais les possibilités sont limitées. On peut définir le départ et l’arrivée mais on a aucun contrôle sur les étapes intermédiaires. Les animations quant à elles autorisent ces contrôles intermédiaires et permettent de réaliser des choses beaucoup plus élaborées. C’est ce qu’on va voir dans cet article. Pour créer une animation CSS on doit : créer et nommer l’animation (avec @keyframes)attacher cette animation à un élément (avec animation-name) On commence par créer une animation : On utilise la règle @keyframes et on nomme l’animation taille. Il existe quelques règles avec le signe @ (nommées at-rules) qui permettent d’encapsuler plusieurs règles pour le processeur CSS du navigateur, par exemple @media, @page… On va changer la largeur (width) de (from) 100px à (to) 200px. On attache ensuite cette animation à un élément : On utilise : Vous avez ça en action ici. On a 3 étapes : Vous avez ça en action ici. En action ici. CSS animate
Détecter la prise en charge des animations CSS Avec les animations CSS, on peut ajouter des animations sur du contenu, uniquement en utilisant CSS. Toutefois, cette fonctionnalité n'est parfois pas disponible et on souhaiterait alors pouvoir gérer ce cas et appliquer un effet similaire avec JavaScript. Cet article, basé sur ce billet de Christian Heilmann, illustre une technique pour détecter la prise en charge des animations CSS. Détecter la prise en charge des animations CSSEdit Ce code JavaScript permet de vérifier que les animations CSS peuvent être utilisées dans le navigateur : var animation = false, animationstring = 'animation', keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = '', elm = document.createElement('div'); if( elm.style.animationName ! Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant animation avec false. Ensuite, il faut ajouter les étapes au CSS de la page. Voir dans JSFiddle Voir aussiEdit
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.
Animer un SVG avec CSS Chris Coyier s'est amusé à créer une petite animation SVG en CSS, sans passer par des bibliothèques compliquées. C'est fait maison, simple, efficace et expliqué de façon claire comme toujours. Par Chris Coyier Il existe plusieurs façons d'animer une image svg, depuis la balise animate jusqu'aux bibliothèques comme Snap.svg ou SVG.js. Je me suis amusé avec ça dernièrement, Wufoo souhaitant rafraîchir le graphisme de ses pubs sur CSS-Tricks. La démo finale est ici. NdT : Pour une introduction générale à SVG, vous pouvez consulter l'excellent article de Chris Coyier Utiliser SVG. 1. Ça va ressembler à une leçon de dessin sommaire, mais notre objectif étant l'animation, nous allons passer sur le reste vite fait. Faire sauter les lettres dans la page. J'ai mis tout ça sur Illustrator : Remarquez que le logo et le texte du slogan sont des formes vectorielles, leur rendu en <path> (chemins) SVG sera très simple. Le texte "Fast." est laissé en tant que texte dans Illustrator. 2. 3. 4. 5. 6.
Detecting and generating CSS animations in JavaScript When writing of the hypnotic spiral demo the issue appeared that I wanted to use CSS animation when possible but have a fallback to rotate an element. As I didn’t want to rely on CSS animation I also considered it pointless to write it by hand but instead create it with JavaScript when the browser supports it. Here’s how that is done. Testing for the support of animations means testing if the style attribute is supported: var animation = false, animationstring = 'animation', keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = ''; if( elm.style.animationName ) { animation = true; } if( animation === false ) { for( var i = 0; i < domPrefixes.length; i++ ) { if( elm.style[ domPrefixes[i] + 'AnimationName' ] ! [Update – the earlier code did not check if the browser supports animation without a prefix – this one does] This checks if the browser supports animation without any prefixes. You can see the detection in action and a fallback JavaScript solution on JSFiddle:
Complete list of HTML entities Complete list of HTML entities with their numbers and names. Also included is a full list of ASCII characters that can be represented in HTML (i.e. printable characters). ASCII Characters (Printable) Only printable characters are displayed as control characters (0-31) shouldn't be present in HTML pages since they have no visual representations. ISO-8859-1 Characters Full list of supported ISO-8859-1 characters. ISO-8859-1 Symbols Full list of supported ISO-8859-1 symbols in HTML. Math Symbols Full list of all supported math symbols in HTML. Greek Letters Full list of all supported greek letters in HTML. Miscellaneous HTML entities List of miscellaneous HTML entities. CSS animation, une introduction Une présentation claire et vivante des animations CSS par Rachel Cope, avec exemples de code et présentation live sur CodePen. Un bon article pour apprendre ou pour réviser ses classiques. Par Rachel Cope Le cerveau humain est programmé pour être attentif au mouvement. Lorsqu’elles sont bien faites, les animations peuvent ajouter interaction et feedback, contribuer à l’émotion et au plaisir apportés par la navigation et ajouter de la personnalité à votre interface. Le premier objectif du design émotionnel est de faciliter la communication humaine. Dans cet article, nous allons passer en revue les bases de l’animation CSS. Les blocs constitutifs de l’animation. Les animations CSS sont constituées de deux blocs de base. 1. Donc une définition initiale, puis sa mise en oeuvre. Bloc #1: Keyframes Les keyframes constituent les fondations de l’animation. Prenons un exemple simple de @keyframes que j’ai appelé “bounceIn” (rebond). Les @keyframes sont ajoutés à votre feuille de style CSS : Exemple :