Balises

HTeuMeuLeu : Le blog d'un intégrateur HTML et CSS. Aide-mémoire, Infographie et Développement Web. List.js - Search, sort, filters, flexibility to tables, list and more! A Complete Guide to Flexbox. Background The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”). The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.). Basics & Terminology display. Flexbox Defense. Owl Carousel. Flickity. CSS and jQuery Bouncy content filter. This space-saving content filter allows the users to switch from one category to the other in a fancy way!

Action Bar. Percentage bar. Bases Javascript. Opérateurs logiques && || !

Opérateurs de calcul (valeurs numériques) + - * / = % exemple : 12 % 5 NaN % 2 1 % 2 2 % 3 5.5 % 2 Opérateurs d'incrémentation ++ exemple : var i = 0; i++ -- Opérateurs d'affectation += exemple : var i = 0; i+= 1 -= exemple : var i = 0; i-= 1 *= /= %= Stocke la nouvelle valeur dans la variable de gauche Opérateurs de comparaison == exemple : 1 == 1 1 == 2 "1" == 1 ! = < <= > >= === "1" == 1 "1" === 1 ! == type string: var texte = "Jean"; > texte.length type number: var unNombre = 42; > unNombre.length type booleen: var monTest = true; type array: var unNombre = [1,'bonjour', true, object]; > unNombre.length type Object var span = document.querySelector('span'); var name = "laurent"; var age = 21; document.getElementById("result").innerHTML = "bonjour" + " " + name; var array = ['banana', 'apple', 'lemon']; var length = array.length array[0] = "banana" array[1] = "apple" array[2] = "lemon" test sur fiddle Pour aller plus loin exo sur fiddle.

QuickFlip 2: The jQuery Flipping Plugin Made Faster and Simpler. jQuery QuickFlip 2.

CSS Flip Animation. You've all asked for it and now I've added it: Internet Explorer support!

Jquery - Flipcard hover into onclick action. Useful resources and inspiration for creative minds. Labs by Big Room Studios. Controlling CSS Animations and Transitions with JavaScript. The following is a guest post by Zach Saucier.

Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial. Web designers sometimes believe that animating in CSS is more difficult than animating in JavaScript. While CSS animation does have some limitations, most of the time it's more capable than we give it credit for!

Not to mention, typically more performant. Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries. Let's jump straight in! Quick Note: Animations and Transitions are Different In this article we will cover each of them separately. Trigger CSS3 animation on click.

Animate.css. Animatable: One property, two values, endless possibilities. Webdesign adaptatif : 5 astuces indispensables. Depuis l’année dernière, la tendance est au webdesign adaptatif.

Avec la sortie du nouvel iPad et l’explosion du marché téléphone mobile, cette tendance devrait doit devenir la norme d’ici la fin de l’année. Si les travailleurs du web ne plongent pas dans ces nouvelles pratiques, je parie sur un beau IE6 revival pour leurs sites internet. Voici 5 conseils pour vous aider à créer un design de qualité, accessible et adaptable. Vous apprendrez dans cet article : Comment cacher du contenu pour les petits écrans ? Avant de commencer la lecture de cet article je vous invite à visiter le site smashing magazine. Non, c’est du webdesign adaptatif. Les sprites CSS.

Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS.

La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Structure HTML5 en colonnes CSS, fluide et adaptative (responsive) - Trucsweb.com. Mise à jour du gabarit CSS classique avec entête, pied de page et alignement de colonnes.

Exemple simple et fluide à 3 colonnesAdapté en 2 colonnes sous les 800 pixelsPuis en une seule colonne à partir de 600 pixels de large. Webdesign adaptatif : 5 astuces indispensables. [Résolu] Effet de retournement de carte avec javascript. Limpide.

Ilyes, avec l'aide de tes modifications l'effet désiré se réalise. Je tiens juste à souligner les modifications faite par rapport à mon bout de code d'origine, dans le but de mettre à plat les connaissances nouvelles apportées avec ton intervention. L'appel de la fonction nécessite que l'élément déclencheur de l'effet soit mentionné. Ici, l'élément déclencheur est la balise button : Ce même élément déclencheur (le bouton) doit être ajouté dans la variable qui définit l'élément qui va subir l'effet de retournement (la carte). Cette ligne souligne aussi le fait que l'effet s'applique sur cet élément en particulier (la div représentant la carte) et non sur toutes les div représentant les cartes de l'ensemble du document, comme c'était le cas avec mon code d'origine : Et pour que la magie opère, dans la partie HTML, il faut souligner le fait qu'on veuille appliquer l'effet sur l'élément précis (le bouton) sur lequel on clique, en ajoutant this : Merci Ilyes.

GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use. Autoprefixer: A Postprocessor for Dealing with Vendor Prefixes in the Best Possible Way. :not() - Apprendre le CSS. Before - Apprendre le CSS. Filtre CSS « flou localisé » ou « flou progressif » - Créer de la profondeur de champ avec les filtres et les masques. Cette démo fait suite à Effet « soft-focus » en CSS, mais fait entrer les masques CSS et SVG pour créer des effets de « flou progressif » ou de « flou localisé ».

Le principe est donc strictement le même que la démo précédente, hormis l’utilisation des masques sur la seconde image qui superpose la première. (Je vous conseille de lire le premier article avant de continuer) Ajout des filtres CSS et SVG Dans ce tuto, je vais entrer sur la partie spécifique des filtres et des masques. Selectors Level 3. Abstract Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document.

Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. CSS uses Selectors for binding style properties to elements in the document. :first-of-type - Apprendre le CSS. Web Design and Applications - W3C. Linux Weekly News published a recent story called “Encrypted Media Extensions and exit conditions”, Cory Doctorow followed by publishing “W3C DRM working group chairman vetoes work on protecting security researchers and competition”.

While the former is a more accurate account of the status, we feel obligated to offer corrections and clarifications to the latter, and to share a different perspective on security research protection, consensus at W3C, W3C’s mission and the W3C Process, as well as the proposed Technology and Policy Interest Group. Background-clip - Rogner l’arrière-plan des boites HTML. (Astuce) Utiliser les transitions CSS avec height:auto - Créer un effet d’ouverture et de fermeture. Dans certains cas, comme la création d’un effet accordéon par exemple, il peut être utile d’appliquer une transition CSS sur la hauteur d’un élément, de height:0 (l’élement n’a pas de taille), jusqu’à height:auto (l’élément se dimensionne en fonction de son contenu). Si vous avez essayé de réaliser cela, vous avez remarqué que les navigateurs ne savent pas animer la propriété auto. Il faut alors recourir à du javascript pour palier à ce problème.

:last-of-type - Apprendre le CSS. Barre de progression avec l’élément HTML5 <progress> - Styler en CSS une barre de progression. Cet article n’est qu’une étude de cas puisque qu’à l’heure actuelle (septembre 2012), il n’existe aucune spécification W3C définissant la mise en forme des éléments <progress> ou <meter>. Cependant, certains navigateurs ont implémenté des pseudo-éléments/pseudo-classes permettant de mettre en forme ces éléments.

Nous allons dons les tester. Mais attention, ces techniques ne sont pas pérennes et sont à prendre à titre expérimental. Infobulle avec effet de transparence en CSS - Utilisez les transformations et les transitions CSS. Voici un exemple de réalisation de popup avec l’utilisation de CSS. Suivez le tutoriel pour recréer cet effet. Le balisage. Effet de brillance en CSS et SVG - Utiliser les masques, les pseudo-éléments et les dégradés CSS. Le HTML utilisé Pour cette démo, nous avons besoin du code HTML suivant : Ajout d’un pseudo-élément Pour créer le reflet, nous allons donc ajouter un pseudo-élément. Celui-ci va se superposer à notre élément, comme ceci : Sur ce pseudo-élément, nous ajoutons un dégradé radial : Galerie photo hover avec transition CSS - Utiliser les transitions pour créer une galerie photo. Utilisation des transitions CSS pour cet effet. Voici le code HTML ( chaque image est dans un "li" ) <ul><li><a href="#"><img src="firefox.jpg" alt="" /><strong>Firefox</strong></a></li><li><a href="#"><img src="opera.jpg" alt="" /><strong>Opéra</strong></a></li> ...

</ul> Les transformations 3D en CSS3. L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 !

Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Passionné du web, il est le créateur du site CSS3create, dédié à l’expérimentation et à l’apprentissage de CSS3 ainsi que de l’outil PrefixMyCSS, permettant l’ajout automatique des préfixes propriétaires CSS. Animation « effet bounce » en CSS - Créer un effet de rebond avec les animations. Note : MAJ importante le 13 septembre 2012. Voici une animation très simple à réaliser ! Préparation Pour cette démo, nous avons besoin de 3 images : Icone de préchargement en Full CSS - Créer une icone de style GIF animé en CSS seulement. Reflection en CSS sur une image - Créer un reflet avec element() et -webkit-box-reflect.

Le code de base HTML et CSS Le principe ici est de créer un reflet en n’utilisant qu’un seul élément HTML. Le code est donc très extrêmement simple, une image et un texte contenus dans un bloc <div>. Boutons Suivant Précédent - Créez des flèches en utilisant les bordures. Animations chargement et lecture audio - Créer un effet de préchargement avec CSS. Navigation slide CSS3 avec :target et transitions - Utilisation de :target pour créer une navigation design. Hiérarchiser ses titres avec CSS - Utiliser les compteurs CSS pour créer un chapitrage automatique. Les compteurs... Les compteurs peuvent s’avérer très utile en CSS, notamment dans le cas de cette démo : créer une hiérarchisation de titres au sein d’une page HTML. Je vous invite d’ailleurs à lire l’article sur les compteurs.

Comment fonctionne cet exemple ? Pour fonctionner, il faut tout d’abord initialiser les compteurs que l’on veut incrémenter. Pour cela, on utilise counter-reset sur l’élément parent : ici je crée 3 compteurs. Ensuite, pour chaque titre présent dans la page, le compteur associé est incrémenté de 1 (par défaut). Effet coverflow en full CSS - Utiliser les sélecteurs avancés, les transitions et les transformations CSS. Effet coverflow en full CSS - Utiliser les sélecteurs avancés, les transitions et les transformations CSS. Effet accordéon sur une image en CSS - Créer un effet de pliage avec les transformations CSS 3D. Navigation à onglets fluides avec les transitions CSS - Créer un menu avec display: table-cell. Effet « soft-focus » en CSS - Réaliser un flou artistique avec les filtres CSS. ZONE CSS - filter definition CSS V5.0.