Translated version of pseudo css and shape div guy.txt

General syntax La syntaxe générale

Firstly define the element the CSS is written for. Tout d'abord définir l'élément le CSS a été écrit. Then use { and after putting in the styles, close it with } Ensuite, utilisez {et après avoir mis dans les styles, il étroite avec}

CSS tutorial - Using borders to produce angled shapes Tutoriel CSS - Utiliser les frontières pour produire des formes anguleuses

Using borders to produce angled shapes En utilisant les frontières pour produire des formes anguleuses

This is a suppliment to the tutorial, and is here only for illustrative purposes. C'est un suppliment le tutoriel, et voici qu'à des fins d'illustration. It is not part of the main tutorial. Il ne fait pas partie du tutoriel principal.
These examples will not work in Netscape 4 or WebTV, because they do not allow you to define individual borders, or Escape because it does not handle borders correctly. Ces exemples ne fonctionnent pas dans Netscape 4 ou WebTV, car elles ne vous permettent pas de définir les frontières individuelles, ou Echap parce qu'il ne gère pas les frontières correctement. Internet explorer 4 and 5 may have trouble with some of the examples due to their problems with the box model. Internet Explorer 4 et 5 peut avoir des ennuis avec certains des exemples à cause de leurs problèmes avec le modèle de boîte.
Note that these examples are based on you using the default 'Moosified' style for this page, where the background colour of the body is #f6f6f6. Notez que ces exemples sont basés sur vous en utilisant 'Moosified «le défaut de style pour cette page, où la couleur de fond du corps est # f6f6f6. If you use the other styles, the shapes may not work correctly. Si vous utilisez les autres styles, les formes peuvent ne pas fonctionner correctement.
This might look like this: Cela pourrait ressembler à ceci:

 body { styles go in here }

In this case, the 'body' is known as the selector. Dans ce cas, le «corps» est connu comme le sélecteur. This can get more complicated, and can include many different selectors. Cela peut devenir plus compliqué, et peut inclure plusieurs sélecteurs différents.
For several elements to use the same style, you can separate them with commas: Pour plusieurs éléments à utiliser le même style, vous pouvez les séparer par des virgules:

 p, div, span { styles go in here }

The syntax for the styles follows this pattern: La syntaxe pour les styles suit ce modèle:

 name_of_style_attribute: value;

You can include as many styles as you want inside the { and } curly braces. Vous pouvez inclure autant de styles que vous voulez à l'intérieur du {et} accolades. Occasionally, there may be more than one value for a single style, for example with the border attribute: Occasionnellement, il peut y avoir plus d'une valeur d'un style unique, par exemple avec l'attribut border:

 border: 3px double red;

To define styles that should only target elements with a certain class, put a fullstop then the name of the class, after the element. Pour définir des styles qui ne devrait cibler les éléments avec une certaine classe, mettre un point final alors le nom de la classe, après l'élément. This might look like: Cela pourrait ressembler à:

 p.nameofclass { styles go in here }

This would also need the class to be written inside the HTML 'p' element tags to which it refers: Ce serait aussi besoin de la classe pour être inscrit à l'intérieur des balises d'élément «p» le code HTML à laquelle il se réfère:

 <p class="nameofclass">

If we use the syntax without specifying an element name, then every element of class 'nameofclass' , not just p tags, will use this style: Si nous utilisons la syntaxe sans spécifier un nom d'élément, puis chaque élément de «nameofclass 'classe, pas seulement les balises p, va utiliser ce style:

 .nameofclass { styles go in here }

There are also some pseudo-classes such as :hover . Il ya aussi quelques classes de pseudo-tels que: hover. This particular one will only work in some browsers (most notably, Internet Explorer 6-) with 'a' elements. Celui-ci en particulier ne fonctionnera que dans certains navigateurs (notamment, Internet Explorer 6 -) avec 'a' éléments. It will be applied when the mouse hovers over the element. Il sera appliqué lorsque la souris survole l'élément.

 a:hover { color: red; }

The pseudo-classes can be used along with classes, like this: Les pseudo-classes peuvent être utilisés avec les classes, comme ceci:

 a.nameofclass:hover { color: red; }

One of the most powerful uses of this pseudo class is to produce menus written only using pure CSS . Une des utilisations les plus puissants de cette pseudo classe est de produire des menus écrits en utilisant uniquement CSS pur .
If an element has been defined with an ID then it can be given its own style by using the ID selector. Si un élément a été défini avec un ID alors il peut être donné son propre style en utilisant le sélecteur d'identité. Try to restrict this to cases where it is actually needed: Essayez de limiter ce cas là où elle est réellement nécessaire:

 #id { color: red; font-weight: bold; }

You can also target the specific element type, combined with the ID selector: Vous pouvez également cibler le type d'élément spécifique, combinée avec le sélecteur d'identité:

 element_type#id { color: red; font-weight: bold; }

Now for some clever stuff. Maintenant, pour des trucs intelligents. It is possible to target an element based on what its parent elements are, by writing the name of the parent, followed by a space, followed by the name of the element you want to target. Il est possible de cibler un élément basé sur ce que ses éléments sont parents, en écrivant le nom de la mère, suivi d'un espace, suivi du nom de l'élément que vous souhaitez cibler. Note that the parent does not have to be a direct parent. Notez que le parent n'a pas à être un parent direct. It could be anywhere in the chain of ancestors. Ce pourrait être n'importe où dans la chaîne des ancêtres. For example, if you want to assign a style to li elements where one of their parents is a ul whose parents include a td whose parents include a tr whose parents include a table whose parents include the body , you can write this: Par exemple, si vous voulez affecter un style aux éléments li, où un de leurs parents est un ul dont les parents comprennent un TD dont les parents comprennent un TR dont les parents comprennent une table dont les parents comprennent le corps, vous pouvez écrire ceci:

 body table tr td ul li { styles go in here }

If you also want to assign that style to p elements, you can combine this with the comma, as shown earlier: Si vous aussi vous voulez assigner ce style à p éléments, vous pouvez combiner cela avec la virgule, comme indiqué précédemment:

 body table tr td ul li, { styles go in here }

Or mix that up however you like. Ou mélangez jusqu'à ce comme bon vous semble. You can also combine it with class selectors. Vous pouvez également les combiner avec des sélecteurs de classe. For example, this will match all li elements whose parents include a td of class fish : Par exemple, cela correspond à tous les éléments li dont les parents comprennent un TD de poissons de classe:

 td.fish li { styles go in here }

If at any time you define two or more conflicting styles, the more specific one should be used by the browser. Si, à tout moment vous définissez deux ou plusieurs styles opposés, l'un plus spécifique doit être utilisé par le navigateur. If you use an inline style, that should override other styles. Si vous utilisez un style en ligne, qui devrait l'emporter sur d'autres styles. There are exceptions to these rules, but I will not go into those here. Il ya des exceptions à ces règles, mais je n'entrerai pas dans ceux qui sont ici.
All styles will have a default value, and that may be different for different elements (for example, the border style has a default value of 'none' , but most browsers use something like '2px groove black' as the default border for a fieldset). Tous les styles auront une valeur par défaut, et qui peut être différente pour différents éléments (par exemple, le style de bordure a une valeur par défaut de 'none', mais la plupart des navigateurs utiliser quelque chose comme '2 px noire groove »comme la frontière par défaut d'un fieldset ). If you have styled an element with a generic style, and you want to reset it to its default style for that specific element, you will need to manually set it back to its default value. Si vous avez un élément de style avec un style générique, et que vous voulez le remettre à son style par défaut pour cet élément spécifique, vous devrez manuellement le ramener à sa valeur par défaut. For example, you could set all paragraphs to have a 1 pixel border, then set paragraphs not to have a border if they are inside a div: Par exemple, vous pourriez mettre tous les paragraphes d'avoir une bordure de 1 pixel, puis réglez les paragraphes de ne pas avoir une frontière si elles sont dans un div:

 p { border: 1px solid black; } div { border: none; }

Some styles can be represented in a number of different ways. Certains styles peuvent être représentées dans un certain nombre de façons différentes. For example, the border style can be used to apply a border to all sides of an element: Par exemple, le style de bordure peut être utilisé pour appliquer une bordure à tous les côtés d'un élément:

 p { border: 1px solid black; }

It is also possible to specify one border at a time: Il est également possible de spécifier une frontière à la fois:

 p { border-top: 1px solid black; border-right: 1px solid green; border-bottom: 1px solid black; border-left: 3em solid black; }

It is also possible to specify the thickness, colour, and style separately. Il est également possible de spécifier l'épaisseur, la couleur et le style séparément. Each one can accept 1, 2, 3 or 4 values. Chacun peut accepter les valeurs 1, 2, 3 ou 4. If one value is specified, all sides will use it. Si une valeur est spécifiée, toutes les parties vont l'utiliser. If you specify two, the first will be used by top and bottom, and the second will be used by right and left. Si vous spécifiez deux, le premier sera utilisé par les haut et en bas, et le second sera utilisé par droite et gauche. If you specify three, the first will be used by top, the second will be used by right and left, and the third will be used by bottom. Si vous spécifiez trois, le premier sera utilisé par le haut, le second sera utilisé par droite et gauche, et le troisième sera utilisé par le bas. If you specify four, they will be used by top, right, bottom and left respectively: Si vous spécifiez quatre, ils seront utilisés par le haut, droite, bas et gauche respectivement:

 p { border-width: 1px 2px 3px; border-style: solid solid solid double; border-color: black green; }

And this can be done for one side at a time as well. Et cela peut être fait pour un côté à un moment aussi. This is generally most useful to specify a normal style, then override it for just one side: Ceci est généralement plus utile de spécifier un style normal, alors il override pour un seul côté:

 p { border: 1px solid black; border-right-color: green; }

These styles are all considered to be as specific as each other, so if you specify the border-right style and then the border style, the right border will be styled according to what you define in the border style. Ces styles sont tous considérés être aussi précis que l'autre, donc si vous spécifiez le style de bordure à droite et ensuite le style de bordure, la bordure de droite sera de style en fonction de ce que vous définissez dans le style de bordure.

Last modified: 4 September 2008 Dernière modification: 4 Septembre 2008

If all four borders are defined as being thick, they should be tapered into each other: Si les quatre frontières sont définies comme étant d'épaisseur, ils devraient être effilé dans l'autre:

 border-top: 20px solid red; border-bottom: 20px solid #fc0; border-left: 20px solid blue; border-right: 20px solid green;

MultiColour Square Carré multicolore

All of these examples are done using a <div> element, with no contents: Tous ces exemples sont fait en utilisant un élément <div>, sans contenu:

 <div style="style declarations"></div>

