#css

«Les multicolonnes en CSS3»
http://www.alsacreations.com/tuto/lire/1557-les-multicolonnes-en-css3.html

Les deux principales propriétés de ce module sont column-width et column-count :

column-width :
Valeurs : auto (par défaut) ou longueur supérieure à zéro (pas de valeur en pourcentage)
Correspond à la largeur « optimale » de la colonne. En réalité, s’adaptera à l’espace disponible et pourra être plus large ou plus réduite.

column-count :
Valeurs : auto (par défaut) ou nombre entier supérieur à zéro
Correspond au nombre « optimal » de colonnes. Si column-width est fixé, alors column-count représente le nombre maximal de colonnes.

Remarque : La propriété raccourcie, combinant column-width et column-count, est la propriété columns (avec un « s » à la fin - comme « alsacréations ») .

Il est possible de fixer la valeur de l’espace entre chaque colonne grâce à la propriété column-gap qui accepte toute largeur à l’exception des pourcentages. Sa valeur par défaut est « normal ».

Un trait de séparation peut être affiché entre les colonnes, les propriétés qui le définissent sont comparables à celles des bordures CSS classiques :

column-rule -color : couleur du séparateur,
column-rule-style : style du séparateur (parmi les valeurs solid, dotted, dashed, groove, ridge, etc.)
column-rule-width : largeur du séparateur
propriété raccourcie pour l’ensemble : column-rule

#css

#CSS 3 #Flexbox Layout module
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Un article récent (mars 2013) sur le nouveau modèle de boite Flexbox qui arrive, présentant la syntaxe finale. Ce module intègre entre autre le principe des grilles CSS des frameworks directement dans le noyau de base. Avec alignement vertical et horizontal à l’intérieur du parent.

L’autre point génial : définir explicitement l’ordre visuel des boites, sans changer l’ordre du code HTML. Un peu comme dans #Layout-Gala cette fois, mais là aussi directement dans le noyau, avec des règles toutes simples.

#intégration #web #framework #grille

CSS Tube Map
http://www.csstubemap.co.uk

#css #carte

Melody - by molovo
http://melody.molovo.co.uk

Welcome to Melody, an extremely lightweight CSS grid framework. I’ve adapted and borrowed elements from a number of other frameworks to evolve this into something that meets my needs, and done things a little differently to make it more flexible.

#css #css_grid #css_framework #webdev

Welcome - Polymer
http://polymer-project.appspot.com

Polymer is a new type of library for the web, built on top of Web Components, and designed to leverage the evolving web platform on modern browsers.

#html #css #javascript #framework

Avoiding Unnecessary Paints - HTML5 Rocks
http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints

#css #html

Transitions CSS3 - Alsacréations
http://www.alsacreations.com/tuto/lire/873-transitions-css3-animations.html

Animer les pages web uniquement à l’aide de styles CSS, sans apport de JavaScript : le module CSS3 Transitions

#animation #html5 #transition #css #css3

« Automatic Figure Numbering with CSS Counters »
http://tympanus.net/codrops/2013/05/02/automatic-figure-numbering-with-css-counters

Dans le #html5, nouvel élément <figure> :

Basically, instead of adding your images this way:

<!— This is not good enough —>
<img src='http://static3.seenthis.net/cute-kitty.jpg' alt="This is a cute kitty!" />

… you can do something like this:

<!— This is good and semantic —>
<figure>
<img src='http://static3.seenthis.net/cute-kitty.jpg' alt="" />
<figcaption>This is a cute kitty!< / figcaption>
< / figure>

Et dans le #css, un compteur de <figure> :

We want to number our images so that they are prefixed by “Fig. 1 – …”, “Fig. 2 – …” and so on, right? Let’s do it simply.

.article {
counter-reset: figures;
}

.figure {
counter-increment: figures;
}

.figure figcaption:before {
content: ’Fig. ’ counter(figures) ’ - ’;
}

Those 3 lines of CSS are enough to number our figures automagically. Isn’t that awesome?

J’avais pas fait attention à 7h36 @7h36

Chaque matin, par email, une sélection de seenthis
http://listes.rezo.net/mailman/listinfo/7h36
Y’a des « clients » ?

CSS Overflow Module Level 3
http://dev.w3.org/csswg/css-overflow

#css

CSS3 Click Chart | CSS3 Browser Support and Information
http://css3clickchart.com/#box-sizing

#css

“List of Pseudo-Elements to Style Form Controls”
http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls

Styling form elements is a pain point when developing #web applications. Historically, web developers have had to accept the form controls the browser provided with little hope of customization. However, web rendering engines are increasingly adding hooks through pseudo-elements to give authors some control over the display.

While all of these #pseudo-elements are rendering engine specific (and therefore behind vendor prefixes), they can still be handy for customizing the display for that engine. The following is my best attempt at compiling a complete list of the pseudo-elements available in Trident, Gecko, and WebKit. At the time of this writing Blink is a recent fork of WebKit, so the pseudo-elements provided are identical. I am not aware of any form related pseudo-elements that Presto provides.

#css

PLTTS
http://pltts.me

With PLTTS [/ˈpælɨts/] it’s easy to find the matching color-palette for a project you are working on.

