background preloader

CSS

Facebook Twitter

CSS Débutant : les CSS3. Réaliser des coins arrondis.

CSS Débutant : les CSS3

Mise en page CSS avancée grâce à la propriété display. L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients.

Mise en page CSS avancée grâce à la propriété display

Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait.

Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes: La transparence de couleur avec RGBa en CSS3. Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa.

La transparence de couleur avec RGBa en CSS3

Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement.

De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Voici une illustration du principe de transparence de la couche Alpha (RGBa) (Voir le résultat (RGBa) sur votre navigateur) : Principe de la notation RGBa <div><h1>Joli titre</h1></div> Les ombrages en CSS3. Grâce à des propriétés telles que box-shadow, text-shadow et border-colors, les feuilles de style offrent la possibilité de créer des ombrages sur les différents éléments de votre page sans nécessiter d'image décorative et de découpes intempestives.

Les ombrages en CSS3

Tout n'est pas rose puisque certains navigateurs à la traîne ne reconnaissent pas encore ces différentes propriétés et nécessitent des adaptations personnalisées. Faisons le tour du propriétaire... Box-shadow La propriété CSS box-shadow a été incluse dans le module "borders" de CSS3 et permet de générer une ombre portée sur n'importe quel élément HTML. Parmi les différentes valeurs utilisables, il est possible d'indiquer le décalage vertical et horizontal ainsi que la force du dégradé. En voici une illustration (Voir le résultat sur votre navigateur) : Syntaxe Compatibilité et utilisation concrète Seuls les navigateurs modernes, reconnaissent la propriété box-shadow. Adaptation pour Internet Explorer <9 Le filtre Shadow Le filtre Glow La syntaxe : CSS current work & how to participate.

Ex­pla­na­tion of col­ors & status codes W3C indicates the maturity of specifications by a status code.

CSS current work & how to participate

The CSS working group uses the following, from least to most stable: The names are defined in sections 7.3 and 7.4 of the W3C process document. A REC is what is normally referred to as a “standard.” W3C encourages everyday use starting from CR. The informal stability levels used to group the specs are defined in this 2007 description of CSS stability levels. If you want to help Everybody can take part in the discussions on the archived mailing list www-style@w3.org. On the mailing list, you will be talking to many people, many very busy people. If you are sending comments on a specific CSS module, please prefix the subject of your message with the appropriate spec code (given in the “Status of this document” section) in brackets, e.g. Ovale et forme elliptique avec CSS3 sans image. La propriété border-radius offre la possibilité d'arrondir les angles de vos blocs en CSS 3.

Ovale et forme elliptique avec CSS3 sans image

Comme le présente très bien cet article de Raphaël sur le border-radius, son utilisation est plutôt aisée. Une utilisationp plus poussée La propriété border-radius de CSS3 prévoit une utilisation plus poussée puisqu'elle permet d'accueillir deux valeurs pour chaque angle de boîte à modifier dans l'optique de générer des formes très variées, voire elliptiques. Voici comment pourrait se présenter un de ces codes : Les deux valeurs utilisées représentent l'arrondi horizontal, pour la première, et l'arrondi vertical, pour la seconde. Comme vous pouvez le constater, l'utilisation d'un slash entre les deux valeurs est indispensable pour un souci de compatibilité entre les navigateurs.

Mais encore... ? En poussant le vice un peu plus loin on peut facilement imaginer construire un ovale. Les dimensions des arrondis d'un ovale sont de moitié égales à celles du rectangle qui le contient. Créer des coins arrondis en CSS et sans images. Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même.

Créer des coins arrondis en CSS et sans images

Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures.

Cette technique est généralement lourde et peu accessible.