embedded media

<video width="320px" height="240px" controls="controls">
  <source src="media/goodshot.mp4" type="video/mp4" />
  <source src="media/goodshot.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video> 
<audio controls="controls" class="clear">
  <source src="media/LonelyNight.ogg" type="audio/ogg" />
  <source src="media/LonelyNight.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio> 

/* All audio types must be present before Mozilla will play audio. */

drag and drop

I'm regular text here. But I can be dragged.

[stickninja image]

The HTML

To make the source draggable add:

To make the target droppable add:

Example

The javascript

function drag(ev) {
	ev.dataTransfer.setData("text",ev.target.id);  // sets MIME type and ID string in dataTransfer obj
}

function drop(ev) {
	var s=ev.dataTransfer.getData("text");  // get ID string from dataTransfer obj
	ev.target.appendChild(document.getElementById(s));  // look up element by ID
	ev.preventDefault();  // prevent default handling of element
}

function allowdrop(ev) {
	ev.preventDefault();  // prevent default handling of element
}

drag() stores the ID string of the source element in the dataTransfer object.

drop() gets the ID string from the dataTransfer object, finds the source by ID, then appends it to the target.

allowdrop() prevents the default behavior — browser doesn't try to open a link or select text.

DataTransfer objects

These expose the drag data store used by drag-and-drop operations.

See also:

www.w3.org/TR/html5/dnd.html
www.useragentman.com/blog/2010/01/10/cross-browser-html5-drag-and-drop/
html5demos.com/drag-anything

Describes "dropzone" and how to test for type of source element.

multiple backgrounds — comma-separated lists

3 backgrounds

This section contains 3 background images.

My Article

This article contains 1 background image.

  • The globe

A CSS3 "outline" has been applied to the ARTICLE tag.

	background-image: url(img/o2.jpg), url(img/stickninja.png), url(img/ToTop.jpg);
	background-position: left top, 5px 40px, 98% 98%;
	background-repeat: no-repeat;

The DIV above also employs a "box-shadow" and a "border-radius".

contenteditable attribute

For faculty profiles, insert contenteditable attribute when uwnetid matches user id of page.

Users need some ways of breaking out of lists. Also need an elegant way to embed block-level elements inside lists.

canvas

Your browser does not support the canvas element.
var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var grd0=ctx.createLinearGradient(-90,-90,180,180);
grd0.addColorStop(0.0,"#f40");
grd0.addColorStop(0.7,"#f80");
ctx.fillStyle=grd0;
ctx.fillRect(20,60,40,160);

var grd1=ctx.createLinearGradient(-90,-90,180,180);
grd1.addColorStop(0.3,"#ff0");
grd1.addColorStop(0.7,"#ff8");
ctx.fillStyle=grd1;
ctx.fillRect(75,30,40,190);

var grd2=ctx.createLinearGradient(-90,-90,180,180);
grd2.addColorStop(0.3,"#a2cd47");
grd2.addColorStop(0.7,"#eaf800");
ctx.fillStyle=grd2;
ctx.fillRect(130,40,40,180);

var grd3=ctx.createLinearGradient(-90,-90,180,180);
grd3.addColorStop(0.5,"#08638e");
grd3.addColorStop(0.9,"#d0e1e9");
ctx.fillStyle=grd3;
ctx.fillRect(185,70,40,150);

fillRect( x, y, width, length );

Border-Image

www.sitepoint.com/css3-border-image
www.useragentman.com/blog/2011/03/29/pixel-perfect-css3-border-image-in-depth
www.bradclicks.com/cssplay/border-image/Thinking_Outside_The_Box.html
www.border-image.com
www.w3.org/TR/css3-background/#the-border-images

Set a border-width to make room for a border image. Then specify the graphic and how much of it goes in the border.

border: 20px solid red;
border-image: url(img.png) 20;

Above, 20 is the border-image-slice value. (Pixels & percentages are legal.) It indicates how many pixels from the image's edges to place in the border.

The slice value divides the image into 9 portions.

map or border image

Each portion is centered in the corresponding area of the element, then stretched or repeated to fill it. Except for the corners. They fill from the outside toward the interior.

map or border image

Offsets can be listed individually: border-image: url() 20 50 20 30;

