PUBLIC MARKS from decembre with tags online & css

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

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.

Centering in CSS is a pain in the ass. There seems to be a gazillion ways to do it, depending on a variety of factors. This consolidates them and gives you the code you need for each situation. Select the type of content you want to center in a parent div and the size of the parent.

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 ___

It's your playground tool for HTML, CSS , Javascript

« 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.

What to do with these boxes? The six colored boxes (A, a, B, b, C, c) are "draggable", which means you can use your mouse to position them anywhere in the page. The input elements in the colored fieldsets let you set z-index and position values for each one of these six boxes. These fieldsets are color coded, which means a fieldset's background color matches the background color of the box it is supposed to style. Use Firebug to monitor in real time how these elements get styled.

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.

Des générateurs de sprites CSS pour accélérer le chargement des images

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

Type a CSS property name into the box above. The page will automatically update as you type. Add a space after the full property name to avoid multiple results for certain keywords. The first value listed is the initial/default value for that property.

nstead of loading dozens of images, it is way better to load one big image and use the technique called CSS sprites. Glue is a simple command line tool to transform a set of images into a single file so you can easily use CSS sprites on your website. Super useful.

It’s very hard to keep your CSS files clean and compact when coding for a big project. Don’t worry though, CSS Trashman is here to help. This useful online tool examines your site, compacts styles and finally let you download a super clean version of your site CSS file so you can safely delete them.

data: URI Generator The data: URI scheme allows you to build URLs that embed small data objects. data: URIs are supported by most modern browsers except for Internet Explorer. The lack of IE support is holding back widespread adoption of data: URIs, but they are still very useful in a couple of specific areas such as embedding graphics and other data items in Greasemonkey scripts. You can read more about data: URIs and see some examples of their use, or use the generator below to create your own. data: URIs are defined in RFC 2397.

ImageData Une icône 16×16 encodée en Base64 représentant le moteur de recherche. The data: URI kitchen (en) est un outil très pratique pour générer les données à placer ici