background preloader

Animation Generator

Animation Generator
Related:  A trier

Openweb.eu.org — Bien faire le web ! CSS Animation Generator CSS animations were added at the start of CSS3 which allows you to transition from one CSS style to another. To use a CSS animation you will have to start styling the element and a number of keyframes to define the transition from start to end of the animation. Before CSS animation was available, the way you would make an element change styling would be to use JavaScript to change an element's styling properties in a certain order. The advantages of using CSS animation over JavaScript driven animations is that they run smoother than JavaScript, which commonly skipped keyframes. Browser rendering engines are built to work better with CSS animation. They are also easier to develop as all coding of the animation is done in CSS and you just select which properties to change at certain keyframes. Using the CSS animation generator to try out the following range of CSS animations including You can also use the different easing options; ease, ease-in, ease-out, ease-in-out and linear.

Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS Gradient Animator Guide 2015 de la taille des images sur les réseaux sociaux EDIT : le guide 2016 est disponible ! Nous vous conseillons de le consulter pour accéder à des informations à jour. Toutes les tailles seront mises à jour régulièrement sur ce nouveau guide. > Accéder au guide 2016 de la taille des images sur les réseaux sociaux. Nous vous présentons régulièrement des indications sur la taille des images utilisées sur les différents réseaux sociaux, Facebook entre autres, que ce soit pour les profils, pour les publications ou encore pour les publicités. EDIT : pour aller plus loin, nous avons ajouté à la fin de cet article une autre infographie, qui rassemble toutes les règles à connaître pour vos images sur les réseaux sociaux (notamment la manière dont sont coupées les images sur Facebook, la taille d’affichage etc.). Images Twitter Images Facebook Images Google Plus Images Instagram Image de profil : 110 x 110 pixels Thumbnails : 161 x 161 pixels Taille des photos : 640 x 640 pixels Images Pinterest Images Tumblr Images Youtube Images LinkedIn

Les effets graphiques (très) avancés en CSS Vincent De Oliveira · Kiwiparty 2012 t.co/Vw9tDej Vincent De Oliveira Les effets (presque) courants Quoi de plus? Trois fois rien... Commençons par la poudre aux yeux! Background and Borders border-corner-shape: curve | bevel | scoop | notch Au sein de CSS4, pas de support actuellement border-clip: 10px 1fr 10px Au sein de CSS4, pas de support actuellement Quoi de neuf dans la gestion des textes? font-variant · font-feature-settings Contrôle de l'affichage des glyphes Ligatures, crénage, fractions, variantes styllistiques, etc. font-variant Propriété raccourcie Aucun support actuellement font-feature-settings font-feature-settings Ligatures standards: efficaceefficace Ligatures optionnelles: AbbayeAbbaye Chiffres elzéviriens: 482482 Fractions: 1/3 1/41/3 1/4 Ordinaux: 13th13th Attention, fonctionne avec Firefox 4+, IE10 · Police Contenu Book Display Regular Variantes styllistiques: ArbreArbre Variantes contextuelles: ArbreArbre Crénage: WAVEWAVE Petites capitales: CapitalesCapitales Ornements: abcabc

CSS3 : @font-face, vous avez demandé une police de caractère non standard ? Vous êtes ici > CSS Débutant | CSS3 | Déclarer une police de caractère non standard avec @font-face Longtemps, longtemps, le webmestre s'est lamenté de ne pouvoir utiliser qu'un petit nombre de fontes pour ses sites web. Arial, Helvetica, times new roman... c'était d'un triste ! Ou alors il fallait faire des images. Et mettre du texte en image ce n'est tout de même pas très logique, sans compter les problèmes d'accessibilité qui peuvent en découler. Grâce à @font-face on peut à présent utiliser des polices de caractère exotiques et laisser cours à son inventivité. Règle utilisée : @font-face Fonctionne avec : Chrome, Safari Firefox, SeaMonkey MSIE Opera Le sélecteur @font-face existe depuis très longtemps : depuis les CSS 2.0. La police de caractère, ou plutôt les différents formats de la police de caractère, doit être placée sur le serveur. Il y aura donc les mêmes contraintes techniques et éthiques qu'avec une image : Étape 1 : obtenir tous les formats nécessaires Code CSS Tout est dans le ?

Collections de polices «standard» pour le Web Cette page permet de tester la présence de différentes polices de caractères listées. Si une police est absente, le navigateur utilisera à la place une police de style opposé: sans-serif pour les serif et inversement; serif pour les monospace. Collections de polices testées Test des polices Notez que la citation dans le texte d’exemple utlise deux espaces fines insécables (entité HTML  ), après les guillemets ouvrant et avant les guillemets fermant. Référence du texte de démonstration: Philippe Jaccottet, Ce peu de bruits, Gallimard, 2008, p. 50.

Related: