Si vous utilisez twitter sur iPhone, vous vous serez peut etre rendus compte que leur application web (si vous visitez twitter via votre navigateur web) est assez fluide. Eh bien, les gens chez twitter ont release en Open source le code qu’ils utilisent pour cette application : Bootstrap. Bootstrap est un ensemble d’outils front-end pour vos applications web. C’est une collection de styles CSS et de conventions HTML. Le « framework » couvre la typographie, les formulaires, les boutons, les tables et grilles, la navigation etc. La taille est relativement petite (6k avec gzip).

Bootstrap est hébergé sur  Github il utilise aussi LessCSS qui est un pre-processeur qui offre plus de flexibilite au code CSS (declarations imbriquees, variables, fonctions etc.).

Addy Osmani a publie un tutoriel dans lequel il montre comment créer une galerie de photos avec jQuery et CSS3. L’effet est intéressant pour afficher des photos « polaroides ».

Screencast: http://screenr.com/Z0W
Démo: http://www.addyosmani.com/resources/shinetime
Telechargement: http://www.addyosmani.com/resources/shinetime/shinetime.1.01.zip

Easy est un Framework CSS/JS/HTML. Il set a convertir un design en HTML en mettant une base pour des développements futurs. La partie CSS inclut des définitions pour des éléments communs pour le contrôle du layout. La partie JavaScript est basée sur jQuery et présente des fonctions prêtes pour des tooltips, des listes déroulantes, une gestion de modalbox, une validation de formulaires etc. Easy inclut une librairie de blocks pré-établis que vous pouvez directement copier /coller dans votre document.

Le site présente une demo qui présente l’ensemble des fonctionnalités ainsi qu’une documentation détaillée.

Zen Coding est un ensemble d’outils pour optimiser le temps du codage HTML et CSS. En effet, il vous permettra de « Générer » du code HTML a partir d’une abréviation, exemple:

1

div#content>h1+span

donnera

1
2
3
4

<div id="content">
<h1></h1>
<p></p>
</div>

Intéressant non? A l’origine, ZenCoding était propose par Vadim Makeev , il a été développé depuis Avril 2009 par  Sergey Chikuyonok. ZenCoding consiste en deux composants: un gestionnaire d’abréviations (les abréviations sont en quelques sorte des sélecteurs CSS), et un gestionnaire de concordance de tags HTML.

Plusieurs plugins existent en support complet:

• Aptana (eclipse);
• Coda, via TEA for Coda (Mac);
• Espresso, via TEA for Espresso (Mac);

et en support partiel comportant uniquement l’expansion des abréviations:

• TextMate (Mac, et peut être utiliser avec  E-text pour Windows);
• TopStyle;
• Sublime Text;
• GEdit;
• editArea;

Une demo de l’éditeur online existe : ICI

Une vidéo présentant les fonctionnalités (Anglais) :

Bestwebframeworks est un site web qui présente une comparaison de différents Frameworks  PHP, CSS, JavaScript et Ruby. Le site offre la possibilité d’ajouter vos avis sur chaque Framwork ainsi qu’un lien pour téléchargement.

Ce site peut etre intéressant pour beaucoup de nouveaux developpeurs pour le choix de leur Frameworks. Pour l’instant, les commentaires sur les différents Drameworks ne sont pas nombreux, mais cela viendra

Vous pouvez visiter le site Bestwebframeworks ici: http://www.bestwebframeworks.com/

LESS (Leaner CSS) est un framework CSS qui offre une alternative pour  SASS. Il étend CSS avec des variables, des règles et des opérations imbriquées. Comme une extension de CSS, LESS est non pas seulement compatible avec CSS, mais il ajoute des fonctionnalités intéressantes pour le code CSS existant.

Vous pouvez ecrire du code LESS comme vous le faites pour CSS, le seul truc c’est que vous ariez a le compiler en CSS. vous pouvez utiliser LESS Ruby qui le fera pour vous. Vous pouvez aussi utiliser LESS Compiler pour convertir un fichier .less en un .css

CSS3 offre une variété de nouveaux moyens pour créer un impact avec vos designs avec quelques changements. Dans cette partie nous allons faire le tour des possibilités créées par le standard.

Les modules

Le développement de  CSS3 va être divisé  en modules. l’ancienne spécification était trop large et complexe pour être mise  a jour. Il a été donc divise en de petites pièces, de nouvelles parties ont aussi été ajoutées. parmi ces modules on peut citer :

• le modèle de boites
• le Module de listes
• la présentation des hyperliens
• les arrières plans et les bordures
• les effets de texte
• les colonnes multiples
• voir la liste complete

Quand est ce que ca va etre pret?

Plusieurs modules sont finis, incluant le module  SVG (Scalable Vector Graphics), les modules de requêtes Media et les espaces de noms. Les autres sont encore en cours de développement. Il est difficile de donner une date projetée pour le support des navigateurs du CSS3 – quelques nouveaux builds de safari ont commencé déjà a supporter quelques modules. l’ensemble des modules vont etre graduellement implémentées dans les différents navigateurs, cela pourrait prendre un an ou deux pour que le tout soit adopte.

Comment CSS3 va m’affecter?

Espérant que cela va être d’un moyen positif! CSS3 va évidemment etre compatible aux anciennes version, on n’aura donc pas a changer nos anciens design pour s’assurer que ca marche. les navigateurs vont continuer a supporter CSS2.

L’impact le plus important est la possibilité d’utiliser les sélecteurs et les propriétés qui sont disponibles. ces derniers vont permettre d’effectuer quelques nouveaux trucs (animations, bordures, colonnes etc)  plus facilement.

Les Bordures

Dans cette partie on va parler des bordures. la propriété border est connue par tous les designers et utilisateurs du CSS. ils permettent de structurer le contenu, créer des effets et améliorent le layout des pages.

CSS3 va avec les bordures vers un autre niveau en ajoutant la possibilité d’ajouter les gradients, les bordures arrondies, les ombres de bordure et les images de bordure. les exemples qu’on va donner peuvent être effectués sur les versions courantes des navigateurs, elles sont testées sur Firefox 3.5.2 . Pour d’autres ils ne sont disponibles que pour les derniers builds de différents navigateurs.

Les bordures arrondies

Plusieurs moyens sont possibles pour afficher des bordures arrondies avec la version courante de CSS, mais aucun d’eux n’est simple. Il faut absolument utiliser des images pour cette tache. La grande nouveauté ici est que, avec CSS3, créer une bordure arrondie est incroyablement simple, et peut être appliqué  a chaque coin individuellement, les couleurs et la taille sont aussi modifiables. Voici un exemple :

1
2
3
4
5
6
7
8

.roundedborder {
background-color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid red;
padding: 10px;
width: 310px;
}

Exemple

Les bordures gradients

Les bordures transparents peuvent apparaître effectifs si ils sont utilisées correctement. Le code suivant est un peu plus complexe :

1
2
3
4
5
6
7
8
9

.gradientgradient {
border: 8px solid #000;
-moz-border-bottom-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors:  #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors:#897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

Exemple

Ombres de bordure

Ajouter de l’ombre permet de différencier une certaine partie. voici un exemple :

1
2
3
4
5

.shadowborder {
-webkit-box-shadow: 10px 10px 5px #eee;
padding: 5px 5px 5px 15px;
width: 300px;
}

Exemple

Images de bordures

Ceci est aussi une fonctionnalité intéressante. Vous avez la possibilité de répéter ou d’étirer une photo que vous choisissez. le code CSS varie selon les navigateurs présentement:

1
2
3
4
5

.imgborder {
width:400px;
-webkit-border-image: url(ombre.png) 20 20 20 20 round round;
-moz-border-image: url(ombre.png) 27 27 27 27 round round;
}

Exemple

Effets de Texte

La typographie est sans doute l’un des aspects les plus important pour un bon design. la police peut donner une certaine impression et un certain impact du contexte du site et influer le contenu.

Les versions courantes de CSS  sont déjà versatiles de nos jours. mais il y a quelques parties qui sont plus ou moins difficile a réaliser. CSS3 vient justement faciliter un nombre de ces limitations.

Ombre de texte

Les ombres de texte peuvent être vus comme dépassées, mais ceci dépend de la manière de leur utilisations. l’ombre peut donner un look impressionnant si il est bien choisi dans un bon contexte. voici un exemple

1
2
3
4
5
6

.shadowtext {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

Exemple

Renvoi a la ligne

Pour l’instant, si un mot est beaucoup plus long que l’aire sur laquelle il est, il dépasse cette aire. ce n’est pas un cas très courant, mais ça arrive de temps en temps. La nouvelle faculté de renvoi a la ligne permet désormais de forcer un texte au renvoi a la ligne, et éventuellement de couper le mot en deux parties. Et c’est super simple!

1
2
3

.wraptext {
word-wrap:  break-word;
}

Exemple

Police Web

Bien que cette section n’est pas classée dans les effets de texte, nous allons en parler brièvement. Une police (Font en Anglais) est un moyen pour utiliser n’importe quelle police dans vos pages web, étant téléchargée automatiquement par votre navigateur. Ceci peut révolutionner le design Web qui était limitée a une dizaine ou une quinzaine de polices supportées. Par contre, cette nouvelle fonctionnalité emmène un debat concernant les licences des polices.

Pour l’instant, Uniquement Safari 3.1 supporte cette fonctionnalité. Opera va prochainement la supporter aussi. Il est certain que les autres navigateurs suivront la vague aussi.

1
2
3
4

@font-face {
font-family: 'Name of the new font';
src: url('http://www.designshack.co.uk/fonts/font.ttf');
}

Resultat

Interface Utilisateur

CSS3 offre des nouvelles propriétés pour modifier la taille des elements, des curseurs, des boites etc.

Modification de taille

CSS3 vous permet facilement de modifier la taille de n’importe quel élément avec le code resize:both;

1
2
3
4
5
6

.modifysizeinterface {
padding: 20px;
border: 1px solid;
resize: both;
overflow: auto;
}

Exemple (uniquement sous safari)

Modification de taille des boites

Le module « modèle des boites » (box model en Anglais) de CSS3 est l’un des parties les plus extensives. Il vous permet de définir certains elements qui doivent être placés dans une aire bien définie d’une certaine façon. Par exemple, si vous voulez deux boites avec des bordures cote a cote, ceci peut être achevé en mettant la propriété box-sizing a border-box, ce qui forcera votre navigateur a afficher la boite avec la taille spécifiée et mettre la bordure a l’intérieur de la boite.
Voici un exemple:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.boite {
-moz-box-sizing: border-box;
width:50%;
height: 60px;
text-align: center;
border: 5px solid red;
padding: 2px;
float:left;
}
.aire {
width: 300px;
border: 10px solid blue;
height: 60px;
}

Exemple

Colonnes multiples

Ceci est un très bonne facette pour mettre en forme un texte. les journaux et magazines l’utilisent depuis toujours. CSS3 introduit un nouveau module nommé multi-column qui permet de spécifier combien de colonnes voulez vous pour un texte, et comment la division va être faite :

Colonnes multiples

A présent, cette fonctionnalité est supportée uniquement par Firefox et Safari 3. Il y a quatre propriétés pouvant être configurées dans CSS3 :

• column-count
• column-width
• column-gap
• column-rule

A present, le sélecteur dépend du navigateur (pour Safari ou Firefox) . voici un exemple:

1
2
3
4
5
6
7
8
9
10
11

.colonnesmultiples {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
border:2px solid green;
width:500px;
padding:5px;
}

Exemple

portee de colonnes

Vous vouliez aussi qu’un élément aie une portée de plus qu’une colonne, une entête ou un titre par exemple. Ceci peut etre fait en utilisant :

1
2
3

.multiplespan {
column-span: all
}

Exemple

Arrière plans

Taille des arrière plans

Plus besoin de modifier les tailles des images elles même pour les arrière plans. CSS offre des options pour modifier les tailles des arrière plans.

1
2
3
4
5
6
7
8
9
10

.backgroundsize {
background: url(css3.jpg);
-webkit-background-size: 137px 50px;
-khtml-background-size: 137px 50px;
-o-background-size: 137px 50px;
background-size: 137px 50px;
background-repeat: no-repeat;
padding: 60px 5px 5px 10px;
border: 3px solid #ddccb5;
}

Exemple (Safari et Opera)

arrière plans multiples

Cette fonctionnalité vous permettra d’affecter des arrière plans multiples pour un élément donné. Vous n’aurez plus a vous soucier a mettre des images convenant a la longueur de votre élément pour couvrir l’ensemble des elements etc.

1
2
3
4
5
6
7
8

.arplansmultiples{
height: 150px;
width: 270px;
padding: 40px 20px 20px 20px;
background: url(top.gif) top left no-repeat,
url(bottom.gif) bottom left no-repeat,
url(middle.gif) left repeat-y;
}

Exemple (Safari et Opera)

Specifications W3C du CSS3

Conclusion

J’espère que vous avez apprécié toutes les nouvelles fonctionnalités et nouveautés de CSS3. J’adore la vie facile Si vous avez des commentaires n’hésitez pas !

Télécharger Tous les exemples