The lack of contents makes all points sharp. Le manque de contenu rend tous les points pointus. Some browsers still leave space for the non-existent contents, so we can remove that space by using the following combination of styles: Certains navigateurs toujours laisser un espace pour le contenu inexistant, de sorte que nous pouvons retirer de cet espace en utilisant la combinaison suivante de styles:

font-size: 0px; line-height: 0%; width: 0px; font-size: 0px; line-height: 0%; largeur: 0px; 
border-top: 20px solid red; border-top: 20px rouge solide;
border-bottom: 20px solid #fc0; border-bottom: 20px solid # fc0;
border-left: 20px solid blue; border-left: 20px bleu uni;
border-right: 20px solid green; border-right: 20px vert;

Right side of MultiColour square Le côté droit du carré multicolore

If we do not define a border, the other borders stop abruptly, and do not taper into the space that would be used by that border: Si nous ne définissons pas une frontière, les autres frontières s'arrêtent brusquement, et ne pas taper dans l'espace qui serait utilisé par cette frontière:

 font-size: 0px; line-height: 0%; width: 0px; border-top: 20px solid red; border-bottom: 20px solid #fc0; border-left: none; border-left: none; 
border-right: 20px solid green; border-right: 20px vert;

Top-right corner side of MultiColour square Latérale d'angle supérieur droit de carrés multicolores

We get a similar effect by removing two borders: Nous obtenons un effet similaire en enlevant les deux frontières:

 font-size: 0px; line-height: 0%; width: 0px; border-top: 20px solid red; border-bottom: none; border-bottom: none; 
border-right: 20px solid green; border-right: 20px vert;

One part of the top-right corner side of MultiColour square Une partie de la face en haut à droite du carré multicolore

By making one of the two remaining borders the same colour as the background, we are left with a sloping triangle: En faisant l'une des deux frontières reste la même couleur que le fond, on se retrouve avec un triangle en pente:

 font-size: 0px; line-height: 0%; width: 0px; border-top: 20px solid red; border-right: 20px solid #f6f6f6 # F6f6f6  ; ;

Or a longer version Ou une version plus longue

Increasing the width makes a longer bar - Note, Microsoft Internet Explorer 4 and 5 take the width as being the full length, including the sloping part, so they cannot display this example. Augmenter la largeur fait un plus long bar - Remarque, Microsoft Internet Explorer 4 et 5 prennent la largeur comme la longueur totale, y compris la partie en pente, de sorte qu'ils ne peuvent pas afficher cet exemple. Other browsers take the width as excluding the border, so not the sloping part: Les autres navigateurs prendre la largeur que l'exclusion de la frontière, afin de ne pas la partie en pente:

 font-size: 0px; line-height: 0%; width: 100px 100px  ; ;
border-top: 20px solid red; border-top: 20px rouge solide;
border-right: 20px solid #f6f6f6; border-right: 20px solid # f6f6f6;

Right side of MultiColour square with right border thicker Le côté droit du carré multicolore avec bordure droite épais

If we increase the width of the side border, we get a sharper triangle, which is made sharper by being longer: Si nous augmentons la largeur de la bordure latérale, on obtient une nette triangle, ce qui est fait en étant plus nette:

 font-size: 0px; line-height: 0%; width: 0px; border-top: 20px solid red; border-bottom: 20px solid #fc0; border-right: 40px 40px   solid green; solides vert;

Right side of MultiColour square with right border thicker and top and bottom borders thinner Le côté droit du carré multicolore avec bordure droite plus épaisse et bordures supérieures et inférieures minces

If we decrease the size of the top and bottom borders, we can make the triangle even narrower and sharper: Si nous réduisons la taille des bordures haut et en bas, nous pouvons faire le triangle encore plus étroite et plus pointue:

 font-size: 0px; line-height: 0%; width: 0px; border-top: 10px 10px   solid red; rouge fixe;
border-bottom: border-bottom: 10px 10px   solid #fc0; solid # fc0;
border-right: 40px solid green; border-right: 40px vert;

Various shapes Différentes formes

By using these various techniques, and setting some of the border colours to the same as the background, we can create a variety of different arrow-based shapes En utilisant ces différentes techniques, et la mise quelques-unes des couleurs de bordure à la même que l'arrière-plan, on peut créer une variété de différentes formes en fonction de flèche

Down arrow Flèche vers le bas

 font-size: 0px; line-height: 0%; width: 0px; border-top: 20px solid #77c; border-left: 10px solid #f6f6f6; border-right: 10px solid #f6f6f6;

Up arrow Flèche

 font-size: 0px; line-height: 0%; width: 0px; border-bottom: 20px solid #77c; border-left: 10px solid #f6f6f6; border-right: 10px solid #f6f6f6;

Left arrow Flèche vers la gauche

 font-size: 0px; line-height: 0%; width: 0px; border-top: 10px solid #f6f6f6; border-right: 20px solid #77c; border-bottom: 10px solid #f6f6f6;

Right arrow Flèche droite

 font-size: 0px; line-height: 0%; width: 0px; border-top: 10px solid #f6f6f6; border-left: 20px solid #77c; border-bottom: 10px solid #f6f6f6;

Hourglass Sablier

 font-size: 0px; line-height: 0%; width: 0px; border-top: 20px solid #77c; border-left: 10px solid #f6f6f6; border-right: 10px solid #f6f6f6; border-bottom: 20px solid #77c;

Sideways hourglass Sablier Sideways

 font-size: 0px; line-height: 0%; width: 0px; border-left: 20px solid #77c; border-top: 10px solid #f6f6f6; border-bottom: 10px solid #f6f6f6; border-right: 20px solid #77c;

