background preloader

Les transitions et animations CSS

Les transitions et animations CSS
Introduction Depuis toujours, les concepteurs web ont tenté de styler et de dynamiser des pages HTML terriblement monotones. À la fin des années 90, un simple effet de survol ne peut pas être réalisé facilement : l’utilisation de JavaScript est inévitable, mais impose de connaître la programmation. L’arrivée des pseudo-classes dynamiques au sein de CSS (:hover, :focus, :active…) a alors facilité l’opération et permis de s’affranchir de scripts souvent lourds. Plus tard, lorsque que la mode était aux ombres portées et aux coins arrondis, les techniques passaient par la surcharge du balisage HTML et la création d’images étirables, ce qui nuisait considérablement à la sémantique et à l’accessibilité (si toutes les précautions n’étaient pas prises). Aujourd’hui, avec CSS3 et les propriétés box-shadow et border-radius, ces effets sont facilement réalisables et les anciennes techniques sont fortement déconseillées. Transitions CSS ;Animations CSS ;Transformations CSS. Les transitions Conclusion

Une feuille de styles de base pour le media print Nous avons parfois la fâcheuse habitude de penser que le Web n’est bon à être restitué que sur un écran d’ordinateur. Pourtant, un grand nombre de documents web et d’informations en ligne sont parfaitement adaptés au médium d’impression. Non seulement pour faciliter leur consultation, les transmettre, mais aussi pour les archiver. Pour vous faciliter la tâche et ne plus la négliger, je vous propose une feuille de style dédiée à l'impression qui condense bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide de la règle-at @media print {...}. L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes (marges, couleurs, contrastes, tailles, gestion des sauts de pages et des veuves et orphelines), que vous pourrez adapter à vos convenances ou besoins personnels.

Un arrière-plan extensible intelligent Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord. Comment fait-on ? Exemples Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe : Simon & Comet Flavors me Piz'za-za Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le principe Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré. On est donc loin de ce résultat simpliste qui se contente d'étirer l'image à 100% de son conteneur. Préparation de l'image de fond Après enregistrement, l'image est prête à l'emploi ! <!

CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Propriétés par ordre alphabétique Classement alphabétique Cliquez sur une propriété pour accéder à sa fiche détaillée. En complément En complément de ces informations, vous pouvez également consulter la documentation en ligne du site Mozilla concernant les propriétés CSS. Le copyright de cette page appartient à css-faciles. Pour plus de détail sur ce copyright, consultez notre page consacrée aux droits de copie. 50 Useful CSS Snippets Every Designer Should Have With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison. For this article I want to present 50 handy CSS2/CSS3 code snippets for any web professional. These are perfect for storing in your development IDE of choice, or even keeping them saved in a small CSS file. Either way I am sure designers & developers can find some use for some of the snippets in this collection. Recommended Reading: 20 Useful CSS Tips For Beginners 1. Basic CSS browser resets are some of the most common snippets you’ll find online. 2. This clearfix code has been around the Web for years circulating amongst savvy web developers. 3. 2011 Updated Clearfix 4. Code Source 5. Code Source 6. 7. Code Source 8. Code Source 9. 10. 11. Code Source

How to make a simple gradient using box-shadow CSS property Rating: 0/5 (0 votes cast) Thank you for rating! You have already rated this page, you can only rate it once! Your rating has been changed, thanks for rating! Log in or create a user account to rate this page. Mar 17th 2014 03:58 am 2829 This article demonstrates that box-shadow CSS property can be used not only to create shadows around an element, but also to create a gradient inside an element as background. Actually, the sole purpose of this property is to create shadows. Here is syntax of box-shadow property: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow - position of horizontal shadow; v-shadow - position of vertical shadow; blur - blur distance; spread - size of shadow; color - color of shadow; inset - changes shadow from an outer shadow to an inner shadow. All examples below are applied to div element which has a fixed width and height. The following CSS styles change color of the background from blue to yellow vertically: Live demo Colors of gradient. Live demo Live demo

Animations CSS Cette fonction est expérimentalePuisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification. Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d'une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont répétées. Référence Propriétés CSS Règles @ CSS Guides Détecter la prise en charge des animations CSS Cet article décrit une technique permettant de détecter si le navigateur prend en charge les animations CSS. Manipuler les animations CSS Spécifications Voir aussi

Comment fonctionne la propriété CSS z-index La propriété z-index permet de préciser l'empilement de certains éléments d'une page, c'est-à-dire sur l'axe vertical. Elle permet par exemple d'indiquer que pour deux éléments A et B partiellement ou totalement superposés, A sera placé au dessus de B ou inversement. Mais l'utilisation de cette propriété comporte quelques pièges. Il y a deux informations principales à retenir : 1. Seuls les éléments positionnés peuvent avoir un z-index. 2. Un exemple Soit le code HTML suivant: <div id="test1">... et le code CSS suivant: Le résultat attendu est le suivant: div#test1 sera au premier plan; en dessous on aura div#test2; en dessous encore on aura div#test3 (qui ne se place pas au-dessus malgré un z-index de 10 car il n'est pas positionné); enfin, div#test4 sera le plus haut de la pile, mais ne recouvre pas les autres blocs ici car il est repoussé vers le bas par div#test3 qui n'est pas positionné.

