CSS D�butant - Mammouthland

CSS3 : R�aliser un fond en d�grad� sans image

Wed, 02 may 2012 14:00:00 +0200

Avant les CSS3, pour r�aliser de jolis boutons ou tout autre fond de couleur en d�grad�, il convenait de r�aliser une image que l'on d�clarait en image de fond � l'aide de background-image.

On peut maintenant s'en passer gr�ce � de nouvelles valeurs de background : linear-gradient et radial-gradient.

CSS 3 : Ombrer des boites et du texte

Tue, 23 aug 2011 10:30:00 +0200

Ombrer des boites ou du texte sans images c'est possible ! Plus besoin d'avoir recours � des logiciels photoshoppeurs pour faire et refaire, un peu de code CSS suffit.

Voici les explications, illustr�es de quelques exemples, de r�alisations d'ombres en CSS.

CSS 3 : R�aliser des coins arrondis

Mon, 22 aug 2011 17:15:00 +0200

Arrondir les coins est s�rement l'un des effets graphiques les plus recherch�s par les webdesigners. Pour cela, on a longtemps utilis� des images avec plus ou moins de bonheur et de facilit� pour obtenir l'effet recherch�.

Tous les navigateurs r�cents permettent � pr�sent d'arrondir les coins de cadres, d'images, de tableaux etc. avec une facilit� d�concertante.

Mise en page en colonnes avec display:table

Fri, 19 aug 2011 19:20:00 +0200

Et si pour faire de la mise en page on utilisait... des tableaux ? Quoi ? Qu'est-ce qui vous choque ? Mais oui, on peut faire de la mise en page par tableau en CSS ! Et sans qu'une balise table ne soit utilis�e dans le code html...

Explications et application d'une mise en page sans tableaux... avec des tableaux ! (� moins que ce ne soit l'inverse)

CSS3 : d�clarer une police de caract�re non standard avec @font-face

Tue, 26 apr 2011 21:15:00 +0200

Longtemps, longtemps, le webmestre s'est lament� de ne pouvoir utiliser qu'un petit nombre de fontes pour ses sites web. Arial, Helvetica, times new roman... c'�tait d'un triste ! Ou alors il fallait faire des images. Et mettre du texte en image ce n'est tout de m�me pas tr�s logique, sans compter les probl�mes d'accessibilit� qui peuvent en d�couler.

Gr�ce � @font-face on peut � pr�sent utiliser des polices de caract�re exotiques et laisser cours � son inventivit�.

CSS3 : Images multiples dans un m�me background

Mon, 25 apr 2011 19:10:00 +0200

La propri�t� background-image n'acceptait, en CSS 2.1, qu'une seule image. Pour pouvoir en mettre plusieurs � diff�rents endroits d'une page, il fallait d�clarer plusieurs div ayant chacun sa propre image de fond. Lourd...

Les CSS3 permettent des background multiples, et maintenant que m�me Internet Explorer (version 9) l'impl�mente, pourquoi s'en priver ?

CSS3 : Les Media-Queries

Sun, 24 apr 2011 19:10:00 +0200

Avec l'av�nement des smartphones ou autre tablette, la multiplication des tailles et des r�solutions d'�cran, il devient de plus en plus al�atoire de ne r�aliser qu'une seule disposition graphique de sa page web... Comment en effet visualiser correctement sur un smartphone une page qui aurait �t� pens�e pour une r�solution minimale de 1900px ? (ce qui est tr�s mal, d'ailleurs...)

Les Media-Queries, permettent de cibler diff�rents cas et ainsi d'adapter la restitution de sa page html � diff�rentes caract�ristiques des terminaux.

Plus belle la vie avec html5 et CSS3 - Atelier Paris Web 2010

Thu, 28 oct 2010 12:00:00 +0100

Cet atelier d'1h30 s'est d�roul� le 16 octobre 2010 lors de la cinqui�me �dition de Paris Web, chez T�l�com ParisTech.

Animateurs

Pascale Lambert-Charreteur (CSS d�butant)
Rapha�l Goetter (Alsacr�ations)

Aligner une image et du texte � l'aide de la propri�t� float

Wed, 07 Apr 2010 22:00:00 +0200

Pour positionner une image � droite ou � gauche d'un texte, on peut bien s�r utiliser une mise en forme par tableau... Mais un tableau n'est pas fait, normalement, pour faire de la mise en page.

A l'aide du langage CSS, aligner une image et du texte est tr�s simple gr�ce � la propri�t� CSS float qui fait "flotter" les �l�ments.

Sites � calques ! (� la bonne soupe de div)

Mon, 24 Aug 2009 17:45:00 +0200

On lui dit : Ne fais pas de tableaux, c'est mal. Fais des div.

Donc il rentre chez lui, il prend tous ses td, tous ses tr, tous ses table, et il fait : div, div, div.

Il n'a pas r�gl� le probl�me, mais au moins il a fait plaisir au mec de l'accessibilit�.
Mais c'est inutilisable.

Je suis r�guli�rement effray�e, agac�e et d�sol�e, de voir le nombre d'apprentis webmestres (ou plus qualifi�s), qui appliquent ce pr�cepte � la lettre, sans bien savoir pourquoi d'ailleurs...