CSS 3 Coding Notes

CSS3:

border-radius:
creates rounded borders:

{border-radius: 10px;}

border-image: Lecture 87
Do not write px with border image. Use 10 or 10% but not 10px. Can’t use pixel value.
<style>
.url {border-image: url(BorderImage.gif) 20%20%20%20% repeat;
border-width 20px;
}
</style>

Round, like repeat but only uses whole pixels. Stretch spans one tile over entire area or section.

box-shadow: blur, spread, color, inset/outset (inside element or outside element)

.box {
box-shadow: 10px 10px 2px 2px blue inset;

/* box-shadow: horizontal vertical blur spread blue inset; */
}

Background Size:
measured in width by height px or %:

{ background-size:40px 30px; }
text-shadow:
(not currently supported by IE)
*optional:
horizontal-shadow vertical-shadow *blur *color

{ text-shadow: 2px 2px 10px blue; }

Custom Fonts:
<style>
/*Declare new font:*/
@font-face {
font-family: myCustomFamilyName;
src: url(‘myFont.ttf’) url(‘myFont.otf’), url(‘myFont.eot’);
}

/*Set class to call new font:*/
.font {
font-family: myCustomFamilyName;
}
</style>

Rotate:

<style>
.rotate15 {
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
-moz-transform: rotate(15deg);
webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
</style>

can use – to rotate the other way (-15deg);

Resize:
Allows user to click and drag element to expand is specified direction.

horizontal, vertical, both, none (none removes ability to resize);

{
resize:horizontal;
resize:vertical;
resize:both;
}