PUBLIC MARKS from decembre with tag css

Web developer guides. These articles provide how-to information to help you make use of specific technologies and APIs.

How to Apply a CSS Class to an Inserted Image3. Add 'class="myimage"' within the img tag; it doesn't need to be in a specific location, such as before "title" or "alt," to function. For instance, if your code is (img src="myhouse.jpg" alt="Photo of my house")," it should become: (img src="myhouse.jpg" alt="Photo of my house" class="myimage")

a neat trick one can do with CSS variables, precisely due to their dynamic nature. Let’s say you want to use a property that has multiple versions: an unprefixed one and one or more prefixed ones. In this example we are going to use clip-path, which currently needs both an unprefixed version and a -webkit- prefixed one, however the technique works for any property and any number of prefixes or different property names, as long as the value is the same across all variations of the property name. The first part is to define a --clip-path property on every element with a value of initial. This prevents the property from being inherited every time it’s used, and since the * has zero specificity, any declaration that uses --clip-path can override it. Then you define all variations of the property name with var(--clip-path) as their value: * { --clip-path: initial; -webkit-clip-path: var(--clip-path); clip-path: var(--clip-path); }

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that are already loaded on a user's computer, which vary depending on the system being used. Here's a nice breakdown of existing system fonts.

If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts. Let's compare.

How to make a custom theme with stylus for userstyles (Basics)

Par contre, bien moins connus sont les postprocesseurs : ceux-là interviennent à partir d'une feuille CSS standard pour la rendre lisible ou compatible universellement. L'exemple de postprocesseur le plus célèbre étant Autoprefixer : donnez-lui des CSS non préfixés et il se débrouille pour ajouter les préfixes nécessaires manquants.

In AlsaCreation : CODE EXAMPLE -" Progress bar horizonta"l qui varie suivant le scroll body { -moz-box-direction: normal; -moz-box-orient: vertical; background: #f3f3f3 none repeat scroll 0 0; color: #000; display: flex; flex-direction: column; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size: 1.6rem; min-height: 100vh; }

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive. Voici le code utilisé : .ratio { background: url("monimage.jpg") no-repeat; background-size: cover; width: 100vw; height: 56.25vw; } Concrètement ce que l'on fait : on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width) on lui donne la hauteur à laquelle on a appliqué un ratio 16:9 calculé en faisant 100 * 9 / 16 de la largeur du navigateur

rassemble les informations techniques nécessaires à un usage de Flexbox au quotidien. Ce memento est composé des sections suivantes : propriétés Flexbox applicables sur le parent (avec valeurs par défaut) propriétés applicables sur les enfants support des navigateurs (et version de spécification supportée) liste des bugs navigateurs et contournements les plus courants ordre de priorité des propriétés (voir cette présentation PDF) quelques modèles classiques : objet "media", centrage multiple, grille mono-ligne avec et sans gouttières les propriétés CSS qui ne s'appliquent pas sur les parents et les enfants flexbox liens vers des ressources incontournables

Modernizr est voué à la détection des fonctionnalités navigateurs via JavaScript. Il permet de prévoir des alternatives (basées sur d'autres bibliothèques) pour les moteurs ne supportant pas l'une ou l'autre des propriétés CSS, HTML, etc.

Stylish Add-on with various tweaks to accommodate Stylish Custom² and Stylish Editor² add-ons.

Tympanus DEMO

it helps to keep CSS code shorter and smarter. Before diving into practical usage examples, here is a short theory course. This is how MDN describes currentColor: The currentColor keyword represents the calculated value of the element’s color property. It allows to make the color properties inherited by properties or child's element properties that do not inherit it by default.

If you were attentive you should see that the line width: calc( 12.5em ) is the trick here. Why? Let’s see all these widths like in pairs – exactly what we need browsers to do. The first pair is width: 80% (content) and width: 16.666% (sidebar) that does the job in calc() incompatible browsers, which will just ignore calc(). It is the callback (backup). It means that the minority of website visitors will see narrower sidebar on narrower viewports. And that should be perfectly fine for people using older browser versions. The second: width: calc( 100% - 15em ) and width: calc( 12.5em ). This is for newer browser versions which will override the previous width definitions

Icon pack in Illustrator (.ai) format.

A pretty complex tool to help you find your color scheme.

KIS (Keep It Simple) A simple succession of headings and divs should lead users to assume - rightly - that those headings are followed by their respective section (by the content they "introduce"). This alone is enough for screen-reader users to make sense of the markup—after all, when it comes to content, this is the most common markup pattern on the Web.

The recipe for the best user experience: Start with POSH, a simple set of heading/div pairs Add ARIA (role, aria-selected, aria-hidden, aria-labelledby) and tabindex attributes using JavaScript as these would be confusing if there was no behavior attached to the widgets. Use JavaScript to also plug a class on the component according to its type (accordion or tabpanel). Style the widget using the selector inserted by the script, this way containers are not hidden if there is no script support. Use cursor to style the tabs because those behave like buttons (default), not links (pointer). In case the component is displayed as a Tab Panel, style it as an Accordion before its tabs start wrapping (to accomodate user’s font-size) or at narrow widths...... ../..

SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results. Here the 20 tools that you can use to work with SVG quickly and efficiently. We have mostly online tools, that can help in optimization, conversion, making patterns, and more.

You can perform a wide variety of designs, art as the icon of DRAW-SVG, mapping, technical, presentation slides, etc. ..

SVG at a data URI for background images.... just because you can, doesn't mean you should.

Iconic Font is a free set of 263+ finest icons in one font for your next project. @font-face: .im { display: inline-block; font: 24px/1 "iconmonstr-iconic-font"; text-rendering: auto; }

You should have a look at http://iconmonstr.com Iconmonstr.com has a growing collection of SVG icons which you can download and use for free