Combining shapes Combinant des formes

The div elements can even detect mouse events, so you could use this as a game controller ... Les éléments div peut même détecter des événements de souris, vous pouvez donc l'utiliser comme un contrôleur de jeu ... just a thought. juste une pensée.
This could be done using CSS positioning, but I have used tables here Cela pourrait être fait en utilisant le positionnement CSS, mais j'ai utilisé les tableaux ici

General syntax La syntaxe générale

Fonts Polices

Colours and measurements Couleurs et mesures

Dependence La dépendance

Referencing external files Référencement des fichiers externes

Inline style Style inline

Positioning Positionnement

Media types Les types de médias

Browser problems Problèmes de navigateur

Margin Collapsing La fusion des marges

Using borders to produce angled shapes En utilisant les frontières pour produire des formes anguleuses

Printing Impression

Header Header

h2 { display: run-in; } h2 {display: run-in;}
Text Texte
:before { display: block; content: 'Some'; } ...would render in exactly the same way as the following document fragment and style sheet: : Before {display: block; contenu: "Certaines";} ... rendrait exactement de la même manière que le fragment de document suivant et de feuille de style:

Header Header

h2 { display: run-in; } h2 {display: run-in;}
Some Text Certaines parties du texte
span { display: block } Similarly, the following document fragment and style sheet: span {display: block} De même, le fragment de document suivant et de feuille de style:

Header Header

h2 { display: run-in; } h2:after { display: block; content: 'Thing'; } h2 {display: run-in;} H2: après {display: block; contenu: «Chose»;}
Text Texte
...would render in exactly the same way as the following document fragment and style sheet: ... Rendrait exactement de la même manière que le fragment de document suivant et de feuille de style:

Header Thing Chose tête

h2 { display: block; } span { display: block; } h2 {display: block;} span {display: block;}
Text Texte
How does one punch out the corner of an element and put something in the space created? Comment peut-on punch out dans le coin d'un élément et mettre quelque chose dans l'espace créé?

coma purported prétendu coma

The page you are viewing right now exists to show off what can be accomplished with pure CSS1 , and that's all. La page que vous consultez en ce moment existe pour montrer ce qui peut être accompli avec pures CSS1 , et c'est tout. This variant on complexspiral doesn't even use any CSS2 to accomplish its magic. Cette variante complexspiral n'a même pas utiliser n'importe quel CSS2 pour accomplir sa magie. Remember: as you look this demo over, there is no Javascript here, nor are any PNGs being used, nor do I employ any proprietary extensions to CSS or any other language. Rappelez-vous: que vous regardez cette démo plus, il n'ya pas de Javascript ici, ni aucun PNG utilisé, je ne emploient toutes les extensions propriétaires à CSS ou toute autre langue. It's all done using straight W3C-recommended markup and styling, all validated, plus a total of four (4) images. Tout cela est fait en utilisant directement recommandé par le W3C balisage et le stylisme, tous validés, ainsi qu'un total de quatre (4) des images.
Unfortunately, not every browser supports all of CSS1, and only those browsers which fully and completely support CSS1 will get this right. Malheureusement, pas tous les navigateur prend en charge l'ensemble des CSS1, et seuls ceux dont les navigateurs entièrement et complètement le soutien CSS1 va obtenir ce droit. Despite some claims to the contrary, IE6/Win's rendering of this page is not correct, as it (as well as some other browsers) doesn't correctly support background-attachment: fixed for any element other than the body . Malgré certaines affirmations contraires, rendant IE6/Win 's de cette page n'est pas correct, car il (ainsi que quelques autres navigateurs) ne pas correctement en charge background-attachment: fixed pour tout élément autre que le body . That makes it impossible to pull off the intended effect. C'est pourquoi il est impossible de retirer l'effet escompté. Other browsers may or may not get the effect right. D'autres navigateurs peuvent ou ne peuvent pas obtenir le droit en vigueur.

Hands-on: Things to Examine Hands-on: Choses à Examiner

Before you start, make sure you're viewing this page in one of the browsers mentioned above. Avant de commencer, assurez-vous que vous affichez cette page dans l'un des navigateurs mentionnés ci-dessus. Otherwise the descriptions to follow won't match what you see. Sinon, les descriptions qui suivent ne correspondent pas à ce que vous voyez.
The first, easiest thing to do is scroll the page vertically. La première, la plus simple chose à faire est faire défiler la page verticalement. Make sure you scroll all the way to the very end of the page and back. Assurez-vous que vous faites défiler tout le chemin jusqu'à la fin de la page et le dos. Notice how the various areas with colored backgrounds also appear to distort the background image as if through mottled glass. Remarquez comment les différents domaines avec des fonds de couleur apparaissent également de fausser l'image de fond comme si à travers tachetée de verre. Try changing the text size and notice how the compositing effect remains consistent. Essayez de changer la taille du texte et remarquez comment l'effet de composition reste constante. Then make your browser window really narrow and scroll horizontally. Ensuite, faire la fenêtre de votre navigateur vraiment étroites et un défilement horizontal. Again, everything should remain seamless and consistent. Encore une fois, tout doit rester transparente et cohérente.
The demonstrated effect, that of having various elements backed with translucent rippled glass of varying hues, is only possible using fixed-attachment backgrounds in CSS. L'effet démontré, que d'avoir soutenu avec divers éléments translucides en verre ondulé de teintes différentes, n'est possible qu'en utilisant fixe de fixation des connaissances en CSS. (Okay, maybe it could be done in Flash; I don't know.) I don't think it's even possible with IE's proprietary filters, but even if this effect is possible with filters, I could easily enough devise one that isn't. (Ok, peut-être il pourrait être fait en Flash;. Je ne sais pas) Je ne pense pas qu'il est même possible avec des filtres propriétaires d'IE, mais même si cet effet est possible avec des filtres, j'ai pu assez facilement imaginer un qui n ' t.

I missed the original complexspiral demo-- how does this work?!? J'ai raté la démo originale complexspiral - comment cela fonctionne?!?

Glad you asked. Bonne question. The effect demonstrated here is achieved by using fixed background images, nothing more. L'effet démontré ici est réalisé en utilisant les images de fond fixe, rien de plus. For example, the main-content area (the blue part here) uses the following styles for the default spiral-shell background: Par exemple, la zone principale de contenu (la partie bleue ici) utilise les styles suivants pour le défaut de spirale coquille de fond:

div#content {background: white url(glassy-ripple.jpg) 0 0 no-repeat fixed;} div # contenu {background: url blanc (vitreux ripple.jpg) 0 0 no-repeat fixe;}

The above is equivalent to these styles: Le dessus est équivalente à ces styles:

div#content { div # contenu {
background-color: white; background-color: white;
background-image: url(glassy-ripple.jpg); background-image: url (vitreux ripple.jpg);
background-position: 0 0; background-position: 0 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-attachment: fixed; background-attachment: fixed;
} }

The effect of these longer rules is exactly the same; they're just split out into individual background properties for more detailed consideration by you, gentle reader. L'effet de ces règles plus est exactement le même; elles sont tout simplement divisé en plusieurs propriétés de fond individuelles pour un examen plus détaillé par vous, cher lecteur.
First, check out the rippled-shell image found here: url(glassy-ripple.jpg) . Tout d'abord, vérifier l'image ondulée coquille trouvée ici: url (vitreux ripple.jpg) . Then come back to this page and I'll continue with the explanation. Revenez ensuite à cette page et je vais continuer avec l'explication. All done? Tout est fait? Great. Grand.
According to CSS, any background image that is "fixed" using background-attachment: fixed; is fixed with respect to the viewport -- not the element with which the image is associated. Selon le CSS, toute image de fond qui est "fixée" en utilisant background-attachment: fixed; est fixe par rapport à la fenêtre - et non l'élément avec lequel l'image est associée. So I set the rippled-shell background image to be aligned with the top left corner of the browser window (the viewport) with the values given for background-position . J'ai donc mis l'image de fond ondulé-shell pour être aligné avec le coin supérieur gauche de la fenêtre du navigateur (la fenêtre) avec les valeurs données pour background-position . However, the image will only be visible wherever is intersects with the element to which it's been assigned. Cependant, l'image ne sera visible que là où se croise avec l'élément auquel il a été assigné. Therefore, even though the top left corner of the rippled-shell image is aligned with the top left corner of the viewport, we can only see it wherever it intersects with a div that has an id with a value of content (which, again, happens to be the one containing this text). Par conséquent, même si le coin supérieur gauche de l'image ondulée-coquille est aligné avec le coin supérieur gauche de la fenêtre, nous ne pouvons le voir partout où il croise une div qui a un id avec une valeur de content (ce qui, là encore, se trouve être celui qui contient ce texte).
So I set a fixed background for the BODY , the content DIV , and H1 and H2 elements scattered through the document. J'ai donc mis un fond fixe pour la BODY , le contenu DIV , et H1 et H2 éléments dispersés à travers le document. In any given case of an element's display, we see whatever part of the associated background image intersects with the element. En tout cas donné de l'affichage d'un élément, nous voyons une partie quelconque de l'image de fond associée intersecte avec l'élément. The rest of the background image remains hidden. Le reste de l'image de fond reste caché.
And that's how it works. Et voilà comment cela fonctionne.

I'm not seeing the compositing! Je ne vois pas le compositing!

Then I'm willing to bet that you're using Internet Explorer for Windows (any version), or possibly Opera (version 6 or earlier). Ensuite, je suis prêt à parier que vous utilisez Internet Explorer pour Windows (toutes versions), ou éventuellement Opera (version 6 ou version antérieure). Neither of these browsers fully support background-attachment: fixed for elements other than body . Aucune de ces navigateurs soutenir pleinement background-attachment: fixed pour des éléments autres que body . In the case of both, images are fixed with respect to the elements that contain them, not the browser window, which is not what CSS1 defines background-attachment: fixed to mean, although browsers are allowed to ignore fixed if they stick to CSS1 (CSS2 requires its implementation for conformance). Dans le cas de deux, les images sont fixes par rapport à des éléments qui les contiennent, et non pas la fenêtre du navigateur, ce qui n'est pas CSS1 définit background-attachment: fixed pour signifier, bien que les navigateurs sont autorisés à ignorer fixed s'ils s'en tenir à CSS1 ( CSS2 nécessite sa mise en œuvre pour la conformité). And yes, this page uses a strict DOCTYPE, so IE6 is in " strict mode ." Et oui, cette page utilise un DOCTYPE strict, donc IE6 est en « mode strict ». I guess when Microsoft claims 100% CSS1 compliance , they're referring to the CSS1 core (a reduced subset of CSS1) instead of the entirety of the CSS1 specification . Je suppose que quand Microsoft revendique 100% CSS1 respect , ils se réfèrent au cœur CSS1 (un sous-ensemble réduit de CSS1) au lieu de l'intégralité de la spécification CSS1 . It tends to make me wonder how limited or flawed their "full support" is for other key open specifications, like HTML and DOM. Elle tend à me faire demander comment limitée ou imparfaite de leur "plein soutien" est pour les autres clés des spécifications ouvertes, comme le HTML et DOM.

Image credits Crédits photos

Nautilus shell: scanned by and copyright Eric A. Meyer Nautilus shell: balayé par le droit d'auteur et de Eric A. Meyer

Jump to Sauter vers

Answer: you don't, at least not structurally. Réponse: vous n'avez pas, du moins pas structurellement. But the appearance can be achieved very easily just by using floated elements and, when necessary, some tiny negative margins. Mais l'aspect peut être atteint très facilement en utilisant simplement les éléments flottants et, si nécessaire, certaines marges minuscules négative. In this example, I've wrapped the "Q" in a div of its own and then floated the div over. Dans cet exemple, j'ai enroulé le "Q" dans un div de son propre puis lancé l' div cours. Then I give the float some nice padding and margins, and center the character. Puis-je donner le flotteur certains types de remplissage et les marges de Nice, et le centre du personnage. Finally, I set thick white borders on the float, which matches nicely with the white document background-- but only the right and bottom borders are made thick. Enfin, j'ai mis des bordures blanches épaisses sur le flotteur, ce qui correspond bien avec le fond du document blanc - mais uniquement les bordures droite et en bas sont faites d'épaisseur. The top and left borders are set to zero. Les bordures du haut et de gauche sont mis à zéro. To wit: A savoir:

  div#punch {float: left; font-size: 500%; width: 1.2em; div # poinçon {float: left; font-size: 500%; largeur: 1.2em;
text-align: center; padding: 0.1em 0.1em 0; text-align: center; padding: 0.1em 0.1em 0;
background: #568; color: white; border: solid white 1px; background: # 568; couleur: blanc; border: solid 1px blanche;
border-width: 0 0.2em 0.2em 0; margin: 0 0.5em 0.2em 0;} border-width: 0.2em 0.2em 0 0; margin: 0 0.5em 0.2em 0;}

It all adds up to the appearance of a block that's had a corner punched out and replaced, and the text in the block reflowed to go around the punchout. Tout cela s'additionne à l'apparition d'un bloc qui avait un coin découpés et remplacés, et le texte dans le bloc réorganisé afin de faire le tour du punch out. And, in a sense, that's exactly what happened. Et, en un sens, c'est exactement ce qui s'est passé. But what if I want to put a border around the main block of text? Mais que faire si je veux mettre une bordure autour du principal bloc de texte? How do I keep it from encircling my punched-out corner? Comment puis-je l'empêcher de encerclant mon emporte-pièce coin? Even worse, how do I get that border to run along the edge of the punchout? Pire encore, comment puis-je obtenir de cette frontière pour courir le long du bord de la PunchOut?

Boxpunch Boxpunch

So we can do it after all! Ainsi, nous pouvons le faire après tout! (Assuming we aren't using IE5.x/Win or IE6/Win, that is, which isn't able to keep up. If you want to see the variant that does work in IE/Win, go ahead .) Notice how the border of the main div is bent out of a rectangle so that it runs inside the floated element. (En supposant que nous ne sommes pas en utilisant IE5.x/Win ou IE6/Win, qui est, ce qui n'est pas en mesure de suivre. Si vous voulez voir la variante qui fonctionne dans IE / Win, aller de l'avant .) Remarquez comment la frontière de la principale div est plié d'un rectangle de sorte qu'il s'exécute à l'intérieur de l'élément flottant. Okay, I'm lying. Okay, je mens. That isn't what's really happening. Ce n'est pas ce qui se passe réellement. Instead, I set one-pixel black borders on the right and bottom edges of the float, and no border at all on the top and left edges. Au lieu de cela, j'ai mis un pixel des bordures noires sur les bords droit et inférieur du flotteur, et aucune frontière à tous sur les bords haut et gauche. Then the float is pulled one pixel up and one pixel to the left, which is accomplished by setting -1px margins on those sides. Ensuite, le flotteur est tiré d'un pixel et d'un pixel vers la gauche, qui est accompli par la mise -1px marges sur ces côtés. This causes the float to overlap the border set on the main div , thus covering up the black border with the white background of the float. Cela provoque le flotteur se chevauchent la frontière situé sur la principale div , couvrant ainsi jusqu'à la bordure noire avec le fond blanc du flotteur. The code looks like this: Le code ressemble à ceci:

  div#main2 {border: 1px solid black;} div # main2 {border: 1px solid black;}
div#punch2 {float: left; width: 100px; height: 70px; div # punch2 {float: left; width: 100px; height: 70px;
text-align: center; background: white; color: black; text-align: center; fond: blanc; color: black;
border: solid black 1px; border-width: 0 1px 1px 0; border: solid 1px black; border-width: 1px 1px 0 0;
padding: 0 10px 5px 0; margin: -1px 25px 10px -1px;} padding: 0 10px 5px 0; margin: 25px 10px-1px 1px-;}
div#punch2 img {height: 70px; width: 100px;} div # punch2 img {height: 70px; width: 100px;}

