CSS3 User Interface

CSS3 User Interface

In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.

In this chapter you will learn about the following user interface properties:

• resize
• box-sizing
• outline-offset

---

Browser Support

Property	Browser Support
resize
box-sizing
outline-offset

The resize property is supported in Firefox, Chrome, and Safari.

The box-sizing is supported in Internet Explorer, Chrome, Safari, and Opera. Firefox requires the prefix -moz-.

The outline-offset property is supported in all major browsers, except Internet Explorer.

---

CSS3 Resizing

In CSS3, the resize property specifies whether or not an element should be resizable by the user.

This div element is resizable by the user (in Firefox, Chrome, and Safari).

The CSS code is as follows:

Example

Specify that a div element should be resizable by the user:

div
{
resize:both;
overflow:auto;
}

---

CSS3 Box Sizing

The box-sizing property allows you to define certain elements to fit an area in a certain way:

Example

Specify two bordered boxes side by side:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}

---

CSS3 Outline Offset

The outline-offset property offsets an outline, and draws it beyond the border edge.

Outlines differ from borders in two ways:

• Outlines do not take up space
• Outlines may be non-rectangular

This div has an outline 15px outside the border edge.

The CSS code is as follows:

Example

Specify an outline 15px outside the border edge:

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

---

New User-interface Properties

Property	Description	CSS
appearance	Allows you to make an element look like a standard user interface element	3
box-sizing	Allows you to define certain elements to fit an area in a certain way	3
icon	Provides the author the ability to style an element with an iconic equivalent	3
nav-down	Specifies where to navigate when using the arrow-down navigation key	3
nav-index	Specifies the tabbing order for an element	3
nav-left	Specifies where to navigate when using the arrow-left navigation key	3
nav-right	Specifies where to navigate when using the arrow-right navigation key	3
nav-up	Specifies where to navigate when using the arrow-up navigation key	3
outline-offset	Offsets an outline, and draws it beyond the border edge	3
resize	Specifies whether or not an element is resizable by the user	3

-By Parthiv Patel

Parthiv Patel

Bhaishri Info Solution

Sr. PHP Developer

Limdi Chowk, AT PO. Nar, Di. Anand

Nar, Gujarat

388150

India

pparthiv2412@gmail.com

7383343029

DOB: 12/24/1986

CSS3 Multiple Columns

CSS3 Multiple Columns

With CSS3, you can create multiple columns for laying out text - like in newspapers!

In this chapter you will learn about the following multiple column properties:

• column-count
• column-gap
• column-rule

---

Browser Support

Property	Browser Support
column-count
column-gap
column-rule

Internet Explorer 10 and Opera supports multiple columns properties.

Firefox requires the prefix -moz-.

Chrome and Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the multiple columns properties.

---

CSS3 Create Multiple Columns

The column-count property specifies the number of columns an element should be divided into:

Example

Divide the text in a div element into three columns:

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}

---

CSS3 Specify the Gap Between Columns

The column-gap property specifies the gap between the columns:

Example

Specify a 40 pixels gap between the columns:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}

---

CSS3 Column Rules

The column-rule property sets the width, style, and color of the rule between columns.

Example

Specify the width, style and color of the rule between columns:

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */
column-rule:3px outset #ff00ff;
}

---

New Multiple Columns Properties

Property	Description	CSS
column-count	Specifies the number of columns an element should be divided into	3
column-fill	Specifies how to fill columns	3
column-gap	Specifies the gap between the columns	3
column-rule	A shorthand property for setting all the column-rule-* properties	3
column-rule-color	Specifies the color of the rule between columns	3
column-rule-style	Specifies the style of the rule between columns	3
column-rule-width	Specifies the width of the rule between columns	3
column-span	Specifies how many columns an element should span across	3
column-width	Specifies the width of the columns	3
columns	A shorthand property for setting column-width and column-count	3

-By Parthiv Patel

Parthiv Patel

Bhaishri Info Solution

Sr. PHP Developer

Limdi Chowk, AT PO. Nar, Di. Anand

Nar, Gujarat

388150

India

pparthiv2412@gmail.com

7383343029

DOB: 12/24/1986

CSS3 Animations

CSS3 Animations

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.

---

CSS3
Animation

---

CSS3 @keyframes Rule

To create animations in CSS3, you will have to learn about the @keyframes rule.

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

---

Browser Support

Property	Browser Support
@keyframes
animation

Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property.

Chrome and Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

---

Example

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

---

CSS3 animation

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

• Specify the name of the animation
• Specify the duration of the animation

Example

Binding the "myfirst" animation to a div element, duration: 5 seconds:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Note: You must define the name and the duration of the animation. If duration is omitted, the animation will not run, because the default value is 0.

---

What are Animations in CSS3?

An animation is an effect that lets an element gradually change from one style to another.

You can change as many styles you want, as many times you want.

Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

0% is the beginning of the animation, 100% is when the animation is complete.

For best browser support, you should always define both the 0% and the 100% selectors.

Example

Change the background color when the animation is 25%, 50%, and again when the animation is 100% complete:

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

Example

Change the background color and position:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

---

CSS3 Animation Properties

The following table lists the @keyframes rule and all the animation properties:

Property	Description	CSS
@keyframes	Specifies the animation	3
animation	A shorthand property for all the the animation properties, except the animation-play-state property	3
animation-name	Specifies the name of the @keyframes animation	3
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle. Default 0	3
animation-timing-function	Describes how the animation will progress over one cycle of its duration. Default "ease"	3
animation-delay	Specifies when the animation will start. Default 0	3
animation-iteration-count	Specifies the number of times an animation is played. Default 1	3
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles. Default "normal"	3
animation-play-state	Specifies whether the animation is running or paused. Default "running"	3

The two examples below sets all the animation properties:

Example

Run an animation called myfirst, with all the animation properties set:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Example

The same animation as above, using the shorthand animation property:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

-By Parthiv Patel

Parthiv Patel

Bhaishri Info Solution

Sr. PHP Developer

Limdi Chowk, AT PO. Nar, Di. Anand

Nar, Gujarat

388150

India

pparthiv2412@gmail.com

7383343029

DOB: 12/24/1986