PUBLIC MARKS from decembre with tag css

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!

Click the button below to toggle the pure CSS slider! : /* slider in open state */ .slider { overflow-y: hidden; max-height: 500px; /* approximate max height */ transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } /* close it with the "closed" class */ .slider.closed { max-height: 0; } A clever use of max-height allows the element to grow and shrink as needed.

@supports Usage : In most cases, the best usage of @supports is setting an older set of styles as backup and then canceling those styles out and enhancing if a given property is supported. One brilliant use case for @supports is layout. Some edge browsers are now providing support for flexbox while others lag behind.

This is a frequent case: a parent with children we desire to be vertically centered. Enter CSS3 Transforms : One interesting thing about CSS transforms is that, when applying them with percentage values, they base that value on the dimensions of the element which they are being implemented on, as opposed to properties like top, right, bottom, left, margin, and padding, which only use the parent's dimensions (or in case of absolute positioning, which uses its closest relative parent). Knowing this, we could apply the same "calculate on load" method's small equation, but now adapting it to just CSS. First, we move the element in question down to the middle of it's parent using top: 50%, then we pull it back up by half of said element, with transform: translateY(-50%). Of course, the element must be relative, absolute, or fixed. If we look back to Figure 1, this is exactly what we have achieved.

Helps you understand how the nth-child, nth-last-child, nth-of-type and nth-last-of-type CSS3 selectors work.

Hide "add as an application for mailto links" notifications : notification[value="Protocol Registration: mailto"] { display: none !important; }

/* For image replacement */ .ir { border:0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

TEST case

Fonts with support for much of the unicode standard.

This "base styles sheet". It sets default styling for many elements, follows a couple of recommendations regarding usability/accessibility, and addresses a few "common issues" as well. What does it do that a reset doesn't? It fixes a few things: 1- It forces a gutter for a vertical scrollbar (when content is too short to require a scrollbar) 2- It includes an IE button width fix 3 -It removes "sticky" outline (not in Internet Explorer though) 4- It prevents "mysterious gaps below images" It prevents descenders letters in legend from being cut-off in Internet Explorer 5- It vertically aligns checkboxes and radio buttons with their label 6- It sets a default color background for the document with no shrink wrap effect on body1 7- It styles lists by default

Emmet is a collection of abbreviations that expand into html/xml/css, taking the idea of text snippets further. Visit the download page and install Emmet for your editor of choice. When working with Emmet, type in the appropriate abbreviation and hit the action key. In Sublime Text this is the TAB key. The syntax of the file you are working on will determine which abbreviations to use

What is this all about? The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.

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.

To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. We don't need anything fancy, we can simply drag the bottom right corner of our favorite desktop browser to enter... "Device Agnostic Mode".

Vieux tuto: Mais utile.Découvrir Firefox si vous ne le connaissez pas (partie 1) et/ou de vous montrer comment modifier Firefox comme vous le voulez.

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.

Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows,

Google , que vous pouvez ou ne pouvez pas savoir , tourne trois modèles de page de cette écriture . Les deux premiers héritent beaucoup de code de l'autre , mais encore besoin de règles CSS séparées pour cibler la barre de navigation et d'autres éléments de la page , la dernière (troisième) conception exige un ciblage tout à fait différent .

A style I made for fun, to round the first tab top left corner, and new tab top right corner. A good demonstration of using child tokens

If you have VLC installed on the local machine, great! Use that to your avantage as you reconfigure the style. You'll still need to change the address so you can actually use this style with a remote machine, and you'll have to add other addresses if you are accessing more than one machine at any given time. Simply go to the web interface, copy the address and paste it in where it says "http://ip:port" or add the values in manually. If you don't know how to enable the web interface in VLC for remote control, you'll need to learn that first before this style has any relevance to you. Everything can be found online.

(Better) Tabs with Round Out Borders We'll show how you can use the CSS :before and :after pseudo elements to create a rounded bottom border edge for each tab without using images.

► Video Problems.... ► Full screen capability is disabled when an adblocker is detected. ► Just drop the "DIV". ► A script creates a random Style." ... style=" and inputs itself into the html of the page ... ► CSS SOLUTION : videofun.me##[style="position: absolute; width: 100%; min-height: 90px; left: 0%; bottom: 40px; background-color: rgb(0, 0, 0); padding: 0px; z-index: 999;"]

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 or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations.

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