background preloader

Menu CSS 3 animé

Menu CSS 3 animé

CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 css html Passons à la pratique. Enfin, me direz-vous ! Nous allons commencer doucement en apprenant comment mettre en forme de pages tels qu'on les ferait en HTML. Si vous avez déjà fait un site mais sans CSS, avec des balises font partout, des mises en italique ou en gras ou en souligné... vous verrez pourquoi je ne vous ai pas appris ces balises dépréciées sur la page HTML : on peut faire la même chose en CSS et ainsi, la forme et le contenu sont bien dissociés, et surtout, vous n'avez pas besoin de modifier toutes vos pages HTML au moindre changement de design : tout ce fera dans le CSS que vous définirez une seule fois. Je vous conseille d'ouvrir un nouvel onglet dans votre navigateur, si votre navigateur le permet (clique du milieu sous Firefox, Maj+clic pour ouvrir une nouvelle fenêtre dans Internet Explorer) avec la page d'aide-mémoire CSS, ainsi vous pourrez vous documenter sur les propriétés utilisées. IDEA: Voici ce qui est possible en HTML ; version CSS. Le code HTML de la page La page

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

Introduction à l’HTML5 | HTML5-CSS3.fr Cet article est destiné aux débutants en HTML5, et à tous ceux qui souhaitent en savoir un peu plus sur cette nouvelle technologie qui agite le web et le monde mobile. Si vous vous intéressez aux technologies du web, vous avez probablement déjà entendu parler de l’HTML5 aux cours des dernières années. Cette introduction va vous donner un premier aperçu de ce qui se cache derrière le terme HTML5, vous présentera le contexte dans lequel évolue cette technologie, et nous verrons un bon nombre de nouvelles fonctionnalités qu’il apporte. Sommaire : L’HTML5 c’est quoi ? L’HTML5 n’est pas… Tout d’abord, je suis convaincu que parmi vous certains se disent : L’HTML5, c’est un nouveau langage ? Ou encore : Je débute, j’ai envie d’apprendre l’HTML5 directement, ça a l’air mieux que l’HTML d’avant. Voire : Pfff, moi qui venait d’apprendre l’HTML, je vais devoir tout réapprendre… Il est grand temps de clarifier les choses : L’HTML5 n’est pas un nouveau langage. L’HTML5 est… Le W3C et le WHATWG On y arrive !

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. 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 Cette solution est la meilleure en termes de markup : elle ne nécessite qu’un seul élément et le reste est l’affaire de pseudo-éléments, de transformations et de dégradés css. Pour l’instant, supposons que nous voulions un diagramme circulaire qui affiche le pourcentage 20% (codé en dur). Voici le code final :

Introduction au CSS3 | HTML5-CSS3.fr Cette introduction est destinée à ceux qui souhaitent avoir un aperçu global de ce qu’apporte le CSS3. Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires afin d’en tirer profit dès maintenant et nous discuterons du caractère non-critique de son utilisation. Il s’agit de la suite logique de l’Introduction à l’HTML5, mais elle peut être lue indépendamment. Sommaire Le CSS3 c’est quoi ? Le CSS3 est le nom employé pour caractériser l’ensemble des nouveautés depuis le CSS2.1. Mais le CSS3 c’est également un ensemble de nouveaux sélecteurs, de nouvelles manières de spécifier les couleurs, une détection des caractéristiques de l’appareil de l’utilisateur, des calculs dans les feuilles de style, des SVG en arrière plan… bref, le CSS3 est un généreux enrichissement des feuilles de style qui, en plus d’être profitable à l’utilisateur, l’est au développeur également ! Exemple pratique : Les bordures arrondies Et vous vous dites : Avec pour CSS : Non. à

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

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. 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 From what I can tell there isn’t a major difference in rendering between this newer version and the classic version. 4. Code Source Some of the newer CSS3 properties have pampered us into thinking they may be applied everywhere. 5. Code Source 6. 7. Code Source 8. Code Source 9. 10. 11. Code Source 12.

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. La propriété CSS3 calc() pour arrêter avec les balises HTML imbriquées inutilement Dans de nombreux cas, on utilise des balises superflus pour gérer ; la largeur total d'une grille avec les éléments externes et l'espacement entre chaque balise avec l'élément interne. Parfois même, pour appliquer de la couleur de fond, on utilise une troisième balise ! C'est notamment le cas avec le framework CSS Bootstrap qui se fait vieux. Si vous vous ventez de ne plus suporter IE8 parce qu’il à fait son temps, alors il est également temps d'arrêter d'utiliser des balises inutiles ! Voici un exemple d'ancienne pratique et son équivalence avec la propriété CSS3 calc(). La Grille Exemple old school à la Bootstrap Avec le HTML suivant : et avec la CSS suivante : nous obtenons : Résultat : Même exemple avec calc() en CSS3 <ul class="component"> <li>Zone 1</li> <li>Zone 2</li> <li>Zone 3</li> <li>Zone 4</li> <li>Zone 5</li></ul> Zone 1 Zone 2 Zone 3 Zone 4 Zone 5 À propos de calc() Support IE9 Support propriétaire width: -webkit-calc(50% - 100px);width: -moz-calc(50% - 100px);width: calc(50% - 100px);

Les transitions et animations CSS | Édition Nº17 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). C’est pourquoi le langage CSS se devait d’offrir des fonctionnalités équivalentes pour l’enrichissement de l’expérience utilisateur. Transitions CSS ;Animations CSS ;Transformations CSS. Transitions et animations en CSS, c’est quoi ? Les animations

CSS Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Browser support ie Chrome Firefox Safari Opera 9+ Sometimes you don’t need crazy javascript code to come up with creative and nice looking effects. Today’s snippet is all about a single CSS property: background-attachment. You can set the background to be fixed within the viewport (background-attachment: fixed;). We’ve used this already in our alternate fixed & scroll backgrounds template. The new trick here is having the same element (in this case a phone) in the exact same position in all background images, so that while you scroll everything moves, but the phone. The only assets you need are different images, with the same size and an element in common in the same position. Image credits: Unsplash. iPhone mockup from Pixel Buddha. Creating the structure The HTML structure is pretty basic: each section contains a .content element with the title and paragraph. Adding style

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 ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery. 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é. Préparation de l'image de fond La méthode CSS3 Le code HTML

Related: