background preloader

CSS3 Shadows

CSS3 Shadows
CSS3 nous apporte des brides du côté obscur de la force en proposant de gérer des ombres diverses et variées directement depuis votre feuille de styles : blocs et textes sont concernés avec également la combinaison de plusieurs ombrages pour obtenir des effets avancés. Les ombres portées prennent aujourd’hui une place importante dans le web design et permettent la mise en exergue d’éléments importants, ou l’ajout d’une touche de profondeur dans vos graphismes. Il est possible de dire adieu aux images superflues uniquement destinées à la réalisation d’ombres portées ; adieu à la soupe de <div>, <span>, et autres structures en tableau pour réaliser des effets graphiques riches. Deux types d’ombres existent en CSS : les box-shadow, les ombres ajoutées aux éléments de type bloc, les text-shadow, les ombres ajoutées au contenu textuel. Il est évident, comme tout effet graphique, que l’utilisation des ombres doit être faite avec parcimonie et ne pas gêner l'utilisateur. Syntaxe de box-shadow Related:  WEB (WORPRESS, PRESTA, COMMUNITY MANA)

Arrière-plans avec CSS3 Backgrounds La propriété CSS background-size spécifie la taille de l'image dans l'arrière plan. Syntaxe background-size: x y; x détermine la dimension horizontale (pixels, em, auto, pourcentage %, etc.), y détermine la dimension verticale (pixels, em, auto, pourcentage %, etc.) Valeurs possibles Dimensions : par exemple "px" ou "%" : précise la hauteur ou la largeur de l'image. Fond qui occupe tout l'espace de l'élément Code source : Fond qui occupe 30% de la largeur du bloc avec une répétition. Démonstrations "Full-Background" sans déformation Avec la valeur background-size: cover, l'arrière-plan "couvre" au mieux tout le fond. Un tutoriel expliquant plus en détails cette technique (entre autres) : Créer un arrière-plan extensible intelligent Démonstrations Prise en charge Le préfixe -moz-, -webkit-, -ms- ou -o- pourra être requis pour les navigateurs utilisant des pré-versions de cette propriété.

CSS3 : Transformations 2D CSS3 apporte les transformations en 2 dimensions à travers la propriété transform et une liste de fonctions prédéfinies. Voyons ensemble la prise en charge actuelle de cette propriété et des fonctions qui l'accompagnent. La propriété CSS transform permet de manipuler un élément HTML sur les axes X et Y (horizontal et vertical) grâce à des fonctions diverses de transformation graphique. Syntaxe La syntaxe est simple d'emploi. transform: function(value); Il est souvent nécessaire d'utiliser les préfixes vendeurs (-webkit-, -moz-, etc.) devant la propriété transform pour utiliser les transformations 2D sur les versions actuelles et passées de navigateurs. Il est également possible d'effectuer des transformations combinées en espaçant les fonctions d'un simple caractère blanc. transform : function1(value1) function2(value2) function3(value3); La propriété transform-origin La valeur initiale de cette propriété est le centre de l'élément, ce qui équivaut à la notation : transform-origin: 50% 50%;

Ombres avancées avec CSS3 et box-shadow CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1. Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Pseudo-éléments :after et :before Imaginez que dans un site vous souhaitiez ajouter derrière un lien la langue du site en référence (qui, pour rappel, se précise grâce à l’attribut hreflang sur un élément <a>) vous pouvez le faire en passant par du CSS : La base de travail Pour résumer simplement notre démarche nous avons des divisions : Ombre simple Bogues

CSS3 Shadows La propriété text-shadow permet, comme son nom l'indique, de rajouter une ombre portée aux contenus textuels. Cette propriété initialement proposée pour la version 2 de CSS a finalement été retirée dans CSS 2.1, puis réintégrée dans la troisième mouture. Nous allons voir comment créer des effets variés sur du texte. Syntaxe de text-shadow La syntaxe est un peu plus simple que celle de box-shadow. text-shadow: h-pos v-pos (blur) (color); Voici le détail des valeurs attendues : Comme pour box-shadow, les spécifications précisent que sans couleur renseignée pour l'ombre, la valeur de la propriété color de l'élément sert de référent à la couleur de l'ombre. Compatibilité avec les navigateurs Démonstrations Les exemples qui suivent sont tirés de diverses pratiques croisées sur le web souvent réalisées à l'aide d'images. Ombre portée simple L'ombre portée utilisée simplement peut permettre d'ajouter un peu de profondeur au contenu textuel. text-shadow: 1px 2px 3px rgba(0,0,0, 0.5); Démonstration