(Order is the same as for "border" shorthand, but "px" destroys the rule. Don't list px for now).

map or border image

If offsets are very large, say 49%, the corner portions consume nearly all pixels.

Only a few remain to fill the border's edges and the interior.

map or border image

At 50%, the 4 corner portions meet. 1/4 of the image squeezes into each corner of the element's border.

No pixels are left over for the border's edges or the element's interior.

The border-image-repeat property defines how the image fills the element:

The fill is applied individually to each of the 9 portions, and horizontal and vertical fills can be of different types.

So...

If you set a border-width of 20px, then set a border-image width to:

A 250 X 250px background image is at left.

Each circle is 20px.

In the examples below, each box has a border-width of 20px.

The interior, dim part of the image begins 20px from the image edge, the same distance as the border-width.

Because the dim porton starts at the edge of the border, you'll see in the 40 repeat and 60 repeat samples (where more of the image is pulled into the border) that missing parts of the border shapes show up in the interior tiles, and visa versa.

That shows how the browser clips tiles in a "repeat" fill.

various border-image sizes and fills

20 stretch;

20px circles fill border width entirely

remainder fills interior
10 stretch;

circles distort as 1/2 of each stretches to fill border

"round" would produce same result

10 repeat;

repeat doubles all pixels (10 expanded to 20) and fills interior starting from center of image, and borders starting from center of edges

40 repeat;

40px compressed to 20px — border eats all circles, none left for interior

interior and border tiles start at respective centers — missing bits of each are in the other

30 repeat;

30 pixels (1 1/2 circles) compressed into 20px border

1 centered interior tile surrounded by 8 partial tiles — diamond tips were eaten by the borders.

30 round;

30 pixels (1 1/2 circles) compressed into 20px border

Moz: "round" scales tiles to produce 4 whole tiles in interior, 2 in borders

Chrome: simply "repeats"

30 stretch repeat;

1 1/2 circles fill borders — stretch distorts them horizontally, repeat clips them vertically

60 repeat;

60px compressed to 20px reduces image by 1/3

130px wide swath (250px - 60*2) left for fill — missing bits of interior tiles are in border & visa versa

124 repeat;

124px hz/vt of 250px image leaves just 2 pixel swath down and across for fill.

25% opacity on lines blends to this olive color

50% repeat;

1/4 of image is crammed into each corner

nothing left to fill interior or borders

55% stretch;

Moz: nothing left over to fill interior or borders

Chrome: treats size of offset overlap like a simple slice value to fill borders

100% stretch;

entire image is stuffed into each corner

Moz: nothing left to fill interior or borders

Chrome: size of offset overlap fills borders

NOTES:

practical uses

my quote marks This block quote has a custom border image (shown at right). It's 42px wide. Each double quote and the blank area beside it is 21px wide. The blank areas are needed for the top-right and bottom-left corners of the border.
	border-width: 21px;  /* set border to width of 1 double quote */
	border-image: url(img/quotes2.png) 21;
Because the border width matches the width of each quote, the fill doesn't matter — stretch, round, or repeat produce identical results.

Border-width adjusts image size (pixels are scaled to fit border).

border-width: 28px;
21 pixels of image edge expand to 4/3rds original size.
border-width: 14px;
21 pixels of image edge contract to 2/3rds original size.

box-shadow — www.css3.info/preview/box-shadow

(inset) H V B S C

A simple shadow with blur.


box-shadow: 4px 4px 8px #aaa;

Order matters when applying overlapping shadows. Here are 6 that overlap: 3 outset and 3 inset.

box-shadow: 
   -8px -8px 14px 2px #c84, /* reddish top-left */
   8px 8px 14px 2px #8c4, /* green bottom right */
   0 0 35px 10px #ff0, /* yellow glow is declared last */
   inset 0 0 14px 4px #444, /* inner charcoal is declared first */
   inset 4px 4px 14px 3px #8c4, /* inner green */
   inset -4px -4px 14px 3px #c84; /* inner red */

Same values, different order. Earlier ones carry more weight:

box-shadow: 
   0 0 35px 10px #ff0, /* yellow glow is declared first */
   -8px -8px 14px 2px #c84, /* reddish top-left */
   8px 8px 14px 2px #8c4, /* green bottom right */
   inset 4px 4px 14px 3px #8c4, /* inner green */
   inset -4px -4px 14px 3px #c84, /* inner red */
   inset 0 0 14px 4px #444; /* inner charcoal is declared last */

Same values, but 1/4 opacity on yellow outset and black inset:

box-shadow: 
   0 0 35px 10px rgba(255,255,0,0.25), /* yellow glow is declared first */
   -8px -8px 14px 2px #c84, /* reddish top-left */
   8px 8px 14px 2px #8c4, /* green bottom right */
   inset 4px 4px 14px 3px #8c4, /* inner green */
   inset -4px -4px 14px 3px #c84, /* inner red */
   inset 0 0 14px 4px rgba(64,64,64,0.25); /* inner charcoal is declared last */

Outset

Inset

Inset

Outset

Outset

Outset

Inset

Inset

Inset

Inset

Firefox doesn't apply radius to IMG elements, but if graphic is a background you're home free.

background: url(...);
border-radius: 20px;
box-shadow: 3px 3px 8px #000 inset;

NOTES:

gradient backgrounds

Still an experimental property. Syntax and implementation varies between browsers.

Gradient below is rendered entirely by browser. It scales to 40% of window width;

Gradient backgrounds:

background-image: -moz-linear-gradient(
  -85deg, /* counter clockwise rotation off center axis */
  #f6f6f7 10%, /* light gray opaque at 10% in top-left*/
  #fff 20%, /* full white opaque at 20% */
  #f6f6f7 60%, /* light gray opaque at 60% */
  #fff 75%, 
  #f2f2f3 90%, 
  #fff 95%  /* full white at 95% in bottom-right */
);

The DIV above also has

transitions

I'll get bigger if you hover.

css3: transform
css3: transition

Room Reservations

Google