public marks

PUBLIC MARKS from decembre with tags tutorial & demo

2017

CSS - RESPONSIVE - CALC - Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout — Osvaldas Valutis (2013)

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

CSS - TAB - Tab Panel, the right way...

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

2015

CSS - Le contexte de formatage block en CSS - Trés Clair - Alsacreations

Des sortes de “super éléments” ?__Les éléments générant un contexte de formatage block deviennent des sortes de “super éléments” ayant un certain nombre de super responsabilités : ils deviennent entre-autre garants de l’affichage de leurs enfants (qu’ils soient blocks ou inline). Ces super éléments acquièrent également des super pouvoirs très pratiques, et c'est là que ça devient intéressant : __Ils contiennent des flottants __Ils ne s’écoulent pas autour des flottants __Ils ne subissent pas la fusion de marges __Et plein d’autres petites fioritures

JAVASCRIPT - DEMO - Maximum Characters for Text and Textarea Form Fields

Enforcing a maximum character length for text and textarea form fields is fairly easy to do.

JQuery - Native equivalents of jQuery functions

by 1 other (via)
I think there are many developers who don’t realize that most of the jQuery methods they use have native equivalents that require the same or only a slighter larger amount of code to use. Below are a series of code samples showing some popular jQuery functions along with their native counterparts.

2014

CSS - Online Demo Interactive - CSS 101: z-index PlayGround

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.

2013

hover effects on circles with CSS Transitions

by 2 others
Tutorial : How to create different interesting hover effects on circles with CSS transitions and 3D rotations.Border radius property, we can create circular shapes. Seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!

CSS - Les multicolonnes en CSS3 - Alsacreations(mai 2013)

Le module de positionnement multicolonnes (ou Multi-column Layout Module en anglais) permet, comme son nom l'indique, de faire s'écouler du contenu sur plusieurs colonnes de largeurs égales, tel qu'on peut le voir dans le monde de l'imprimerie. E

decembre's TAGS related to tag tutorial

aide +   application +   art +   article +   astuce +   best +   bib +   bibliotheque +   bibliotheque2.0 +   blog +   chercher +   code +   comment +   configuration +   configurer +   css +   delicious +   demo +   design +   dev +   disk +   disque +   documentation +   editer +   emule +   extension +   film +   firefox +   flickr +   FlickrSurf+ +   free +   Free:FreeBox +   Free:FreePhonie +   freeware +   ftp +   google +   greasemonkey +   groupe +   guide +   hack +   howto +   html +   idea +   idee +   illustration +   image +   information +   installer +   java +   javascript +   library2.0 +   lifehacker +   liste +   logiciel +   mobile +   mp3 +   music +   musique +   online +   opensource +   outil +   p2p +   partager +   photo +   photoshop +   player +   plugin +   programme +   publier +   rechercher +   reference +   reparer +   reseau +   ressource +   routeur +   sauvegarde +   script +   search +   service +   share +   sip +   site +   tag +   telephone +   tips +   tool +   tutoriel +   tv +   usb +   user +   utilitaire +   video +   voip +   web +   web2.0 +   webdesign +   webdev +   wifi +   xml +   xpath +