Code generators for front-end development.

Fontello is a tool to quickly pack vector images into webfonts. Consider it like Twitter Bootstrap, but for images. It builds everything necessary to include graphics into your web pages. Also, fontello has a big built-in collection of open source artworks.

Build iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript

Tips : Du Web au Mobile avec Capacitor 🇫🇷

How it works

We evaluate your color combination using the WCAG 2.0 guidelines for contrast accessibility.
If your combination does not meet the guidelines, we find the closest accessible combination by modifying the color lightness.
We modify the lightness value only, in order to stay as true to the original color as possible.

• Future of CSS: Color Scheme
• Future of CSS: Scrollbars
• CSS Container Queries
• Future of CSS: color-mix function 🎨
• Future of CSS: Popover API

In this article, we will look at some of the hottest CSS tools available to developers today, including frameworks, libraries, and utilities, to help you stay ahead of the curve and take your CSS skills to the next level.

TL;DR:
Neumorphism.io
Animista
Wweb.dev
Spin Kit
Flexplorer
CSS Grid Generator
CSS Layout Generator
Shadows Brumm
Glassmorphism
Cubic-Bezier
Haikei

Extrated with:

  const linksElements = Array.from(document.querySelectorAll("#article-body > h2 + p + p > a")).map(el => `[${el.textContent}](http://${el.href})`).join('\n');
  alert(linksElements);

CSS Hamburger Menus are very important for responsive web design. Take inspiration from our Hamburger Menu codepens examples

Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019.

Yqnnsvg-path-editor Online editor to create and manipulate SVG paths

Online editor to create and manipulate SVG paths

CSS lets you control how text selection behaves and appears on your pages. This can help you improve usability in certain situations and add a little bit of visual flair. Let’s dive in!

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.

• Property Generators
• Animations
• Backgrounds
• Color Tools
• Typography
• Loaders
• Layouts
• Informative

Développeur Web mais surtout Intégrateur Web.
Je partage ce que j'apprends et j'aide les développeurs à devenir meilleur en HTML & CSS.

So you've got your nice page and you're adding your background image and…

.hero {
  /* 🚩 */
  background-image: url('/image.png');
}

WAIT!

Did you know that this is going to be very unoptimized for performance? In more ways than one.

You probably use prefers-color-scheme a lot within your CSS media queries, to make a dark or light theme for your sites and apps based on user preference. Maybe you also add a toggle so people can choose their color scheme, irrespective of their OS settings. Beautiful. But now there's more to play with!

Iconify makes it easy to avoid vendor lock-in. You can use many open source icon sets with a large choice of open source icon components. Thousands of high quality icons from 100+ icon sets, all validated, cleaned up, optimised and always up to date.

Material Design, Phosphor, Remix, Carbon, Bootstrap, Tabler, Feather, Fluent, IconPark, Octicons and many other icon sets. Twitter Emoji, Fluent Emoji, EmojiOne, Noto Emoji are also available as icon sets.
#Shaarli💫 #css #dev #icon #javascript #opensource #tool #web

SRI is a new W3C specification that allows web developers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source.

Learn more about how to use subresource integrity on MDN.

Every element I use for the basic structure of a HTML document, with explanations why.

Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate. Recently I didn’t start a new project, but I had to document the structure we use at work for the sites we build. So, simply copying and pasting wasn’t an option, I had to understand the choices that have been made.

A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing.

Find any alphanumeric snippet, signature or keyword in the web pages HTML, JS and CSS code.

CSS snippets to consider when you want to provide a printable version of your blog