As in the curvelicious demo , the h1 at the top is simply styled as normal, and its borders and background "slide under" the floated element. Comme dans la démo curvelicious , le h1 en haut est tout simplement de style comme d'habitude, et ses frontières et de fond "glisser sous« l'élément flottant. This is expected behavior in CSS2. Ce comportement est normal dans CSS2. If you were to set a left border on the h1 , you'd have to make it at least 111px wide before it could be seen at all! Si vous deviez créer une bordure à gauche sur le h1 , vous auriez à faire au moins 111px de largeur avant on voyait tout! Well, unless it become so tall that it was taller than the float. Eh bien, si elle devient si grand qu'il était plus grand que le flotteur. Then you'd be able to see it below the float. Ensuite, vous seriez capable de le voir en dessous du flotteur. If your browser supports text zooming, try increasing the text size until the h1 is taller than the float. Si votre navigateur supporte zoomer sur du texte, essayez d'augmenter la taille du texte jusqu'à ce que le h1 est plus grand que le flotteur. You should see what I mean then. Vous devriez voir ce que je veux dire alors.

Like this text? Comme ce texte? It can be yours for just $19.99! Il peut être le vôtre pour seulement 19,99 $! But wait! Mais attendez! There's more! Il ya plus! If you call in the next ten minutes, we'll throw in a copy of Amaya absolutely free! Si vous appelez dans les dix prochaines minutes, nous allons jeter un exemplaire d'Amaya absolument gratuitement! Don't delay-- act now! Ne tardez pas - agir maintenant!

Again with the punching Encore une fois avec le poing

Of course, if one is floating elements, then one can float anything, not just images. Bien sûr, si l'on est flottant éléments, alors on peut flotter quelque chose, pas seulement des images. In this case I've floated a div , but it could have been any text element. Dans ce cas, j'ai flotté une div , mais ça aurait pu être n'importe quel élément de texte. The borders and margins are set up just like last time. Les frontières et les marges sont mis en place comme la dernière fois. Think of it-- you could put a small navigation panel in that float, or anything else that takes your fancy. Pensez-y - vous pourriez mettre un panneau de navigation petits qui flottent, ou toute autre chose qui prend votre fantaisie. A quotation, perhaps? Une citation, peut-être? How about a small table of icons or decorative images? Que diriez-vous d'une petite table d'icônes ou des images décoratives? You could just float the table itself and be done. Vous pouvez tout simplement laisser flotter la table elle-même et être faite. Pretty cool, eh? Plutôt cool, hein?
For that matter, why restrict yourself to floating things into the corner of the box? Pour cette question, pourquoi vous limiter à des choses flottantes dans le coin de la boîte? How about going straight to the right or left from within the block? Que diriez-vous tout droit vers la droite ou la gauche de l'intérieur du bloc?

"Better to stick to what's needed." «Mieux vaut s'en tenir à ce qui est nécessaire."

It's the same basic principle as before, only this time we need to draw three of the borders and only pull the float one pixel to the left. C'est le même principe de base comme avant, sauf que cette fois nous avons besoin de tirer trois des frontières et ne tirez le flotteur d'un pixel vers la gauche. We could keep pulling it one pixel upward as well, but that's no necessary here and could (in theory) lead to complications. Nous pourrions garder le tirant d'un pixel vers le haut aussi bien, mais ce n'est pas ici nécessaire et pourrait (en théorie) d'entraîner des complications. Better to stick to what's needed. Mieux vaut s'en tenir à ce qui est nécessaire. Again, any element could be floated, so you could float links for further reading, more decorative images like folder tabs, a list of short ideas or points that are related to the main text, a table of figures, or the familiar "pull quote" style of taking a short phrase in the text and repeating it in larger text. Encore une fois, aucun élément ne pouvait être flotté, vous pouvez donc flotter liens pour davantage de lecture, des images plus décoratifs comme les onglets dossier, une liste d'idées courtes ou des points qui sont liés au texte principal, un tableau de chiffres, ou tirez la citation familière " «style de prendre une courte phrase dans le texte et de le répéter dans les grands textes. Like we see here. Comme nous le voyons ici.

  div#punch3b {float: right; width: 25%; text-align: left; div # punch3b {float: right; largeur: 25%; text-align: left;
font-size: 140%; font-weight: bold; font-style: italic; font-size: 140%; font-weight: bold; font-style: italic;
padding: 1em; text-indent: -0.5em; background: white; padding: 1em; text-indent:-0.5em; fond: blanc;
color: black; border: solid black 1px; color: black; border: solid 1px noir;
border-width: 1px 0 1px 1px; margin: 0.2em -1px 0.2em 0.5em;} border-width: 1px 1px 1px 0; margin: 0.2em 0.5em 0.2em-1px;}

Note that, due to rounding errors, Mozilla (and thus Netscape 6.x) may not move a right-floated element over as far as it should be. Notez que, en raison d'erreurs d'arrondi, Mozilla (et donc Netscape 6.x) ne peut pas déplacer un élément de droit flottait sur mesure comme il se doit. If you resize your browser window enough times, you'll see a black border appear to the right of the pull quote. Si vous redimensionnez vos temps assez fenêtre du navigateur, vous verrez une bordure noire apparaît à la droite de la citation pull. That's because the float is one pixel too far to the left, and the main div 's border becomes visible. C'est parce que le flotteur est un pixel trop loin vers la gauche, et la principale div frontière de l 'devient visible. Hopefully they'll fix that eventually. Espérons qu'ils fixent que finalement.
There are any number of ways this concept could be extended, really. Il ya plusieurs façons de ce concept pourrait être étendu, vraiment. The only limit is your imagination! La seule limite est votre imagination! And negative margins don't have to be restricted to floats, either. Et des marges négatives ne doivent pas être limitées à des flotteurs, soit. Consider this fairly irregular-looking page and how it's been created. Considérez cette page assez irrégulier prospectifs et comment il a été créé. Some floats, some normal-flow elements, a few one-pixel negative margins, and you've got some twisty layouts! Certains chars, certains flux normal-éléments, quelques-uns d'un pixel des marges négatives, et vous avez quelques configurations sinueuses! I just hope Wired doesn't sue me for stylistic theft... J'espère juste que Wired ne pas me poursuivre pour vol stylistiques ...
...would render in exactly the same way as the following document fragment and style sheet: Header Text How does one punch out the corner of an element and put something in the space created? ... Rendrait exactement de la même manière que le fragment de document suivant et de feuille de style: Texte du Header Comment peut-on punch out dans le coin d'un élément et mettre quelque chose dans l'espace créé? coma purported The page you are viewing right now exists to show off what can be accomplished with pure CSS1, and that's all. Le prétendu coma page que vous consultez en ce moment existe pour montrer ce qui peut être accompli avec CSS1 pur, et c'est tout. This variant on complexspiral doesn't even use any CSS2 to accomplish its magic. Cette variante complexspiral n'a même pas utiliser n'importe quel CSS2 pour accomplir sa magie. Remember: as you look this demo over, there is no Javascript here, nor are any PNGs being used, nor do I employ any proprietary extensions to CSS or any other language. Rappelez-vous: que vous regardez cette démo plus, il n'ya pas de Javascript ici, ni aucun PNG utilisé, je ne emploient toutes les extensions propriétaires à CSS ou toute autre langue. It's all done using straight W3C-recommended markup and styling, all validated, plus a total of four (4) images. Tout cela est fait en utilisant directement recommandé par le W3C balisage et le stylisme, tous validés, ainsi qu'un total de quatre (4) des images. Unfortunately, not every browser supports all of CSS1, and only those browsers which fully and completely support CSS1 will get this right. Malheureusement, pas tous les navigateur prend en charge l'ensemble des CSS1, et seuls ceux dont les navigateurs entièrement et complètement le soutien CSS1 va obtenir ce droit. Despite some claims to the contrary, IE6/Win's rendering of this page is not correct, as it (as well as some other browsers) doesn't correctly support background-attachment: fixed for any element other than the body. Malgré certaines affirmations contraires, rendant IE6/Win 's de cette page n'est pas correct, car il (ainsi que quelques autres navigateurs) ne pas correctement en charge background-attachment: fixe pour tout autre élément que le corps. That makes it impossible to pull off the intended effect. C'est pourquoi il est impossible de retirer l'effet escompté. Other browsers may or may not get the effect right. D'autres navigateurs peuvent ou ne peuvent pas obtenir le droit en vigueur. Hands-on: Things to Examine Before you start, make sure you're viewing this page in one of the browsers mentioned above. Hands-on: les choses à examiner avant de commencer, assurez-vous que vous affichez cette page dans l'un des navigateurs mentionnés ci-dessus. Otherwise the descriptions to follow won't match what you see. Sinon, les descriptions qui suivent ne correspondent pas à ce que vous voyez. The first, easiest thing to do is scroll the page vertically. La première, la plus simple chose à faire est faire défiler la page verticalement. Make sure you scroll all the way to the very end of the page and back. Assurez-vous que vous faites défiler tout le chemin jusqu'à la fin de la page et le dos. Notice how the various areas with colored backgrounds also appear to distort the background image as if through mottled glass. Remarquez comment les différents domaines avec des fonds de couleur apparaissent également de fausser l'image de fond comme si à travers tachetée de verre. Try changing the text size and notice how the compositing effect remains consistent. Essayez de changer la taille du texte et remarquez comment l'effet de composition reste constante. Then make your browser window really narrow and scroll horizontally. Ensuite, faire la fenêtre de votre navigateur vraiment étroites et un défilement horizontal. Again, everything should remain seamless and consistent. Encore une fois, tout doit rester transparente et cohérente. The demonstrated effect, that of having various elements backed with translucent rippled glass of varying hues, is only possible using fixed-attachment backgrounds in CSS. L'effet démontré, que d'avoir soutenu avec divers éléments translucides en verre ondulé de teintes différentes, n'est possible qu'en utilisant fixe de fixation des connaissances en CSS. (Okay, maybe it could be done in Flash; I don't know.) I don't think it's even possible with IE's proprietary filters, but even if this effect is possible with filters, I could easily enough devise one that isn't. (Ok, peut-être il pourrait être fait en Flash;. Je ne sais pas) Je ne pense pas qu'il est même possible avec des filtres propriétaires d'IE, mais même si cet effet est possible avec des filtres, j'ai pu assez facilement imaginer un qui n ' t. I missed the original complexspiral demo-- how does this work?!? J'ai raté la démo originale complexspiral - comment cela fonctionne?!? Glad you asked. Bonne question. The effect demonstrated here is achieved by using fixed background images, nothing more. L'effet démontré ici est réalisé en utilisant les images de fond fixe, rien de plus. For example, the main-content area (the blue part here) uses the following styles for the default spiral-shell background: Previous Par exemple, la zone principale de contenu (la partie bleue ici) utilise les styles suivants pour le défaut de spirale coquille de fond: Précédente

How about this curve, it is created using the sloping edge technique with stacked floats of various sizes.

The length of the div is increased with each float, and the slope is changed by manipulating the thicknesses of the visible bottom and invisible right borders.