BonBon - Sweet CSS3 Buttons There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible. And voila.. here they are, the BonBon Buttons. Named after the French word for "Candy". So, let's take a tour trough the candy store. No, wait! Markup I get a real kick out of trying to keep the markup minimal, so I'm really happy with the outcome. You can change the look by adding more classes: <a href="" class="button orange glossy">Label</a> Label Icons Accessibility Addingrole="button" makes it more accessible. Looks I tried to avoid any images but couldn't resist adding a PNG for the noise. A border-radius doesn't always need to be rounded. For the colors HSL values are used. I tried to simulate different materials. The glossy shape is created using an :after element with a gradient background on top. Flexibility Here all the optional class names if you wanna play around with -webkits Inspector or Firebug: Queen Rain There is one thing I'm kinda sad about. Note
Générateurs boutons css3 Générateur de Boutons CSS3 - creer boutons css3 bordure rayon ombre html5 generer code creer bouton input... Boutons 1 onglets Générateur Générateur de onglets vous permet de créer des boutons de l'onglet style en ligne sans utiliser de logiciel de retouche d'image. 2. Bouton Brillant Maker est une interface web pour créer 80 × 15 boutons. 3. Favicon est un outil qui vous permet de créer des favicons soit en peignant pixels manuellement ou importation d'une image. CSS3 boutons 1. Avec Button Generator CSS3 vous pouvez créer des boutons web modernes et élégants qui répond aux standards du Web d'aujourd'hui. 2. CSS3 Button Maker vous permet de créer facilement des boutons de CSS3 avec dégradés et des ombres. 3. Générer boutons de CSS3 fantaisie avec seulement quelques clics. 4. Button Generator CSS créera beaux boutons CSS pour vous d'utiliser sur vos pages web sans la nécessité pour toutes les images. 5. 6. 7. Outil facile à générer des boutons CSS3 avec dégradés et des ombres.
Combine Webpack with Gulp 4 By Pascal Klau On build tool, gulp, webpack Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp, and there are some pretty good reasons for that. Still, the amount of JavaScript in our static projects is growing, so to compensate, let's make use of Webpack, while remaining in Gulp. #You May Want To Start Here This article isn't quite for beginners. #Gulp Tutorials #Webpack Tutorials #Demo Check the demo repo on GitHub. #Prerequisites Run the following to install necessary packages: npm install babel-core \ babel-preset-es2015 \ browser-sync \ gulpjs/gulp#4.0 \ webpack \ webpack-dev-middleware \ webpack-hot-middleware -D If you don't need HMR, feel free to leave Hot Middleware out of the packages listed above. #Starting Points Let's get started! #Set up a basic Webpack config
PX to EM Conversion Flexbox Defense element - Référence Web API L'interface Element inclut les propriétés suivantes, définies sur le mixin ARIAMixin. Element.ariaAtomic (en-US) Une chaîne de caractères DOMString qui reflète l'attribut aria-atomic qui indique si des technologies d'assistance présenteront tout ou partie de la région modifiée selon les notifications définies par l'attribut aria-relevant. Element.ariaAutoComplete (en-US) Une chaîne de caractères DOMString qui reflète l'attribut aria-autocomplete qui indique si la saisie de texte peut déclencher l'affichage d'une ou plusieurs prédictions pour la valeur saisie par l'utilisateur à destination d'une liste de choix, d'une boîte de recherche ou d'une zone de texte. Element.ariaBusy (en-US) Une chaîne de caractères DOMString qui reflète l'attribut aria-busy qui indique d'un élément est en train d'être modifié. Element.ariaChecked (en-US) Element.ariaColCount (en-US) Element.ariaColIndex (en-US) Element.ariaColIndexText (en-US) Element.ariaColSpan (en-US) Element.ariaCurrent (en-US)
Slideshow en CSS3 Agir sur un élément enfant d'un élément ciblé Dans la logique des sélecteurs CSS, il est possible d'agir sur les styles d'un élément enfant de l'élément ciblé. Nous allons naturellement utiliser la pseudo-classe :target tout en reprenant l'exemple précédent de la FAQ. <a href="#faire-lien">Comment faire un lien</a><div id="faire-lien" class="blocReponse"><p class="question">Comment faire un lien ? En ciblant notre bloc réponse on peut très bien imaginer styler la réponse en plus du bloc complet : Voir l'exemple Nous allons simplement utiliser cette base pour notre slideshow. Déplacer une division imbriquée dans une autre Il va s'agir de faire bouger une liste contenant nos éléments à visualiser dans une division conteneur aux dimensions restreintes et au débordement caché. <div id="slideshow"><ul id="sContent"><li><img src="images/bleu.png" alt="Image bleue" /></li><li><img src="images/vert.png" alt="Image verte" /></li></ul></div><a href="#sContent">Prev</a> - <a href="#slideshow">Next</a>
Flexbox, guide complet Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici. Par Chris Coyier NdT : Ce tutoriel est la réunion de quatre articles de Chris Coyier formant une introduction à Flexbox. Vous pouvez ensuite consulter tous les articles sur Flexbox traduits dans la Cascade notamment les exemples concrets d'implémentation et les astuces techniques. Le module CSS3 Flexbox Layout fournit une façon efficace de disposer, aligner et distribuer l'espace entre les items d'un container, même lorsque leurs dimensions sont inconnues et/ou dynamiques - d'où le terme "flex". L'idée principale est de donner à un élément contenant (container) la possibilité de changer les largeur et hauteur des éléments contenus (items), afin de remplir au mieux l'espace disponible, et de s'adapter à tous les terminaux et toutes les tailles d'écrans. Les bases Propriétés display: flex|inline-flex; flex-wrap
Le guide ultime pour accélérer son développement frontend Il existe deux types de développeurs : ceux qui développent vite (et bien) et les autres. En tant que développeur frontend vous vous êtes sûrement déjà rendu compte que certaines parties de votre travail/passion était redondantes et qu'il était souvent possible d'aller plus vite. Bref, je vais vous apprendre à passer au niveau supérieur de productivité à travers une (longue) liste de conseils et d'astuces glanées sur le web. Sommaire 1. Introduction Avant toute chose je tiens à vous faire remarquer que ce guide est le fruit de ma réflexion et de mon expérience du développement frontend. Cet article provient à l'origine d'un post sur Quora que j'ai écrit pour répondre à la question "Quelles sont les meilleurs astuces pour gagner du temps lors d'un développement front ?". 2. Pendant longtemps sur mes projets personnels j'ai pris l'habitude de toujours débuter en négligeant la phase de conception. Astuce n°1 : Ne jamais mettre la charrue avant les boeufs Définir les grandes lignes 3. Jekyll 4.
CSS 3D Clouds An experiment on creating volumetric 3d-like clouds with CSS3 3D Transforms and a bit of Javascript. Check out the tutorial here! Move the mouse to rotate around and mouse wheel to zoom in and out. Texture list Select one or more textures to create clouds. white clouddark cloudsmoke cloudexplosionexplosion 2box Presets Credits Coded by Jaume Sánchez (@thespite) Inspired on Mr.doob's WebGL clouds and Mark J. Fonts Open Sans and Lato are from Google Web Fonts.
Les filtres CSS opacity et drop-shadow - Vincent De Oliveira Dans la longue liste des nouveautés CSS, il y a les filtres graphiques. Grâce à eux, il est d'ores et déjà possible de créer des flous, de modifier la luminosité ou le contraste, de convertir en niveaux de gris ou en négatif... Bref, la majeure partie des effets réalisés depuis un éditeur graphique. Pour découvrir ce que sont les filtres, vous pouvez: À la lecture de ces ressources, deux filtres attirent l'attention: filter: opacityfilter: drop-shadow Et la question suivante se pose: Quelle différence existe t'il entre ces filtres et les propriétés opacity et box-shadow? filter: drop-shadow vs. box-shadow Un article sur bricss.net l'a très bien expliqué et un autre article plus complet existe également. Malheureusement, drop-shadow n'accepte pas d'ombre interne ni de valeur d'étendue d'ombre, comme c'est le cas avec box-shadow. filter: opacity vs. opacity La différence entre ces deux options est plus floue mais peut apparaître lors de l'utilisation simultanée de plusieurs filtres.