Je fais des essais de CSS3

. lecture : 2 minutes

J'essaye une nouvelle fonctionalité de CSS3 : les transitions.

En CSS on peut depuis longtemps définir une couleur pour les éléments, et une autre à afficher quand l'utilisateur passe la souris dessus.

En CSS 3, on peut dorénavant spécifier la durée de la transformation; elle n'est plus obligatoirement instantanée.

J'ai donc ajouté les instructions suivantes à mon code CSS :

transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear;

ainsi, si avant on avait :

boooooring.

Maintenant on a :

Waou.

Cela fonctionne avec Safari, Opera, Chrome, mais pas avec Internet Explorer (pour changer). Quant à Firefox, il devrait afficher les transitions dans une prochaine version.

Ce qui est bien avec ça, c'est que pour les navigateurs qui ne supportent pas le css3, la transition reste instantanée. On a donc une nouvelle fonctionalité sans casser l'existant, ce qui respecte le principe de "Graceful Degradation".

Commentaires

1. le 19 mai 2010 (11 h 21), par KG :
Ah cool ! Je met en effet un max de CSS3 sur le template d'un de mes sites, notamment pour les bordures arrondies, ombres et "gradients". Ca permet d'alléger la page (pas de gradients avec une image, pas de javascript ou d'images pour faire les arrondis...). JQuery permet de faire facilement des transitions mais bon, si c'est carrément intégré au navigateur, c'est mieux !

Tant pis pour IE, qui effectivement affichera une version dégradée mais pas trop, ce qui est plutot sympa.

Par contre FF le gère pas encore ? Pas glop.

2. le 19 mai 2010 (11 h 33), par Marmouchon :
C'est beau mais comme dit KG balot que ça marche pas avec les deux principaux navigateur :(

L'ajout de commentaires est désactivé.


Manu·e

La personne qui a créé Épinards & Caramel. ☕🤔🐙

Étiquettes

In English Copié de l'ancien site Machinima Maths Épinards et Caramel Juste un lien Livre PHP Galerie d'images Connerie WoW 3615 Ma vie Conseil Actualités Film Jeux vidéos symfony 1.4 Hack DEFCON javascript Vidéos TED & TEDx Musique Piratage Réflexions IBM IA (Intelligence artificielle) Zombi Logiciel Télé Science Site internet Style Google Pentesting Code Boulot Religion Twitter Facebook Design Économie Ubuntu C'était mieux avant Symfony2 Comédie Musicale WebGL Europe Android Argent Bitcoin Sécurité informatique Cryptographie Robots Linguistique Wikileaks USA Haïti Open world game Apple Cloud HADOPI Loi Internet Minecraft Plugin Tracking Publicité Visualisation de données Last.fm Python Canvas Serious game Humour Podcast Techno-thriller Espace Norvège Nutrition Informatique Linux Firefox Jquery Science Fiction Windows Bricolage Pieuvres Wikipedia In Italiano Italie CSS Dwarf Fortress Canal+ Hardware User experience design Lego France Grèce Allemagne Photographie Censure de l'Internet Chine Écologie Vie privée Islam Maroc Violence physique Sex XIXe siècle Histoire Brésil Portugal Échecs Logique Microsoft Steam Opera Graphisme Finance Sondage Food Traduction Paris Canada Surveillance de l'Internet Horreur Algorithmique Unicode & Emoji Physique Santé Tribute MMORPG Finlande Russie XXe siècle Seconde Guerre Mondiale Langage Star Wars Impression 3D Death Framework Politique Typographie NASA Polémique Mars Féminisme Violence sexuelle Libertés fondamentales Corée du Sud Suisse Japon Toys Concurrence Droit d'auteur Éducation Estonie UK Égypte Indonésie Théâtre ONU Peine de mort Abeilles Prix Nobel En español Cannabis Aléatoire Censure Applications mobiles Course Homosexualité Danse Adobe NPR Mozilla Guitare Homophobie Mariage TWiT Settings Français DARPA Boston Dynamics Nerdfighteria Cancer Traitement de l'image Armes Secte de Scientologie The Onion Tumblr ADHD Drugs Scandale Césars Paradis fiscaux Copyright Documentaire Yahoo BDSM Post-apocalyptic Sword & Laser Virtual reality Spam Mali Timbuktu Manuscripts Crowdfunding indiegogo RSS Feedly Free Youtube Magie Meta Puzzle Tetris Grève Vocabulaire Bateaux Système métrique Vision artificielle Apprentissage automatique Traduction automatique Traitement du langage naturel Alan Turing meme Pixar Psychologie Debate Éclipse Ciel & Espace Organisation Google Analytics D3.js Vexillologie Oracle Juridique Saisons Astronomie Comète Rosetta ESA Pokémon Go Critiques, tests Programmes Élections Scrutin Météo Changement Climatique Tractors PUBG Capitalisme Changement d’heure Anarchisme Écriture Inclusive Bisexualité Game Jeux de société Toulouse Évènement