14 bibliothèques et outils CSS gratuits à utiliser sans hésiter De nombreuses ressources CSS open source sont disponibles sur le web pour vous aider à gagner du temps et à parfaire vos connaissances sur des spécificités du langage que vous ne maîtrisez peut-être pas encore. J’ai sélectionné dans cet article 14 bibliothèques et outils CSS gratuits qui viendront vous prêter main forte et vous faire gagner du temps lors de vos prochains projets web : outils, filtres photos, dégradés, couleurs, icônes, info-bulles, … 1. Hamburgers Hamburgers est une collection d’icônes hamburgers animés 2. Balloon.css est une collection d’info-bulles, 100% CSS. 3. StarWarsIntro vous permet de recréer une intro façon Star Wars, en CSS. 4. Spinners est une collection d’icônes de chargement animés en HTML et CSS. 5. Des icônes de chargement inline 100% CSS. 6. CSS Loader is une collection d’icônes de chargement utilisant uniquement une DIV et entièrement en CSS. 7. Une collection d’animations d’image au survol de la souris. 8. Une collection de 49 dégradés CSS. 9. 10. 11. WAIT! 12.
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. This document describes the selectors that already exist in CSS1 [CSS1] and CSS2 [CSS21], and further introduces new selectors for CSS3 and other languages that may need them. Selectors define the following function: expression ∗ element → boolean That is, given an element and a selector, this specification defines whether that element matches the selector. Status of this document This section describes the status of this document at the time of its publication. Table of Contents 1. 1.1. 1.2. 1.3. 2. 3. .
Comparing PIE to Other CSS3 Products – CSS3 PIE: CSS3 decorations for IE PIE is not the first product by far to provide some level of CSS3 support in IE. It can be difficult to tell what the differences are between all the products out there, so I'm going to attempt to cover several of the major ones here, and clarify their similarities and differences with PIE. An aside: some of these comparisons are based on fairly cursory evaluations of the projects. As a result there may be some inaccuracies. I welcome any corrections, as I want to give each product a fair description. Dean Edwards's IE7.js (and IE8.js, IE9.js) This is the granddaddy of all IE shims, and probably the first major attempt at implementing CSS3 features in IE. It is implemented as a series of drop-in .js scripts, the main focus of which is working around IE layout bugs and implementing advanced selectors. Conversely, PIE doesn't attempt to implement any CSS3 selectors. The big downside with IE7.js as I understand it is performance. Keith Clark's Selectivizr Aaron Gustafson's eCSStender
reSmush.it > the 2 Billion (and still free) Image optimization API html - How to style checkbox using CSS? CSS: Responsive Navigation Menu Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. View Demo Responsive Menu The Purpose The purpose of this tutorial is to show you how turn a regular list menu into a dropdown menu on smaller display. This trick is more useful on navigation with a lot of links like the screenshot below. Nav HTML Markup Here is the markup for the navigation. <nav class="nav"><ul><li class="current"><a href="#">Portfolio</a></li><li><a href="#">Illustration</a></li><li><a href="#">Web Design</a></li><li><a href="#">Print Media</a></li><li><a href="#">Graphic Design</a></li></ul></nav> The CSS for the navigation (desktop view) is pretty straight forward, so I'm not going to get into the details. Center and Right Alignment Internet Explorer Support Responsive
GitHub - mrclay/minify: Combines. minifies, and serves CSS or Javascript files Beginner Concepts: How CSS Selectors Work Share this: monday.com helps you manage your projects. Are you new to CSS? This article is for you! Perhaps the biggest key to understanding CSS is understanding selectors. In the examples below, the CSS would be in a file called something like style.css that is referenced from an HTML document called something like index.html. Here's what that HTML file would be like: <! And the CSS file would contain just the selector blocks like you'll see below. #ID selector #happy-cake { } <! #Leveling Up ID selectors are the most powerful type of selector in terms of CSS specificity. #Class Selector .module { } <! #Leveling Up Class selectors are your friend. #Tag Selector h2 { } <! #Leveling Up Tag selectors are at their most useful when changing properties that are unique to that HTML element. Don't rely on them too much though. #Attribute Selector [data-modal="open"] { } <! #Leveling Up Hardly an issue anymore, but attribute selectors aren't supported in IE 6. #Positional Selectors :nth-child(2) { } #Leveling Up
Css2Less Grid Designer 2 If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory. If you're unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton. For those who want a real understanding of the theory of grids in relation to design and typography, I strongly recommend this book. On the Columns tab, you can start your design in two ways: Fill in the number of columns, total width, gutters and margin widths, all specified in pixels - then press the design button. The grid preview on the Columns tab will display the widths of each area, in pixels. Use the Typography tab to adjust and calculate basic typographic settings for your design. Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.
CSS3 : les sélecteurs – Laravel J’inaugure la catégorie CSS3 en commençant par un article sur les sélecteurs. Pourquoi les sélecteurs ? Parce qu’ils constituent le coeur du CSS. Si on ne les avait pas pour cibler des éléments des pages HTML on serait bien en peine pour appliquer des règles de style ou pour agir avec Javascript. C’est un domaine qui a connu une lente évolution. Les sélecteurs du CSS3 sont maintenant pris en charge par la majorité des navigateurs modernes, même IE9 ! Plutôt que de rédiger un article long et laborieux j’ai préféré faire court tout en proposant en complément une page d’illustration dynamique. Quant à la spécification officielle elle est ici. Les sélecteurs relationnels ciblent les éléments en fonction de leurs relation avec les autres éléments. En dehors des pseudo-classes classiques (:hover, :focus, :visited, :link…) on en a quelques autres intéressants : Avec les pseudo-classes structurelles on peut trouver les éléments selon leur localisation : Les pseudo-éléments sont un peu particulier.
LESS « The Dynamic Stylesheet language Pleeease · Process CSS with ease