PUBLIC MARKS from decembre with tags css & tool

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.

Customize Border Radius and Size. And Copy and paste in your css

If you just get started your a front-end developer career, it might be overwhelming to learn something every day. To optimize your time, it might be useful to know solid resources, to keep up with a demanding programmers’ environment. In this brief article, you will find 6 useful resources that in my opinion I think every beginning a front-end developer career should bookmark.

CSS Painting API - CSS Custom Properties C+ CSS Properties and Values API Better rounded rectangle by drawing a superellipse. Read blog post

An alternative or Update ? Rated 5 out of 5 stars by decembre on Feb. 21, 2018 · permalink When i write an Userstyle it is (was) the primary tool i use with Firebug. Now i search an alternative for this great tool: The devtool don't give us the possibility to search or test a specific CSS selector like Firepath do. And in an other hand the DevTool is less useful than Firebug (it don't give an easy way to identify in which userstyle a CSS rule is - with an human reading way)

Generators: A range of tools with easy-to-use interfaces for generating code

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.

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.

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

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

Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as "CSS custom properties"). If you aren't familiar with custom properties, I'd highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou's enlighting talk on using them. This grid overlay that we're building will consider a developer tool, as in, a tool just for us, not really our users. So, let's not worry too much about browser support (If you do care, check out caniuse… data on custom properties). While it's impossible to preprocess custom properties to behave exactly the same as native support, if you use them just like you would preprocessor variables, tools like the postCSS plugin cssnext can transform them into CSS compliant with older browsers.

Let's look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy!

you can use Firefox menu->Developer->BrowserToolbox to examine UI elements and play with CSS. After you open it, click OK in the main browser window, wait a few seconds for the toolbox to initiliaze, then use the first button in its toolbar to pick an element (bookmarks button in your case).

Use the form below to calculate the missing value for a particular aspect ratio. This is useful, for example, when resizing photos or video. Formula Say you have a photo that is 1600 x 1200 pixels, but your blog only has space for a photo 400 pixels wide. To find the new height of your photo—while preserving the aspect ratio—you would need to do the following calculation: (original height / original width) x new width = new height___ (1200 / 1600) x 400 = 300__By example 742 : 349 ___

Bounce.js is a tool and JS library that lets you create beautiful CSS3 powered animations.

« What’s my browser size ? » est une page internet qui indique quelles sont les dimensions (hauteur et largeur) de la fenêtre de votre navigateur. Particulièrement utile dans le cadre d’intégrations responsive, ce service constitue une bonne alternative aux extensions des différents navigateurs.

Online tool help to write text upside down, Upside down text generator to create flip text! Anything you write will become flipped upside down, very easy to use. Good for names, blogs, MySpace, etc.

allow you to find unused CSS for a given website? There is, and it's called [github.com] uncss, a NodeJS powered utility. Let's take a look at how uncss works!

CSSFontStack is a simple, one-page website which lists all the web-safe fonts.Today, many websites are using web-fonts with @font-face for a more customized design. However, web-safe fonts usage is still so wide as many others prefer to make sure all fonts will be displayed cross-browser/device, not to use web-fonts services and/or minimize the total size of websites.

When an CSS (Cascading Style Sheet) document is edited is very easy to mess the code making it unreadable. Especially if you use many nested STYLES it can become difficult to remember how the document is structured. CSS Beautifier will help you to solve many of these problems. This tool can process an CSS document and reformat it with a correct indentation and syntax highlighting. By applying CSS beautifies to your CSS code will improve the layout and indent style of the resulting CSS code. Beautification involves using white spaces like tabs and line-breaks to indent CSS code. Compaction removes unnecessary white spaces. This online tool will not fix your invalid invalid indentation, unpack CSS, De-Obfuscate CSS.

Responsive design bookmarklet : Viewport resizer is a browser-based tool to test any website’s responsiveness.

Utilité de -prefix-free ? -prefix-free est un petit fichier JavaScript qui ajoute à la volée le bon préfixe propriétaire selon le navigateur affichant la page. Plus besoin, donc, d'ajouter dans la feuille de style les différentes propriétés propriétaires ! -prefix-free adapte la propriété CSS3 au navigateur.

Play with Web Fonts: This is the easiest way to test or design with web fonts from WebINK. Just open FontDropper 1000 on any web page and start dropping fonts. See your changes instantly. Adjust font size, color, spacing and more

Favelets: these just dynamically write a link element into the head of the document. The link points to a style sheet. This allows for "diagnosis" favelets that are easy to update or change (you just edit the style sheet). Favelet Creator Input the URL of the style sheet you want to use in your favelet, and the name of the favelet as you want it to appear in your toolbar. The "Favelet" link should automatically update to use those values; you then simply drag it into your favorites toolbar.