Très pratique pour les #daltoniens ça.

Via http://tympanus.net/codrops/collective/collective-59

#css #palette #couleurs #HEX

Le contraire de FESS your CSS (http://seenthis.net/messages/127057) : CSSCSS
http://zmoazeni.github.io/csscss

csscss will parse any CSS files you give it and let you know which rulesets have duplicated declarations

Via http://web-design-weekly.com/2013/04/14/web-design-weekly-84

#css

Improve #Mobile Support With Server-Side-Enhanced Responsive Design | Smashing Mobile
http://mobile.smashingmagazine.com/2013/04/09/improve-mobile-support-with-server-side-enhanced-responsive

a responsive website is not automatically a mobile-friendly website. Amid the buzz of trendy Web development techniques, the good ol’ Web server doesn’t get the spotlight it deserves. Modern Web development should be about finding the right balance between server-side and client-side implementation.

1. Use Your #CMS
2. Use A #Device-Description Repository
3. Execute #CSS #Media_Queries Server-Side
4. Optimizing #Images
5. Pre-Processing and Intelligent Caching

http://media.smashingmagazine.com/wp-content/uploads/2012/12/smg-req.png

“Freeing the Floats of the Future From the Tyranny of the Rectangle”
http://blogs.adobe.com/webplatform/2013/03/27/freeing-the-floats-of-the-future-from-the-tyranny-of-the-rectangle

When an element is floated, inline content avoids the floated element. Content flows around the margin box of the element as defined by the CSS box model. The shape-outside CSS property allows you to tell the browser to use a specified shape instead of the margin box when wrapping content around the floating element.

https://blogs.adobe.com/webplatform/files/2013/03/grid_cssexclusions.png

#css

« Preview border-corner-shape, before implementations ! »
http://lea.verou.me/2013/03/preview-border-corner-shape-before-implementations

As an editor of the Backgrounds & Borders Level 4 spec, I am naturally a bit more interested in the cool features it will bring, once implementations start (it’s currently too early for that). One of the coolest features in it is border-corner-shape. While in Backgrounds & Borders 3, border-radius was only used for rounded (actually, elliptical) corners, with the help of border-corner-shape, it will be able to do so much more! Beveled corners, scoop-style corners (informally known as “negative border-radius”), even rectangular notches.

Et l’application en question
http://leaverou.github.com/border-corner-shape

http://lea.verou.me/wp-content/uploads/2013/03/Screen-Shot-2013-03-24-at-17.45.38-.png

#css

FESS your CSS
http://www.fess.me

#maïgode #css_expander #on_aura_tout_vu

Quotes Rotator
http://tympanus.net/codrops/2013/03/29/quotes-rotator

An autoplay rotator for quotes (or any kind of content). An indicator above the content shows the progress. A blockquote with an image is used as an example. Also, an example media query shows how to resize the content for smaller screens.

#css #js

Pourquoi je n’utilise pas les préprocesseurs CSS ?

Ils complexifient CSS
Ils n’ajoutent pas de fonctionnalités CSS aux CSS
Ils ne font pas (toujours) gagner de temps
Ils peuvent être dangereux pour le standard CSS (et provoquer une confusion)

►http://blog.iamvdo.me/post/45259636008/pourquoi-je-nutilise-pas-les-preprocesseurs-css

Voir aussi : http://blog.goetter.fr/post/46331150918/les-preprocesseurs-et-moi#_=_

Tout cela résume bien mon opinion sur le sujet.

#css #webdev #web #webdesign #less #sass

Comment distinguer les écrans « grand », « petit » et « moyen » en #CSS ? Bah, c’est pas facile, mais voilà une astuce…
Responsive Web Design With Physical Units | Smashing #Mobile
http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units

Here’s the theory: In a combined query, if the ratio between the smaller of the width and height and the resolution, called a PSINET score, is higher than 5, then the result falls in the category of a physically large device. If the resulting number is lower than 5, then it is a physically small device. Devices that score very close to 5 are considered to be medium-sized.

#media-queries

Cascade Framework
http://jslegers.github.com/cascadeframework/index.html

Also different from Twitter Bootstrap or other CSS Frameworks out there, Cascade Framework can be used for modern browsers and older browsers alike. All features of Cascade Framework support Internet Explorer from IE6 upwards or degrade gracefully.

#HTML5 #CSS #framework #JavaScript

Working Effectively with #less: Tips and #tools
http://www.hongkiat.com/blog/less-tips-tools

Tags: less #css tools

http://www.andilicious.com/myfiles/dev/css/responsive-webdesign-css3-media-queries/css_responsive_template.css

#mediaqueries #mobile #css

Pourquoi je n’utilise pas les préprocesseurs CSS ?

Vincent De Oliveira · Passionné de CSS

►http://blog.iamvdo.me/post/45259636008/pourquoi-je-nutilise-pas-les-preprocesseurs-css

#css

(Entre parenthèses et je suis d’accord, ce n’est point l’endroit pour, mais quelqu’un pourrait m’expliquer pourquoi #spipr et #bootstrap_pour_spip sont en #less ? J’ai passé quelques heures à installer #less via #brew sur mon Mac et maintenant il faut que je me coltine la doc de #less. Ce n’est pas évident.)

#css