3 Column CSS Layout: Fixed Width And Centered Last week I shared the code I use to start a 2 column fixed width layout. Today I want to expand that code and share how I’d build a 3 column layout that’s also of fixed width and centered on the page. Many of the concepts will be the same as in the previous post so I’ll skip some of the details here. If you need more explanation than this post has I’ll refer you back to the 2 column layout post. There will be some new concepts when we try to move the columns around for which I’ll offer a more detailed explanation. For those who prefer to skip the explanation here’s a demo of what we’ll be building and you can view the source for the code. The HTML As with the 2 column layout, the html for a 3 column layout is rather simple. Instead of using sidebar-1 and sidebar-2 I’m calling the sidebars primary and secondary. One point to make about the html is the order of the divs. I’ll get to the details in a bit, but with 3 columns there are 6 potential ways to order those columns. The CSS Not bad.

Timing des animations et des transitions en CSS3 L'arrivée de CSS3 il y a quelques années a pour plusieurs d'entre nous grandement révolutionné la manière dont nous intégrions un site Web. D'abord, ce furent les propriétés purement graphiques (coins arrondis, ombres portées) qui frayèrent leur chemin jusqu'en mode production. Ces propriétés étaient les mieux supportées des différents navigateurs, et elles étaient facilement imitables sur les plus anciens grâce aux outils à notre disposition (Par exemple: Css3Pie, Selectivizr, Modernizr, etc). Aujourd'hui, l'étendue des possibilités auxquelles a accès un intégrateur est assez impressionnante. Le sujet des transitions et des animations a déjà été traité par maints auteurs. Avant de commencer, veuillez noter que le terme de transition s'appliquera aussi bien au module transition CSS3 qu'aux effets de timing des animations. Survol de l'utilisation des transitions et des animations Avant toute chose, débutons par un survol de l'utilisation des transitions et des animations. Transitions:

CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Arrière-plans avec CSS3 Backgrounds CSS 3 rend possible l'affichage de plusieurs images en arrière-plan, dans un même élément en proposant de cumuler les valeurs au sein des propriétés background-image, background-position et background-repeat. Le résultat est similaire à des calques (ou strates) d'un logiciel graphique tel que Photoshop : l'image la plus proche de la propriété (la première énumérée) sera l'image de premier plan. Si une couleur de fond est déclarée, elle sera toujours reléguée au dernier plan. Syntaxe générale background-image: url("image1"), url("image2"); background-position: x y, x y; background-repeat: no-repeat; Les différentes valeurs doivent être ajustées en fonction du nombre d'images à charger et de leurs positions respectives. L'ordre de déclaration est important : dans l'exemple ci-après, la position left top s'applique uniquement à la première image et "right bottom" s'applique uniquement à la deuxième image. Démonstration Prise en charge

Supprimer la sidebar sur une page spécifique CSS: Centrer un objet See also the index of all tips. Centering lines of text The most common and (therefore) easiest type of centering is that of lines of text in a paragraph or in a heading. renders each line in a P or in a H2 centered between its margins, like this: The lines in this paragraph are all centered between the paragraph's margins, thanks to the value 'center' of the CSS property 'text-align'. Centering a block or image Sometimes it is not the text that needs to be centered, but the block as a whole. This rather narrow block of text is centered. This is also the way to center an image: make it into block of its own and apply the margin properties to it. The following image is centered: Centering vertically CSS level 2 doesn't have a property for centering things vertically. The example below centers a paragraph inside a block that has a certain given height. This small paragraph is vertically centered. Centering vertically in CSS level 3 CSS level 3 offers other possibilities. The essential rules are:

Related: