CSS3 border-radius Property Example

div {
    border-top-left-radius: 25px;         /* length,%,initial,inherit,default:0 */
	border-top-right-radius: 25px;       /* length,%,initial,inherit,default:0 */
	border-bottom-left-radius: 25px;    /* length,%,initial,inherit,default:0 */ 
	border-bottom-right-radius: 25px;  /* length,%,initial,inherit,default:0 */ 
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

CSS3 border-radius Shorthand Property Example

div {
    border-radius: 25px 10px 30px 25px; 
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

CSS3 border-image Property Example

div {
     border-image-source: url(border.png);  /* none,image,initial,inherit,default: none */
	 border-image-slice: 30%;              /* number,%,fill, initial,inheri,default: 	100%  */
	 border-image-width: 10px;            /* length,number,%,auto,initial,inherit default: 1  */
	 border-image-outset: 10px;          /* length,number,initial,inherit default: 0  */
	 border-image-repeat: repeat;       /* stretch,round,space,initial,inherit, default: 	stretch  */
}

CSS3 border-image Shorthand Property Example

div {
    border-image: url(border.png) 30 round;
}

CSS3 background Property Example

You will also learn about the following properties:

• background-size
• background-origin
• background-clip

CSS3 background-size Property Example

The CSS background-size property allows you to specify the size of background images.

• auto--Default value. The background image is displayed in its original size
• length--Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto".
• percentage-- Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
• cover-- Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
• contain-- Resize the background image to make sure the image is fully visible
• initial-- Sets this property to its default value
• inherit-- Inherits this property from its parent element

#div1 {
    background: url(img_flower.jpg);
    background-size: 100px 80px; 
    background-repeat: no-repeat;
}

CSS3 background-origin Property Example

The background-origin property specifies the origin position (the background positioning area) of a background image.

• padding-box--Default value. The background image starts from the upper left corner of the padding edge
• border-box--The background image starts from the upper left corner of the border
• content-box-- The background image starts from the upper left corner of the content
• initial-- Sets this property to its default value
• inherit-- Inherits this property from its parent element

#example1 {
    border: 10px double black;
    padding: 25px;
    background: url(paper.gif);
    background-repeat: no-repeat;
    background-origin: content-box;
}

CSS3 background-clip Property Example

The background-clip property defines how far the background (color or image) should extend within an element.

• border-box--Default value. The background extends behind the border
• padding-box--The background extends to the inside edge of the border
• content-box -- The background extends to the edge of the content box
• initial-- Sets this property to its default value
• inherit-- Inherits this property from its parent element

div {
    border: 10px dotted black;
    padding: 15px;
    background: lightblue;
    background-clip: padding-box;
}

Define Sizes of Multiple Background Images

#example1 {
    background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    background-size: 50px, 130px, auto;
}

CSS3 color Property Example

p {
    color:rgba(255, 0, 0, 0.2);
}

CSS3 Gradients Property Example

CSS gradients let you display smooth transitions between two or more specified colors.

CSS defines two types of gradients:

• Linear Gradients
• Radial Gradients

p {
    color:rgba(255, 0, 0, 0.2);
}

CSS3 Linear Gradients Property Example

Linear Gradient - Top to Bottom

#grad {
    background: linear-gradient(red, yellow);
}

Linear Gradient - Left to Right

#grad {
  background: linear-gradient(to right, red , yellow);
}

Linear Gradient - Diagonal

#grad {
  background: linear-gradient(to bottom right, red, yellow);
}

Linear Gradient - Using angle

#grad {
  background: linear-gradient(-90deg, red, yellow);
}

Linear Gradient - Multiple Color Stops

#grad {
  background: linear-gradient(red, yellow, green);
}

Linear Gradient - Using Transparency

#grad {
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Linear Gradient - Repeating a linear-gradient

#grad {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

CSS3 Radial Gradient Property Example

Radial Gradient - Evenly Spaced Color Stops (this is default)

#grad {
  background: radial-gradient(red, yellow, green);
}

Radial Gradient - Differently Spaced Color Stops

#grad {
  background: radial-gradient(red 5%, yellow 15%, green 60%);
}

Radial Gradient - Set Shape

#grad {
  background: radial-gradient(circle, red, yellow, green);
}

Radial Gradient - Repeating a radial-gradient

#grad {
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

CSS3 Shadow Effects

you will learn about the following properties:

• text-shadow
• box-shadow

CSS3 Text Shadow

you only specify the horizontal shadow (2px) and the vertical shadow (2px):

h1 {
    text-shadow: 2px 2px red;  /* default:none  */
}

Then, add a blur effect to the shadow:

h1 {
    text-shadow: 2px 2px 5px red;
}

The following example shows a red and blue neon glow shadow

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

CSS3 box-shadow Property

you only specify the horizontal shadow and the vertical shadow

div {
    box-shadow: 10px 10px grey;  /* default:none  */
}

add a blur effect to the shadow:

div {
    box-shadow: 10px 10px 5px grey;
}

CSS3 Text Effects

you will learn about the following properties

• text-overflow
• word-wrap
• word-break

CSS3 text-overflow

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

p.test1 {
    white-space: nowrap;
    width: 200px;
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip;   /* ellipsis, default:clip  */
}

CSS3 word-wrap

The CSS word-wrap property allows long words to be able to be broken and wrap onto the next line

p {
    word-wrap: break-word; /* break-all,keep-all ,default: 	normal  */
}

CSS3 word-break

The CSS word-break property specifies line breaking rules

p.test1 {
    word-break: keep-all;  /* break-all,keep-all ,default: 	normal  */
}

p.test2 {
    word-break: break-all;
}

CSS3 Web Fonts

Web fonts allow Web designers to use fonts that are not installed on the user's computer.

Different Font Formats

• TrueType Fonts (TTF)
• OpenType Fonts (OTF)
• The Web Open Font Format (WOFF)
• The Web Open Font Format (WOFF 2.0)
• SVG Fonts/Shapes
• Embedded OpenType Fonts (EOT)

CSS3 text-overflow

The CSS text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

p {
    font-family: myFirstFont;
}

CSS3 box-sizing Property

Include padding and border in the element's total width and height:

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

• content-box -- Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
• border-box -- The width and height properties (and min/max properties) includes content, padding and border
• initial -- Sets this property to its default value
• inherit -- Inherits this property from its parent element

div {
    box-sizing: border-box;
    width:300px;
	height:200px;
    border: 5px solid red;
    float: left;
}

CSS3 Media Queries

Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

• all -- Used for all media type devices
• print-- Used for printers
• screen -- Used for computer screens, tablets, smart-phones etc.
• speech -- Used for screenreaders that "reads" the page out loud

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}