CSS
Get flash to fully experience Pearltrees
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.
CSS Débutant : les CSS3
Parce que les tableaux avaient du bon… 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. 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 .
Mise en page CSS avancée grâce à la propriété display - Alsacreations
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. Principe de la notation RGBa La notation RGBa obéit aux mêmes règles de fonctionnement que la notation classique RGB, mis à part qu'une composante est ajoutée à la valeur : rgb(0,0,0) devient donc rgba(0,0,0,0) . La dernière valeur (l'alpha) indiquant le degré d'opacité entre 0 et 1.
La transparence de couleur avec RGBa en CSS3 - Alsacreations
Les ombrages en CSS3 - Alsacreations
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. 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é.
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. Everybody can take part in the discussions on the archived mailing list www-style@w3.org . You can subscribe yourself. This is the preferred place for discussions, because the members of the working group will see them.
CSS current work & how to participate
La propriété border-radius offre la possibilité d'arrondir les angles de vos blocs en CSS3. Comme le présente très bien cet article de Raphaël sur le border-radius , son utilisation est plutôt aisée. Une utilisation 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 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.
Ovale et forme elliptique avec CSS3 sans image - Alsacreations
