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.
Openweb.eu.org — Bien faire le web ! CSS Gradient Animator CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. 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 ?
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
Create panoramas of a scene with LightWave's Advanced Camera [peteryu.ca] The advanced camera in LightWave is a very flexible camera that can produce lots of interesting effects. One useful feature is that it can create panoramas of your LightWave scene which you can use as environment maps with Textured Environment or as reflection maps. This is a panoramic view of a room with differently coloured walls that was created with the Advanced Camera: I tested this method with LightWave 9.6. Scene Setup I created a basic scene which consists of a box (with all polygon normals facing inwards), whose sides all have different colors. Here is a render with the standard Perspective Camera at the 4:3 aspect ratio, with zoom factor set to 0.5 to show more of the walls: Create a panorama suitable for spherical mapping To use the Advanced Camera, change the camera type to Advanced Camera. Setting the resolution in this way allows the field of view to show the entire scene in a panorama once the Advanced Camera is set up. Using the panorama Fish eye view
Ombres avancées avec CSS3 et box-shadow CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Pseudo-éléments :after et :before Imaginez que dans un site vous souhaitiez ajouter derrière un lien la langue du site en référence (qui, pour rappel, se précise grâce à l’attribut hreflang sur un élément <a>) vous pouvez le faire en passant par du CSS : La base de travail Pour résumer simplement notre démarche nous avons des divisions : Ombre simple Bogues
CSS3 Grid Layout - Alsacreations Le module de positionnement "Grid Layout" est une spécification du W3C à l'état de Candidate Recommandation dont les premiers jets datent de 2004. Sa documentation officielle est actuellement maintenue par trois contributeurs, dont une personne de Microsoft et une personne de Google. Note : ce tutoriel a été initialement rédigé en février 2012. Les anciennes versions de Mozilla Firefox, Chrome et Opera nécessitent d'activer un "flag" dans la configuration du navigateur; les autres navigateurs sont également intéressés et ne devraient pas tarder à implémenter ce module, au regard des vastes possibilités offertes par ce schéma de positionnement. Comment activer les flags ? Sur Firefox : about:config puis layout.css.grid.enabled Sur Chrome : puis "Activer les fonctionnalités expérimentales de Web Platform" Compatibilité navigateurs du module Grid Layout Le positionnement par grille Les propriétés usuelles de Grid Layout Mise en oeuvre Exemple 2 (grille de 4 emplacements) :