Diagrammes circulaires flexibles avec CSS et SVG Lea Verou vient de publier un livre extraordinaire proposant des techniques CSS et SVG originales. Cet article est technique, mais l'approche, la méthode, la créativité sont une sacrée source d'inspiration! Par Lea Verou Les diagrammes circulaires (a.k.a. diagrammes en camembert), même dans une bichromie la plus basique, n’ont jamais été la chose la plus facile à créer avec les technologies du web, bien qu’extrêmement courants dans l’information, depuis la présentation de simples statistiques jusqu’au indicateurs de progression et aux timers. Les implémentations font appel généralement à un éditeur d’images externe pour créer des images multiples pour les diverses valeurs du diagramme ou des frameworks JavaScript conçus pour des diagrammes bien plus complexes. Bien que l’exploit ne soit pas aussi impossible qu’autrefois, il n’existe toujours pas de solution simple. Solution basée sur CSS transform background-image: linear-gradient(to right, transparent 50%, #655 0); Voici le code final :

Timelines CSS - 7 astuces Présenter une histoire, une succession d’événements, bref toute une vie et pourquoi pas une navigation, telle est la raison d’être d’une timeline. Découvrez 7 astuces pour réaliser la votre en CSS. Une timeline en CSS permet de se dispenser d’une image, difficilement évolutive dans un site web dynamique. Une timeline CSS basique, verticale Pure CSS Timeline par MattBango Une timeline CSS scrollable Un exemple bien réalisé par Smashing Magazine Un tutoriel bien complet par TutorialZine Une timeline avec un tutoriel complet Exemple et sources à télécharger par Eric Meyer Un exemple avec le nouveau portfolio de Peter Cain, construit sur une timeline : petejcain.co.uk/ Cette entrée a été publiée dans CSS, avec comme mot(s)-clef(s) astuce css, chronologie css, css, css timeline.

Contraste de texte automatique avec CSS Blend Modes Les Blend Modes CSS permettent de créer des effets graphiques vraiment passionnants. Une des applications pratiques les plus utiles concerne le contraste automatique entre texte et background. Par Dudley Storey. Par Dudley Storey Dans quelques articles précédents, j’ai créé divers effets graphiques avec CSS Blend Modes, mais l’une des applications les plus utiles des mélanges (blends) concerne le texte. Le contraste est une priorité pour l’accessibilité, et ce point est souvent négligé par certains designers adeptes des ombres, de la subtilité et des polices fines. Vous pouvez voir le résultat ci-dessous : Sans traitement particulier, le deuxième mot est totalement illisible. Remplacer le texte par une image. Mais avec Blend Modes, nous pouvons faire basculer le texte lorsqu’il passe du côté sombre : Remarquez le changement de couleur appliqué à l’élément <h1>qui permet à blend mode de basculer la couleur du texte vers la couleur opposée du background. Le résultat : Ce n’est pas la panacée

CSS3 Background Images 100% width/height 28th July 2010 A Box with known width and height A Box with known width and height Caramels caramel tiramisu. A Box with known width and unknown height A Box with known width and unknown height Sugar plum sesame snaps cotton candy chupa chups jelly lemon drops. Liquorice tiramisu tootsie roll apple pie pudding bear claw. A Box with unknown width and unknown height A Box with unknown width and unknown height Sugar plum sesame snaps cotton candy chupa chups jelly lemon drops.Gingerbread tiramisu gummies. stu nicholls - CSS play Information Having recently ploughed through hundreds of pages on the web looking for information on how to style a background image to be 100% the size of the container using CSS3 and found most did not have the correct information, I thought that I would clarify things here and show how this is actually styled. All three of the above boxes use the same styling for the background image and is as follows: Copyright

Beautiful Photo Stack Gallery with jQuery and CSS3 The Night Top Cat! The most effectual Top Cat! Lovely Dreams Abundantly fowl of you'll fly moved i evening there whales creeping very kind green. Insane Art Also female divide fruitful wherein upon, fruitful great fourth likeness given subdue cattle deep abundantly set place night stars fill. Prime Time And did the Countenance DivineShine forth upon our clouded hills? House, Baby! You can have all the faith you want in spirits, and the afterlife, and heaven and hell, but when it comes to this world, don't be an idiot. Run away Without contraries is no progression. Longing So hath under years itself seasons life divided signs light were god fruitful evening a. Heartbreaks A light moving. Fearful Water If the doors of perception were cleansed everything would appear to man as it is, infinite.

Related: