YouTube Captions, Valid CSS!!! (See source for unbelievable CODE!) Call Eric Meyer!
YouTube Captions, Valid CSS!!! (See source for unbelievable CODE!)
And while i invented this two years ago...(check an older video if you don't believe), I never copied and pasted it into an edit field...but tonight, as I celebrate Halloween early, I thought I'd give it a go...and Holy Mother of Eric Meyer, THIS MOTHERFUCKER CAN HUNT!!! I don't get it at all because it's ridden with time codes and uncommented comments by the incredible CSS3 guru whom you know for his Normalizer and whom I know for mashing up his 'quote bubble speech balloons into incredible confetti...', i think his name is Nicholas, but i'm not big on details..., but anyway, nevertheless, his was the first file I had in my Docs when I was doing another YouTube Transcript (Captions)--helping out the accessibility cause (because Eric Meyer can't be bothered to transcribe his CSS posts onto YouTube [whatsoever--price of Reset Fame, i guess])... *this should connect to beginnning of runon at top ...and LO AND BEHOLD...(as Edgar Allen Poe said FIRST and Best and then Nic Roeg made my favorite film from it)! EUREKA!
-
if you go to YouTube to watch the CSS Scroll by, make sure you hit the 'caption' 'annotation' icon that looks like what YouTube thinks that should look like (under the video)!
CSS tutorial - Using borders to produce angled shapes
0:00:28.920 0:00:29.170Using borders to produce angled shapes
This 0:00:28.920 0:00:29.170 is a suppliment to the tutorial, and is here only for illustrative purposes. It is not 0:00:28.920 0:00:29.170 part of the main tutorial.
0:00:28.930 0:00:29.180These examples will not work in Netscape 4 or WebTV, because they do not allow you 0:00:28.930 0:00:29.180 to define individual borders, or Escape because it does not handle borders 0:00:28.940 0:00:29.190 correctly. Internet explorer 4 and 5 may have trouble with some of the 0:00:28.940 0:00:29.190 examples due to their problems with the box model.
0:00:28.940 0:00:29.190Note that these examples are based on you using the default 'Moosified' style for this 0:00:28.949 0:00:29.199 page, where the background colour of the body is #f6f6f6. If you use 0:00:28.949 0:00:29.199 the other styles, the shapes may not work correctly.
0:00:28.949 0:00:29.199This might look like this:
0:00:28.960 0:00:29.210body { styles go in here }In this case, the 'body' is known as the selector. This can get more complicated, 0:00:28.960 0:00:29.210 and can include many different selectors.
0:00:28.960 0:00:29.210For several elements to use the same style, you can separate them with commas:
0:00:28.970 0:00:29.220p, div, span { styles go in here }The syntax for the styles follows this pattern:
0:00:28.970 0:00:29.220name_of_style_attribute: value;
You can include as many styles as you want inside the { and } curly braces. Occasionally, 0:00:28.980 0:00:29.230 there may be more than one value for a single style, for example with the border attribute:
0:00:28.990 0:00:29.240border: 3px double red;
To define styles that should only target elements with a certain class, put a fullstop 0:00:28.990 0:00:29.240 then the name of the class, after the element. This might look like:
0:00:29.000 0:00:29.250p.nameofclass { styles go in here }This would also need the class to be written inside the HTML 'p' element tags 0:00:29.000 0:00:29.250 to which it refers:
0:00:29.000 0:00:29.250<p class="nameofclass">
If we use the syntax without specifying an element name, then every element of class 0:00:29.010 0:00:29.260 'nameofclass', not just p tags, will use this style:
0:00:29.010 0:00:29.260.nameofclass { styles go in here }There are also some pseudo-classes such as :hover. This particular one 0:00:29.020 0:00:29.270 will only work in some browsers (most notably, Internet Explorer 6-) with 0:00:29.020 0:00:29.270 'a' elements. It will be applied when the mouse hovers over the element.
0:00:29.029 0:00:29.279a:hover { color: red; }The pseudo-classes can be used along with classes, like this:
0:00:29.029 0:00:29.279a.nameofclass:hover { color: red; }One of the most powerful uses of this pseudo class is to produce menus 0:00:29.039 0:00:29.289 written only using pure CSS.
0:00:29.039 0:00:29.289If an element has been defined with an ID then it can be given its own 0:00:29.039 0:00:29.289 style by using the ID selector. Try to restrict 0:00:29.050 0:00:29.300 this to cases where it is actually needed:
0:00:29.050 0:00:29.300#id { color: red; font-weight: bold; }You can also target the specific element type, combined with the ID selector:
0:00:29.050 0:00:29.300element_type#id { color: red; font-weight: bold; }Now for some clever stuff. It is possible to target an element based on what its parent 0:00:29.060 0:00:29.310 elements are, by writing the name of the parent, followed by a space, followed 0:00:29.070 0:00:29.320 by the name of the element you want to target. Note that the parent does 0:00:29.070 0:00:29.320 not have to be a direct parent. It could be anywhere in the chain of ancestors. 0:00:29.080 0:00:29.330 For example, if you want to assign a style to li elements where one of their 0:00:29.080 0:00:29.330 parents is a ul whose parents include a td whose parents 0:00:29.080 0:00:29.330 include a tr whose parents include a table whose parents include 0:00:29.090 0:00:29.340 the body, you can write this:
0:00:29.090 0:00:29.340body table tr td ul li { styles go in here }If you also want to assign that style to p elements, you can combine this 0:00:29.100 0:00:29.350 with the comma, as shown earlier:
0:00:29.100 0:00:29.350body table tr td ul li, { styles go in here }Or mix that up however you like. You can also combine it with class selectors. For 0:00:29.110 0:00:29.360 example, this will match all li elements whose parents include 0:00:29.110 0:00:29.360 a td of class fish:
0:00:29.110 0:00:29.360td.fish li { styles go in here }If at any time you define two or more conflicting styles, the more specific one should be used 0:00:29.119 0:00:29.369 by the browser. If you use an inline style, that should override 0:00:29.130 0:00:29.380 other styles. There are exceptions to these rules, but I will not 0:00:29.130 0:00:29.380 go into those here.
0:00:29.130 0:00:29.380All styles will have a default value, and that may be different for different elements 0:00:29.140 0:00:29.390 (for example, the border style has a default value 0:00:29.140 0:00:29.390 of 'none', but most browsers use something like '2px groove black' 0:00:29.140 0:00:29.390 as the default border for a fieldset). If you have styled an element with a generic 0:00:29.150 0:00:29.400 style, and you want to reset it to its default style for that specific element, 0:00:29.150 0:00:29.400 you will need to manually set it back to its default value. For example, you could set 0:00:29.160 0:00:29.410 all paragraphs to have a 1 pixel border, then set paragraphs not to have a border if they 0:00:29.160 0:00:29.410 are inside a div:
0:00:29.160 0:00:29.410p { border: 1px solid black; } div { border: none; }Some styles can be represented in a number of different ways. For example, the border 0:00:29.170 0:00:29.420 style can be used to apply a border to all sides of an element:
0:00:29.180 0:00:29.430p { border: 1px solid black; }It is also possible to specify one border at a time:
0:00:29.180 0:00:29.430p { border-top: 1px solid black; 0:00:29.180 0:00:29.430 border-right: 1px solid green; border-bottom: 1px solid black; 0:00:29.190 0:00:29.440 border-left: 3em solid black; }It is also possible to specify the thickness, colour, and style separately. Each one can 0:00:29.190 0:00:29.440 accept 1, 2, 3 or 4 values. If one value is specified, all sides will 0:00:29.199 0:00:29.449 use it. If you specify two, the first will be used by top and bottom, and the 0:00:29.199 0:00:29.449 second will be used by right and left. If you specify three, the first will be used 0:00:29.210 0:00:29.460 by top, the second will be used by right and left, and the third will be used 0:00:29.210 0:00:29.460 by bottom. If you specify four, they will be used by top, right, bottom and 0:00:29.220 0:00:29.470 left respectively:
0:00:29.220 0:00:29.470p { border-width: 1px 2px 3px; 0:00:29.220 0:00:29.470 border-style: solid solid solid double; border-color: black green; 0:00:29.220 0:00:29.470 }And this can be done for one side at a time as well. This is generally most useful 0:00:29.230 0:00:29.480 to specify a normal style, then override it for just one side:
0:00:29.230 0:00:29.480p { border: 1px solid black; 0:00:29.230 0:00:29.480 border-right-color: green; }These styles are all considered to be as specific as each other, so if you specify 0:00:29.240 0:00:29.490 the border-right style and then the border style, the 0:00:29.240 0:00:29.490 right border will be styled according to what you define in the 0:00:29.250 0:00:29.500 border style.
Last modified: 4 September 0:00:29.250 0:00:29.500 2008
If all four borders are defined as being 0:00:29.260 0:00:29.510 thick, they should be tapered into each other:
0:00:29.260 0:00:29.510border-top: 20px solid red; border-bottom: 20px solid #fc0; 0:00:29.260 0:00:29.510 border-left: 20px solid blue; border-right: 20px solid green;
MultiColour Square
All of these examples are done using a 0:00:29.270 0:00:29.520 <div> element, with no contents:
<div style="style declarations"></div>
The lack of contents makes all points sharp. Some browsers still leave space for the non-existent 0:00:29.279 0:00:29.529 contents, so we can remove that space by using the following 0:00:29.279 0:00:29.529 combination of styles:
0:00:29.279 0:00:29.529font-size: 0px; line-height: 0%; width: 0px; 0:00:29.289 0:00:29.539 border-top: 20px solid red; border-bottom: 20px solid #fc0; 0:00:29.289 0:00:29.539 border-left: 20px solid blue; border-right: 20px solid green;
Right side of MultiColour square
0:00:29.300 0:00:29.550If we do not define a border, the other borders stop abruptly, and do not taper into 0:00:29.300 0:00:29.550 the space that would be used by that border:
font-size: 0px; line-height: 0%; 0:00:29.310 0:00:29.560 width: 0px; border-top: 20px solid red; 0:00:29.310 0:00:29.560 border-bottom: 20px solid #fc0; border-left: none; 0:00:29.310 0:00:29.560 border-right: 20px solid green;
Top-right corner side of MultiColour square
0:00:29.320 0:00:29.570We get a similar effect by removing two 0:00:29.320 0:00:29.570 borders:
font-size: 0px; line-height: 0%; 0:00:29.320 0:00:29.570 width: 0px; border-top: 20px solid red; 0:00:29.330 0:00:29.580 border-bottom: none; border-right: 20px solid green;
One part of the top-right corner side of MultiColour square
0:00:29.330 0:00:29.580By making one of the two remaining borders 0:00:29.340 0:00:29.590 the same colour as the background, we are left with a sloping triangle:
0:00:29.340 0:00:29.590font-size: 0px; line-height: 0%; width: 0px; 0:00:29.340 0:00:29.590 border-top: 20px solid red; border-right: 20px solid #f6f6f6;
Or a longer version
0:00:29.350 0:00:29.600Increasing the width makes a longer bar - Note, Microsoft Internet Explorer 4 and 0:00:29.360 0:00:29.610 5 take the width as being the full length, including the sloping part, so they cannot 0:00:29.360 0:00:29.610 display this example. Other browsers take the width as excluding the border, so not 0:00:29.369 0:00:29.619 the sloping part:
font-size: 0px; line-height: 0%; 0:00:29.369 0:00:29.619 width: 100px; border-top: 20px solid red; 0:00:29.369 0:00:29.619 border-right: 20px solid #f6f6f6;
Right side of MultiColour square with right border thicker
0:00:29.369 0:00:29.619If we increase the width of the side border, 0:00:29.380 0:00:29.630 we get a sharper triangle, which is made sharper by being longer:
0:00:29.390 0:00:29.640font-size: 0px; line-height: 0%; width: 0px; 0:00:29.390 0:00:29.640 border-top: 20px solid red; border-bottom: 20px solid #fc0; 0:00:29.390 0:00:29.640 border-right: 40px solid green;
Right side of MultiColour square with right border thicker and top and bottom borders 0:00:29.400 0:00:29.650 thinner
0:00:29.400 0:00:29.650If we decrease the size of the top and bottom borders, we can make the triangle even 0:00:29.410 0:00:29.660 narrower and sharper:
font-size: 0px; line-height: 0%; 0:00:29.410 0:00:29.660 width: 0px; border-top: 10px solid red; 0:00:29.410 0:00:29.660 border-bottom: 10px solid #fc0; border-right: 40px solid green;
Various shapes
0:00:29.410 0:00:29.660By using these various techniques, and setting some of the border colours to the 0:00:29.420 0:00:29.670 same as the background, we can create a variety of different arrow-based shapes
0:00:29.420 0:00:29.670Down arrow
font-size: 0px; line-height: 0%; 0:00:29.430 0:00:29.680 width: 0px; border-top: 20px solid #77c; 0:00:29.430 0:00:29.680 border-left: 10px solid #f6f6f6; border-right: 10px solid #f6f6f6;
Up arrow
font-size: 0px; line-height: 0%; 0:00:29.440 0:00:29.690 width: 0px; border-bottom: 20px solid #77c; 0:00:29.440 0:00:29.690 border-left: 10px solid #f6f6f6; border-right: 10px solid #f6f6f6;
Left arrow
0:00:29.449 0:00:29.699 0:00:29.449 0:00:29.699font-size: 0px; line-height: 0%; width: 0px; 0:00:29.449 0:00:29.699 border-top: 10px solid #f6f6f6; border-right: 20px solid #77c; 0:00:29.460 0:00:29.710 border-bottom: 10px solid #f6f6f6;
Right arrow
font-size: 0px; line-height: 0%; 0:00:29.460 0:00:29.710 width: 0px; border-top: 10px solid #f6f6f6; 0:00:29.470 0:00:29.720 border-left: 20px solid #77c; border-bottom: 10px solid #f6f6f6;
Hourglass
font-size: 0px; line-height: 0%; 0:00:29.480 0:00:29.730 width: 0px; border-top: 20px solid #77c; 0:00:29.480 0:00:29.730 border-left: 10px solid #f6f6f6; border-right: 10px solid #f6f6f6; 0:00:29.480 0:00:29.730 border-bottom: 20px solid #77c;
Sideways hourglass
0:00:29.480 0:00:29.730 0:00:29.490 0:00:29.740font-size: 0px; line-height: 0%; width: 0px; 0:00:29.490 0:00:29.740 border-left: 20px solid #77c; border-top: 10px solid #f6f6f6; 0:00:29.490 0:00:29.740 border-bottom: 10px solid #f6f6f6; border-right: 20px solid #77c;
Combining shapes
0:00:29.500 0:00:29.750 0:00:29.500 0:00:29.750 0:00:29.529 0:00:29.779| 0:00:29.510 0:00:29.760 | |||
| 0:00:29.520 0:00:29.770 | 0:00:29.529 0:00:29.779 | ||
| 0:00:29.550 0:00:29.800 | |||
The div elements can even detect mouse events, so you could use this as a game controller 0:00:29.550 0:00:29.800 ... just a thought.
0:00:29.550 0:00:29.800This could be done using CSS positioning, but I have used tables here
0:00:29.560 0:00:29.810 0:00:29.560 0:00:29.810| 0:00:29.570 0:00:29.820 | |||
| 0:00:29.580 0:00:29.830 | 0:00:29.580 0:00:29.830 | 0:00:29.590 0:00:29.840 | |
| 0:00:29.600 0:00:29.850 | 0:00:29.600 0:00:29.850 | ||
Printing
- View tutorial as a single document
- Print styling information
- Printing 0:00:29.619 0:00:29.869 policy
Other tutorials
- JavaScript 0:00:29.630 0:00:29.880 tutorial
- HTML 0:00:29.630 0:00:29.880 tutorial
- Site 0:00:29.630 0:00:29.880 design 0:00:29.630 0:00:29.880
For example, the following document fragment and style 0:00:29.630 0:00:29.880 sheet: 0:00:29.630 0:00:29.880
Header
h2 { display: run-in; }Text
:before { display: block; content: 0:00:29.640 0:00:29.890 'Some'; } 0:00:29.640 0:00:29.890 ...would render in exactly the same way as the following document fragment and style 0:00:29.640 0:00:29.890 sheet: 0:00:29.640 0:00:29.890Header
h2 { display: run-in; }Some Text
span { display: 0:00:29.640 0:00:29.890 block } 0:00:29.650 0:00:29.900 Similarly, the following document fragment and style sheet: 0:00:29.650 0:00:29.900Header
h2 { display: run-in; } h2:after { display: block; content: 'Thing'; 0:00:29.650 0:00:29.900 }Text
0:00:29.650 0:00:29.900 ...would render in exactly the same way as the following document fragment and style 0:00:29.660 0:00:29.910 sheet: 0:00:29.660 0:00:29.910Header Thing
h2 { display: block; } 0:00:29.660 0:00:29.910 span { display: block; }Text
0:00:29.660 0:00:29.910 How does one punch out the corner of an element and put something in the space created? 0:00:29.670 0:00:29.920
0:00:29.670 0:00:29.920
coma purported
0:00:29.670 0:00:29.920The page you are viewing right now exists 0:00:29.670 0:00:29.920 to show off what can be accomplished with pure CSS1, 0:00:29.670 0:00:29.920 and that's all. This variant on complexspiral doesn't even use any CSS2 to accomplish its 0:00:29.680 0:00:29.930 magic. Remember: as you look this demo over, there is no Javascript here, nor 0:00:29.680 0:00:29.930 are any PNGs being used, nor do I employ any proprietary extensions 0:00:29.690 0:00:29.940 to CSS or any other language. It's all done using straight W3C-recommended markup and 0:00:29.690 0:00:29.940 styling, all validated, plus a total of four (4) images. 0:00:29.699 0:00:29.949
0:00:29.699 0:00:29.949 Unfortunately, not every browser supports all of CSS1, and only those browsers which 0:00:29.699 0:00:29.949 fully and completely support CSS1 will get this right. Despite some claims to the contrary, 0:00:29.710 0:00:29.960 IE6/Win's rendering of this page is not correct, as it (as well as some other browsers) 0:00:29.710 0:00:29.960 doesn't correctly support background-attachment: fixed for any element other than the 0:00:29.710 0:00:29.960 body. That makes it impossible to pull off the intended effect. Other browsers 0:00:29.720 0:00:29.970 may or may not get the effect right.
Hands-on: Things to Examine
0:00:29.720 0:00:29.970 Before you start, make sure you're viewing this page in one of the browsers mentioned 0:00:29.730 0:00:29.980 above. Otherwise the descriptions to follow won't match what you see. 0:00:29.730 0:00:29.980
0:00:29.730 0:00:29.980 The first, easiest thing to do is scroll the page vertically. Make sure you scroll all 0:00:29.740 0:00:29.990 the way to the very end of the page and back. Notice how the various areas with colored 0:00:29.740 0:00:29.990 backgrounds also appear to distort the background image as if through mottled glass. Try changing 0:00:29.750 0:00:30.000 the text size and notice how the compositing effect remains consistent. Then make your 0:00:29.750 0:00:30.000 browser window really narrow and scroll horizontally. Again, everything should remain seamless and 0:00:29.760 0:00:30.010 consistent.
0:00:29.760 0:00:30.010The demonstrated effect, that of having various 0:00:29.760 0:00:30.010 elements backed with translucent rippled glass of varying hues, is only possible using fixed-attachment 0:00:29.760 0:00:30.010 backgrounds in CSS. (Okay, maybe it could be done in Flash; I don't know.) I don't think 0:00:29.770 0:00:30.020 it's even possible with IE's proprietary filters, but even if this effect is possible with filters, 0:00:29.770 0:00:30.020 I could easily enough devise one that isn't.
0:00:29.779 0:00:30.029I missed the original complexspiral demo-- how does this work?!?
0:00:29.779 0:00:30.029Glad you asked. The effect demonstrated here 0:00:29.779 0:00:30.029 is achieved by using fixed background images, nothing more. For example, the main-content 0:00:29.789 0:00:30.039 area (the blue part here) uses the following styles for the default spiral-shell background: 0:00:29.789 0:00:30.039
0:00:29.789 0:00:30.039 div#content {background: white url(glassy-ripple.jpg) 0 0 no-repeat fixed;} 0:00:29.789 0:00:30.0390:00:29.800 0:00:30.050 The above is equivalent to these styles:
0:00:29.800 0:00:30.050div#content { 0:00:29.800 0:00:30.050 background-color: white; background-image: url(glassy-ripple.jpg); 0:00:29.800 0:00:30.050 background-position: 0 0; background-repeat: no-repeat; 0:00:29.800 0:00:30.050 background-attachment: fixed; } 0:00:29.800 0:00:30.0500:00:29.800 0:00:30.050 The effect of these longer rules is exactly the same; they're just split out into individual 0:00:29.810 0:00:30.060 background properties for more detailed consideration by you, gentle reader. 0:00:29.810 0:00:30.060
0:00:29.810 0:00:30.060 First, check out the rippled-shell image found here: url(glassy-ripple.jpg). 0:00:29.820 0:00:30.070 Then come back to this page and I'll continue with the explanation. All done? Great. 0:00:29.820 0:00:30.070
0:00:29.820 0:00:30.070 According to CSS, any background image that is "fixed" using background-attachment: 0:00:29.820 0:00:30.070 fixed; is fixed with respect to the viewport-- not the 0:00:29.830 0:00:30.080 element with which the image is associated. So I set the rippled-shell background image 0:00:29.830 0:00:30.080 to be aligned with the top left corner of the browser window (the viewport) with the 0:00:29.840 0:00:30.090 values given for background-position. However, the image will only be visible wherever 0:00:29.840 0:00:30.090 is intersects with the element to which it's been assigned. Therefore, even though the 0:00:29.850 0:00:30.100 top left corner of the rippled-shell image is aligned with the top left corner of the 0:00:29.850 0:00:30.100 viewport, we can only see it wherever it intersects with a div that has an id 0:00:29.860 0:00:30.110 with a value of content (which, again, happens to be the one containing this 0:00:29.860 0:00:30.110 text). 0:00:29.860 0:00:30.110
0:00:29.860 0:00:30.110 So I set a fixed background for the BODY, the content DIV, and H1 0:00:29.869 0:00:30.119 and H2 elements scattered through the document. In any given case of an element's 0:00:29.869 0:00:30.119 display, we see whatever part of the associated background image intersects with the element. 0:00:29.869 0:00:30.119 The rest of the background image remains hidden.
And that's how it works. 0:00:29.880 0:00:30.130
0:00:29.880 0:00:30.130I'm not seeing the compositing!
0:00:29.880 0:00:30.130 Then I'm willing to bet that you're using Internet Explorer for Windows (any version), 0:00:29.890 0:00:30.140 or possibly Opera (version 6 or earlier). Neither of these browsers fully support background-attachment: 0:00:29.890 0:00:30.140 fixed for elements other than body. In the case of both, images are fixed with 0:00:29.900 0:00:30.150 respect to the elements that contain them, not the browser window, which is not what 0:00:29.900 0:00:30.150 CSS1 defines background-attachment: fixed to mean, although browsers are 0:00:29.900 0:00:30.150 allowed to ignore fixed if they stick to CSS1 (CSS2 requires its implementation 0:00:29.910 0:00:30.160 for conformance). And yes, this page uses a strict DOCTYPE, so IE6 is in "strict 0:00:29.910 0:00:30.160 mode." I guess when Microsoft claims 100% CSS1 compliance, they're referring 0:00:29.920 0:00:30.170 to the CSS1 core (a reduced subset of CSS1) instead of the entirety of the CSS1 0:00:29.920 0:00:30.170 specification. It tends to make me wonder how limited or flawed their "full support" 0:00:29.930 0:00:30.180 is for other key open specifications, like HTML and DOM. 0:00:29.930 0:00:30.180
Image credits
- 0:00:29.930 0:00:30.180
- Nautilus shell: scanned by and copyright Eric A. Meyer 0:00:29.930 0:00:30.180
Jump to
- 0:00:29.930 0:00:30.180
- complex spiral (original)
- complex spiral (devolved) 0:00:29.940 0:00:30.190
- css/edge home 0:00:29.940 0:00:30.190
div of its own and then floated the div 0:00:29.949 0:00:30.199 over. Then I give the float some nice padding and margins, and center the character. Finally, 0:00:29.960 0:00:30.210 I set thick white borders on the float, which matches nicely with the white document background-- 0:00:29.960 0:00:30.210 but only the right and bottom borders are made thick. The top and left borders are set 0:00:29.970 0:00:30.220 to zero. To wit: 0:00:29.970 0:00:30.220
div#punch {float: left; font-size: 500%; width: 1.2em; 0:00:29.970 0:00:30.220 text-align: center; padding: 0.1em 0.1em 0; background: #568; color: white; border: solid 0:00:29.980 0:00:30.230 white 1px; border-width: 0 0.2em 0.2em 0; margin: 0 0.5em 0:00:29.980 0:00:30.230 0.2em 0;}It all adds up to the appearance of a block 0:00:29.980 0:00:30.230 that's had a corner punched out and replaced, and the text in the block reflowed to go around 0:00:29.990 0:00:30.240 the punchout. And, in a sense, that's exactly what happened. But what if I want to put a 0:00:30.000 0:00:30.250 border around the main block of text? How do I keep it from encircling my punched-out 0:00:30.000 0:00:30.250 corner? Even worse, how do I get that border to run along the edge of the punchout? 0:00:30.010 0:00:30.260
Boxpunch
0:00:30.010 0:00:30.260 So we can do it after all! (Assuming we aren't using IE5.x/Win or IE6/Win, that is, which 0:00:30.020 0:00:30.270 isn't able to keep up. If you want to see the variant that does work in IE/Win, go 0:00:30.020 0:00:30.270 ahead.) Notice how the border of the main div is bent out of a rectangle 0:00:30.029 0:00:30.279 so that it runs inside the floated element. Okay, I'm lying. That isn't what's really 0:00:30.029 0:00:30.279 happening. Instead, I set one-pixel black borders on the right and bottom edges of the 0:00:30.039 0:00:30.289 float, and no border at all on the top and left edges. Then the float is pulled one pixel 0:00:30.039 0:00:30.289 up and one pixel to the left, which is accomplished by setting -1px margins on those 0:00:30.050 0:00:30.300 sides. This causes the float to overlap the border set on the main div, thus 0:00:30.050 0:00:30.300 covering up the black border with the white background of the float. The code looks like 0:00:30.060 0:00:30.310 this:
div#main2 {border: 1px solid black;} div#punch2 {float: left; width: 100px; height: 0:00:30.060 0:00:30.310 70px; text-align: center; background: white; color: 0:00:30.060 0:00:30.310 black; border: solid black 1px; border-width: 0 1px 0:00:30.070 0:00:30.320 1px 0; padding: 0 10px 5px 0; margin: -1px 25px 10px 0:00:30.070 0:00:30.320 -1px;} div#punch2 img {height: 70px; width: 100px;} 0:00:30.070 0:00:30.3200:00:30.070 0:00:30.320 As in the curvelicious demo, the h1 at the top is 0:00:30.080 0:00:30.330 simply styled as normal, and its borders and background "slide under" the floated element. 0:00:30.080 0:00:30.330 This is expected behavior in CSS2. If you were to set a left border on the h1, 0:00:30.090 0:00:30.340 you'd have to make it at least 111px wide before it could be seen at all! Well, 0:00:30.090 0:00:30.340 unless it become so tall that it was taller than the float. Then you'd be able to see 0:00:30.100 0:00:30.350 it below the float. If your browser supports text zooming, try increasing the text size 0:00:30.100 0:00:30.350 until the h1 is taller than the float. You should see what I mean then. 0:00:30.110 0:00:30.360
Again with the punching
0:00:30.119 0:00:30.369 Of course, if one is floating elements, then one can float anything, not just images. In 0:00:30.130 0:00:30.380 this case I've floated a div, but it could have been any text element. The 0:00:30.130 0:00:30.380 borders and margins are set up just like last time. Think of it-- you could put a small 0:00:30.140 0:00:30.390 navigation panel in that float, or anything else that takes your fancy. A quotation, perhaps? 0:00:30.140 0:00:30.390 How about a small table of icons or decorative images? You could just float the table itself 0:00:30.150 0:00:30.400 and be done. Pretty cool, eh?
For that matter, why restrict yourself to 0:00:30.150 0:00:30.400 floating things into the corner of the box? How about going straight to the right or left 0:00:30.160 0:00:30.410 from within the block?
0:00:30.160 0:00:30.410It's the same basic principle as before, only 0:00:30.160 0:00:30.410 this time we need to draw three of the borders and only pull the float one pixel to the left. 0:00:30.170 0:00:30.420 We could keep pulling it one pixel upward as well, but that's no necessary here and 0:00:30.180 0:00:30.430 could (in theory) lead to complications. Better to stick to what's needed. Again, any element 0:00:30.180 0:00:30.430 could be floated, so you could float links for further reading, more decorative images 0:00:30.190 0:00:30.440 like folder tabs, a list of short ideas or points that are related to the main text, 0:00:30.190 0:00:30.440 a table of figures, or the familiar "pull quote" style of taking a short phrase in the 0:00:30.199 0:00:30.449 text and repeating it in larger text. Like we see here. 0:00:30.199 0:00:30.449
div#punch3b {float: right; width: 25%; 0:00:30.199 0:00:30.449 text-align: left; font-size: 140%; font-weight: bold; font-style: 0:00:30.199 0:00:30.449 italic; padding: 1em; text-indent: -0.5em; background: 0:00:30.210 0:00:30.460 white; color: black; border: solid black 1px; 0:00:30.210 0:00:30.460 border-width: 1px 0 1px 1px; margin: 0.2em -1px 0.2em 0.5em;} 0:00:30.210 0:00:30.4600:00:30.210 0:00:30.460 Note that, due to rounding errors, Mozilla (and thus Netscape 6.x) may not move a right-floated 0:00:30.220 0:00:30.470 element over as far as it should be. If you resize your browser window enough times, you'll 0:00:30.220 0:00:30.470 see a black border appear to the right of the pull quote. That's because the float is 0:00:30.230 0:00:30.480 one pixel too far to the left, and the main div's border becomes visible. 0:00:30.230 0:00:30.480 Hopefully they'll fix that eventually.
There are any number of ways this concept 0:00:30.240 0:00:30.490 could be extended, really. The only limit is your imagination! And negative margins 0:00:30.240 0:00:30.490 don't have to be restricted to floats, either. Consider this fairly 0:00:30.250 0:00:30.500 irregular-looking page and how it's been created. Some floats, some normal-flow elements, 0:00:30.250 0:00:30.500 a few one-pixel negative margins, and you've got some twisty layouts! I just hope Wired 0:00:30.250 0:00:30.500 doesn't sue me for stylistic theft... 0:00:30.260 0:00:30.510
0:00:30.260 0:00:30.510 ...would render in exactly the same way as the following document fragment and style 0:00:30.260 0:00:30.510 sheet: Header 0:00:30.260 0:00:30.510 Text How does one punch out the corner of an element 0:00:30.260 0:00:30.510 and put something in the space created? 0:00:30.270 0:00:30.520 coma purported 0:00:30.270 0:00:30.520 The page you are viewing right now exists to show off what can be accomplished with 0:00:30.270 0:00:30.520 pure CSS1, and that's all. This variant on complexspiral doesn't even use any CSS2 to 0:00:30.279 0:00:30.529 accomplish its magic. Remember: as you look this demo over, there is no Javascript here, 0:00:30.279 0:00:30.529 nor are any PNGs being used, nor do I employ any proprietary extensions to CSS or any other 0:00:30.289 0:00:30.539 language. It's all done using straight W3C-recommended markup and styling, all validated, plus a 0:00:30.289 0:00:30.539 total of four (4) images. 0:00:30.289 0:00:30.539 Unfortunately, not every browser supports all of CSS1, and only those browsers which 0:00:30.300 0:00:30.550 fully and completely support CSS1 will get this right. Despite some claims to the contrary, 0:00:30.300 0:00:30.550 IE6/Win's rendering of this page is not correct, as it (as well as some other browsers) doesn't 0:00:30.310 0:00:30.560 correctly support background-attachment: fixed for any element other than the body. That 0:00:30.310 0:00:30.560 makes it impossible to pull off the intended effect. Other browsers may or may not get 0:00:30.320 0:00:30.570 the effect right. Hands-on: Things to Examine 0:00:30.320 0:00:30.570 Before you start, make sure you're viewing this page in one of the browsers mentioned 0:00:30.320 0:00:30.570 above. Otherwise the descriptions to follow won't match what you see. 0:00:30.330 0:00:30.580 The first, easiest thing to do is scroll the page vertically. Make sure you scroll all 0:00:30.330 0:00:30.580 the way to the very end of the page and back. Notice how the various areas with colored 0:00:30.340 0:00:30.590 backgrounds also appear to distort the background image as if through mottled glass. Try changing 0:00:30.340 0:00:30.590 the text size and notice how the compositing effect remains consistent. Then make your 0:00:30.350 0:00:30.600 browser window really narrow and scroll horizontally. Again, everything should remain seamless and 0:00:30.350 0:00:30.600 consistent. 0:00:30.350 0:00:30.600 The demonstrated effect, that of having various elements backed with translucent rippled glass 0:00:30.360 0:00:30.610 of varying hues, is only possible using fixed-attachment backgrounds in CSS. (Okay, maybe it could 0:00:30.360 0:00:30.610 be done in Flash; I don't know.) I don't think it's even possible with IE's proprietary filters, 0:00:30.369 0:00:30.619 but even if this effect is possible with filters, I could easily enough devise one that isn't. 0:00:30.369 0:00:30.619 I missed the original complexspiral demo-- how does this work?!? 0:00:30.380 0:00:30.630 Glad you asked. The effect demonstrated here is achieved by using fixed background images, 0:00:30.380 0:00:30.630 nothing more. For example, the main-content area (the blue part here) uses the following 0:00:30.390 0:00:30.640 styles for the default spiral-shell background: 0:00:30.390 0:00:30.640 PreviousHow about this curve, it is created using the sloping edge technique with stacked floats 0:00:30.390 0:00:30.640 of various sizes. The length of the div is increased with each float, and 0:00:30.400 0:00:30.650 the slope is changed by manipulating the thicknesses of the visible bottom 0:00:30.400 0:00:30.650 and invisible right borders.
0:00:30.400 0:00:30.650 0:00:30.410 0:00:30.660 0:00:30.420 0:00:30.670 0:00:30.420 0:00:30.670 0:00:30.430 0:00:30.680 0:00:30.440 0:00:30.690 0:00:30.449 0:00:30.699 0:00:30.460 0:00:30.710 0:00:30.470 0:00:30.720 0:00:30.470 0:00:30.720 0:00:30.480 0:00:30.730 0:00:30.480 0:00:30.7300:00:30.480 0:00:30.730 0:00:30.490 0:00:30.740 0:00:30.490 0:00:30.7400:00:30.500 0:00:30.7500:00:30.500 0:00:30.750Content inside bubble
