How to Build a Semi-Circle Donut Chart With CSS. Although HTML5 Canvas and SVG might be more elegant solutions for building charts, in this tutorial we’ll learn how to build our very own donut chart with nothing but plain CSS. To get an idea of what we’ll be creating, have a look at the embedded CodePen demo below: We start with some very basic markup; a plain unordered list with a span element inside each of the list items: With the markup ready, first we apply some basic styles to the unordered list: Then, we’re going to give each one an ::after and a ::before pseudo-element, and style them: Pay attention to the styles for the ::before pseudo-element.
So far, the aforementioned rules give us this result: Let’s now discuss the styling of the list items. With regards to the list items’ position, we do the following: Position them right underneath their parent andgive them appropriate styles so as to create a reverse half circle. Furthermore, a couple of things are worth noting here: Here are the associated CSS styles: Here’s the final chart: 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. Manipulating CSS Matrixes. Comment éviter la propagation des événements. Comment contrôler la propagation des évenements avec la fonction stopPropagation() et return false Objectif Lorsque vous déclarez un évènement celui ci est propagé à l’ensemble des éléments correspondants aux critères de sélection ; ainsi si on déclare un évènements click sur $("#id") seule la balise ayant l’identifiant "id" sera concernée. Tandis que si on déclare $("li"), toutes les balises de type <li> seront affectées par l’évènement. Si les balises sont imbriquées comme ceci ul > li > ul > li (cas typique d’un menu arborescent), le script va s’exécuter sur tous les éléments de type <li> imbriqués, c’est ce qu’on nomme la propagation d’évènement.
Dans certains cas cette propagation peut se révéler gênante. Comprendre de quoi on parle Voici un exemple pour mieux appréhender ce comportement de propagation. jquery $(document).ready(function () { var noeud = ; $("li").click(function () { alert($(this).html()); }); }); Si on clique sur Niveau 1 : item 1, on obtient logiquement ceci : Puis ceci :
Plongée au coeur de l'OOCSS | @nicoespeon. OOCSS - qu'est-ce-que c'est, pourquoi c'est bien et comment ça marche. "C'est comme j'te dis tu fais du CSS et tu te base sur le contexte ! Non mais all'OOCSS ! J'sais pas vous m'recevez ? " - Margina Remattia, OOCSS Evangelist Considérons un projet web qui débute : une start-up lambda qui se rêve de développer LA web-application incontournable du web de demain. Seulement voilà, si l'ensemble de l'application bénéficiera sûrement des avantages de quelques frameworks, jeter un coup d'oeil du côté de la feuille de style donnera probablement quelque chose dans ce goût là (avec ou sans pré-processeur) : Or ce code va poser un certain nombre de problèmes avec le temps :- **Manque de flexibilité**, il ne peut s'appliquer qu'aux éléments contenus dans le formulaire portant l'identifiant `#generateur-formulaire`.
L'**Object Oriented CSS (OOCSS)** vient apporter sa solution à tous ces problèmes. L'OOCSS repose sur 2 grands principes : 1. 2. C'est encore plus vrai pour les modules. <! <! <! <! <! Plop ! OOCSS expliqué avec Monsieur Patate | CSS. L’Object-Oriented CSS ou OOCSS (CSSOO en français pour « CSS Orienté Objet »), est un concept présenté par la canadienne Nicole Sullivan, consultante front-end spécialisée dans les standards du web, l’architecture et la performance des sites à fort trafic. Introduit il y a pourtant plusieurs années, l’engouement suscité par le projet s’est révélé assez peu représentatif de ses ambitions (notamment au sein de la communauté francophone). Une approche via framework, indigeste pour les intégrateurs débutants, un concept « orienté objet » emprunté à la programmation, déroutant pour les développeurs.
Mais également une méthodologie jugée inutile pour les petits projets et complexe à implémenter dans le process de production web. Voilà à mon avis ce qui a permis aux sceptiques de dénigrer l’OOCSS. Nous verrons plus tard si ces arguments sont fondés ou non. Explication du concept Entrons sans plus attendre dans le vif du sujet. Caractéristiques Contrairement au premier cas pratique avec Mme et M. Google HTML/CSS Style Guide. Strictly keep structure (markup), presentation (styling), and behavior (scripting) apart, and try to keep the interaction between the three to an absolute minimum. That is, make sure documents and templates contain only HTML and HTML that is solely serving structural purposes.
Move everything presentational into style sheets, and everything behavioral into scripts. In addition, keep the contact area as small as possible by linking as few style sheets and scripts as possible from documents and templates. Separating structure from presentation from behavior is important for maintenance reasons. It is always more expensive to change HTML documents and templates than it is to update style sheets and scripts. <! <! Charte CSS. Convention de nommage CSS. Les bonnes pratiques CSS pour optimiser votre code. Les bonnes pratiques CSS pour optimiser votre code 3 janvier , 2010 Posté par Nicolo dans la catégorie: Css Quand on ouvre un fichier CSS que l’on a fait depuis quelques temps et pas mal modifié depuis, on se rend vite compte que dedans c’est le bordel !!
Cet article va donc vous permettre de mettre un peu tout ça au clair, d’ordonner un peu le contenu de votre fichier, et d’optimiser un peu son contenu. Voici donc X conseils pour réduire la taille de votre fichier CSS, et ordonner son contenu : 1) Rester organisé : Il est nécessaire de ne pas créer ses éléments CSS au fils de l’eau et de placer ses éléments CSS sur les id et les classes comme ils viennent. Cela vous permettra de garder à l’oeil dans votre CSS l’héritage des éléments en cascade d’un coup d’oeil sans avoir à se demander à chaque de quoi l’élément qu’on est train de modifier hérite. Ce qui donne en gros : Il est même ppossible d’aller plus loin dans le « GLOBAL RESET CSS » : 3) Garder une sauvegarde de vos modèles : Guide CSS • Conseils et bonnes pratiques.