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é.
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: 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:
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. 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. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !
Superimpose text over an image by using CSS-styled text If your page design calls for a photo with superimposed text, you don't have to create an image file that includes both the photo and the text. Instead, you can use CSS to keep the text and image separate and still achieve the desired effect. This article is from Builder.com's Design and Usability Tactics e-newsletter. Sign up instantly to begin receiving the Design and Usability Tactics e-newsletter in your inbox. How would you handle a page design that called for a photo with superimposed text? It may be time to rethink that standard solution. The old way to superimpose textThe standard technique for superimposing text over an image has been to use an image editor, such as Photoshop, to create a composite image that contains the desired text embedded into the photo. Occasionally, you might have used HTML text floating over a background image instead, but only if the image was large enough to fill the page or small enough to fit in a table cell.
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. 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] superposer texte par apport a une image [Résolu] | CommentCaMarche T'as de la chance, je me suis pris la tete pour ca !!! Je pensais que ca serait assez simple, mais pas vraiment... Il existe en CSS, l'attribut position: relative. - Soit tu crées un DIV général, dans laquelle tu mets un DIV qui contiendra l'image en position relative à left:0 et top:0 QUE TU NE FERMERAS PAS ! C'est un peu tiré par les cheveux, et si quelqu'un a une solution plus simple (ca doit bien exister...), elle est la bienvenue. Bon courage !
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. 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>
Simple 2 column CSS layout This is a tutorial on how to use CSS to create a simple two column layout. If you want to create a three column layout, read on as this tutorial explains a basic concept that can be used to create as many columns as you need. When you’re done, take a look at How to create a 3-column layout with CSS. The layout consists of a header, a horizontal navigation bar, a main content column, a sidebar, and a footer. To see the full CSS used for each step, view source on the example documents. 1. First of all, we create the basic HTML structure: After that, we put some content in the different sections: <div id="wrap"> <div id="header"><h1>Document Heading</h1></div> <div id="nav"> <ul> <li><a href="#">Option 1</a></li> <li><a href="#">Option 2</a></li> ... Now we have a completely unstyled HTML document which is structured in a way that lets us use CSS to control its layout. View step 1. 2. View step 2. 3. After that it’s time to give the content area a width and center it horizontally. View step 3.