CSS3 Animation Cheat SheetGo! How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accomodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn't trigger. Add the animation stylesheet to the <head> element of your webpage: Replace css with the name of the directory where the animation stylesheet is. Add an animation class to the element you want animated: Replace slideUp with the desired animation class. For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element: Adding effects
Sélectionner les frères d'un élément en CSS Également appelés les "combinateurs d'adjacence", ces sélecteurs avancés permettent de cibler des éléments proches d'un autre élément. Il existe à l'heure actuelle deux sélecteurs de ce type : le combinateur d'adjacence directe, et le combinateur d'adjance indirecte. Le sélecteur d'adjacence directe Le sélecteur d’adjacence directe est compatible avec quasiment tous les navigateurs. La prise en charge de ce sélecteur est intéressante, puisque Firefox 1+, Safari 1.3+, Opera 9.2+, Chrome 2.0+ et IE7+ comprennent ce sélecteur. Vous pouvez donc vous lâcher et l'utiliser dans vos intégrations. Syntaxe de base Pour cibler le frère d'un élément, nous allons avoir besoin du symbole +. element1 + element2 { } Ici les styles seront appliqués uniquement à element2 directement frère de element1. C'est un bon moyen de cibler un élément dans un cas particulier, comme un p situé juste après un titre, ou pour appliquer des styles à des éléments semblables, sauf le premier de la fratrie. Voir l'exemple Exemple
World Wide Web Consortium (W3C) Quand CSS et Courriel s'embrassent sous le gui Par Mark Wyner En tentant de recréer un design sophistiqué dans un courriel HTML à l'aide de CSS, on se heurte souvent à un mur qui peut se présenter soit sous la forme d'inexplicables mutilations par les clients mail, soit sous celle d'un mail sentencieux de la part d'un administrateur de messagerie, statuant que les CSS sont “contre les règles”. Si vous aussi vous en avez assez de vous taper la tête contre les murs et d'utiliser les balises font, cet article est pour vous. Contrairement à ce que l'on peut penser, vous pouvez créer en toute tranquillité des courriels HTML avec une bonne vieille CSS façonnée à l'ancienne. D'abord arrive l'amour : pour le meilleur et pour le pire Entre des articles sur le web design, des conversations entre professionnels, et des retours d'administrateurs de messagerie, j'ai fini par apprendre que certains clients mail massacraient allégrement les CSS en supprimant les styles ou en tronquant les en-têtes. Puis vient le mariage : la remise en cause Remarques
Docteur HTML5, Travailler en HTML5 dès aujourd'hui! Il existe plusieurs événements sur HTML5 en français. Trouvez-vous qu’il est difficile d’en trouver un dans votre ville ? Si vous en organisez un, présentez-le dans les commentaires de ce billet et sait-on jamais, cela pourrait être utile ! Par exemple, à Montréal, le W3Québec organise des HTML5 Meetup. L’information se retrouve ici : Continuer à lire » Nous recevons beaucoup d’e-mails via notre service « Demandez-le au docteur » à propos des conséquences de l’utilisation d’HTML 5 sur le référencement. Continuer à lire » (Aussi disponible en espagnol, Traducción de “HTML 5 + XML = XHTML 5″, en Portuguais et évidemment dans sa version originale en anglais.) Continuer à lire » Nous sommes déjà habitués depuis un bon bout de temps de voir <div id="pied-de-page"> à la fin du code source de pages Web. Continuer à lire » Même si HTML 5 est une technologie récente et fantastique, certains navigateurs ne supportent pas nativement les nouveaux éléments sémantiques.
display: inline-block et les espaces indésirables La valeur inline-block de la propriété display est à la mode, même si elle demeure encore trop peu connue et mal utilisée. Elle offre de multiples avantages dont le principal est de pouvoir disposer des éléments les uns à côté des autres, tout en étant dimensionnés et sans les retirer du flux. L'un de ses inconvénients majeurs est l'apparition d'un espace indésirable et incompressible de prime abord entre les blocs. S'il n'est pas gênant, tant-mieux; sinon, de multiples techniques plus biscornues les unes que les autres existent. Le cas «white-space» Comme tous les éléments de type inline ou de contenu textuel, les objets munis de la déclaration display: inline-block respectent la règle des caractères blancs (whitespace), c’est-à-dire que n’importe quel caractère HTML espaçant deux éléments va immanquablement apparaître entre leurs deux boîtes. L’espace créé par le white-space est d'environ 4 pixels, mais ne vous y méprenez pas : cela varie selon les navigateurs et la taille de police.
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
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.