Digital World Faisalabad: CSS3 Tutorials

Showing posts with label CSS3 Tutorials. Show all posts

Sunday, 27 August 2017

CSS3 Media Queries

CSS2 Introduced Media Types
The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Examples: You could have one set of style rules for computer screens, one for printers, one for handheld devices, one for television-type devices, and so on.

Unfortunately these media types never got a lot of support by devices, other than the print media type.

CSS3 Introduces Media Queries
Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution

Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

Media Query Syntax
A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.

Unless you use the not or only operators, the media type is optional and the all type will be implied.

You can also have different stylesheets for different media:

CSS3 Media Types

Values	Description
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 Queries Simple ExamplesOne way to use media queries is to have an alternate CSS section right inside your style sheet.

The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

Example

The following example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the menu will be on top of the content):

Example

CSS3 @media Reference
For a full overview of all the media types and features/expressions, please look at the @media rule in our CSS reference.

CSS3 Flexbox

Flexible boxes, or flexbox, is a new layout mode in CSS3.

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

CSS3 Flexbox Concepts
Flexbox consists of flex containers and flex items.

A flex container is declared by setting the display property of an element to either flex (rendered as a block) or inline-flex (rendered as inline).

Inside a flex container there is one or more flex items.

Note: Everything outside a flex container and inside a flex item is rendered as usual. Flexbox defines how flex items are laid out inside a flex container.

Flex items are positioned inside a flex container along a flex line. By default there is only one flex line per flex container.

The following example shows three flex items. They are positioned by default: along the horizontal flex line, from left to right:

Example

It is also possible to change the direction of the flex line.

If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout:

Example

Flex Direction
The flex-direction property specifies the direction of the flexible items inside the flex container. The default value of flex-direction is row (left-to-right, top-to-bottom).

The other values are as follows:

row-reverse - If the writing-mode (direction) is left to right, the flex items will be laid out right to left
column - If the writing system is horizontal, the flex items will be laid out vertically
column-reverse - Same as column, but reversed

The following example shows the result of using the row-reverse value:

Example

The following example shows the result of using the column value:

Example

The following example shows the result of using the column-reverse value:

Example

The justify-content Property
The justify-content property horizontally aligns the flexible container's items when the items do not use all available space on the main-axis.

The possible values are as follows:

flex-start - Default value. Items are positioned at the beginning of the container
flex-end - Items are positioned at the end of the container
center - Items are positioned at the center of the container
space-between - Items are positioned with space between the lines
space-around - Items are positioned with space before, between, and after the lines

The following example shows the result of using the flex-end value:

Example

The following example shows the result of using the center value:

Example

The following example shows the result of using the space-between value:

Example

The following example shows the result of using the space-around value:

Example

The align-items Property
The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis.

The possible values are as follows:

stretch - Default value. Items are stretched to fit the container
flex-start - Items are positioned at the top of the container
flex-end - Items are positioned at the bottom of the container
center - Items are positioned at the center of the container (vertically)
baseline - Items are positioned at the baseline of the container

The following example shows the result of using the stretch value (this is the default value):

Example

The following example shows the result of using the flex-start value:

Example

The following example shows the result of using the flex-end value:

Example

The following example shows the result of using the center value:

Example

The following example shows the result of using the baseline value:

Example

The flex-wrap Property
The flex-wrap property specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line.

The possible values are as follows:

nowrap - Default value. The flexible items will not wrap
wrap - The flexible items will wrap if necessary
wrap-reverse - The flexible items will wrap, if necessary, in reverse order

The following example shows the result of using the nowrap value (this is the default value):

Example

The following example shows the result of using the wrap value:

Example

The following example shows the result of using the wrap-reverse value:

Example

The align-content Property
The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.

The possible values are as follows:

stretch - Default value. Lines stretch to take up the remaining space
flex-start - Lines are packed toward the start of the flex container
flex-end - Lines are packed toward the end of the flex container
center - Lines are packed toward the center of the flex container
space-between - Lines are evenly distributed in the flex container
space-around - Lines are evenly distributed in the flex container, with half-size spaces on either end

The following example shows the result of using the center value:

Example

Flex Item Properties
Ordering
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container:

Example

Margin
Setting margin: auto; will absorb extra space. It can be used to push flex items into different positions.

In the following example we set margin-right: auto; on the first flex item. This will cause all the extra space to be absorbed to the right of that element:

Example

Perfect Centering
In the following example we will solve an almost daily problem: perfect centering.

It is very easy with flexbox. Setting margin: auto; will make the item perfectly centered in both axis:

Example

align-self
The align-self property of flex items overrides the flex container's align-items property for that item. It has the same possible values as the align-items property.

The following example sets different align-self values to each flex item:

Example

flex
The flex property specifies the length of the flex item, relative to the rest of the flex items inside the same container.

In the following example, the first flex item will consume 2/4 of the free space, and the other two flex items will consume 1/4 of the free space each:

Example

CSS3 Flexbox Properties
The following table lists the CSS properties used with flexbox:

Property	Description
display	Specifies the type of box used for an HTML element
flex-direction	Specifies the direction of the flexible items inside a flex container
justify-content	Horizontally aligns the flex items when the items do not use all available space on the main-axis
align-items	Vertically aligns the flex items when the items do not use all available space on the cross-axis
flex-wrap	Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
align-content	Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
flex-flow	A shorthand property for flex-direction and flex-wrap
order	Specifies the order of a flexible item relative to the rest of the flex items inside the same container
align-self	Used on flex items. Overrides the container's align-items property
flex	Specifies the length of a flex item, relative to the rest of the flex items inside the same container

CSS3 Box Sizing

The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.

Without the CSS3 box-sizing Property
By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element's border and padding are added to the element's specified width/height).

The following illustration shows two <div> elements with the same specified width and height:

The two <div> elements above end up with different sizes in the result (because div2 has a padding specified):

Example

So, for a long time web developers have specified a smaller width value than they wanted, because they had to subtract out the padding and borders.

With CSS3, the box-sizing property solves this problem.

With the CSS3 box-sizing Property
The CSS3 box-sizing property allows us to include the padding and border in an element's total width and height.

If you set box-sizing: border-box; on an element padding and border are included in the width and height:

Here is the same example as above, with box-sizing: border-box; added to both <div> elements:

Example

Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.

The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).

Applying this to all elements is safe and wise:

Example

CSS3 User Interface

CSS3 has new user interface features such as resizing elements, outlines, and box sizing.

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

resize
outline-offset

CSS3 Resizing

The resize property specifies whether or not an element should be resizable by the user.

The following example lets the user resize only the width of a <div> element:

Example

The following example lets the user resize only the height of a <div> element:

Example

The following example lets the user resize both the height and the width of a <div> element:

Example

CSS3 Outline Offset

The outline-offset property adds space between an outline and the edge or border of an element.

Outlines differ from borders in three ways:

An outline is a line drawn around elements, outside the border edge
An outline does not take up space
An outline may be non-rectangular

The following example uses the outline-offset property to add a 15px space between the border and the outline:

Example

CSS3 User Interface Properties

The following table lists all the user interface properties:

Property	Description
box-sizing	Allows you to include the padding and border in an element's total width and height
nav-down	Specifies where to navigate when using the arrow-down navigation key
nav-index	Specifies the tabbing order for an element
nav-left	Specifies where to navigate when using the arrow-left navigation key
nav-right	Specifies where to navigate when using the arrow-right navigation key
nav-up	Specifies where to navigate when using the arrow-up navigation key
outline-offset	Adds space between an outline and the edge or border of an element
resize	Specifies whether or not an element is resizable by the user

CSS3 Multiple Columns

The CSS3 multi-column layout allows easy definition of multiple columns of text - just like in newspapers:

CSS3 Multi-column Properties
In this chapter you will learn about the following multi-column properties:

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS3 Create Multiple Columns
The column-count property specifies the number of columns an element should be divided into.

The following example will divide the text in the <div> element into 3 columns:

Example

CSS3 Specify the Gap Between Columns
The column-gap property specifies the gap between the columns.

The following example specifies a 40 pixels gap between the columns:

Example

CSS3 Column Rules
The column-rule-style property specifies the style of the rule between columns:

Example

The column-rule-width property specifies the width of the rule between columns:

Example

The column-rule-color property specifies the color of the rule between columns:

Example

The column-rule property is a shorthand property for setting all the column-rule-* properties above.

The following example sets the width, style, and color of the rule between columns:

Example

Specify How Many Columns an Element Should Span
The column-span property specifies how many columns an element should span across.

The following example specifies that the <h2> element should span across all columns:

Example

Specify The Column Width
The column-width property specifies a suggested, optimal width for the columns.

The following example specifies that the suggested, optimal width for the columns should be 100px:

Example

CSS3 Multi-columns Properties
The following table lists all the multi-columns properties:

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

CSS Pagination Examples

Learn how to create a responsive pagination using CSS.

Simple Pagination
If you have a website with lots of pages, you may wish to add some sort of pagination to each page:

Example

Active and Hoverable Pagination

Highlight the current page with an .active class, and use the :hover selector to change the color of each page link when moving the mouse over them:

Example

Rounded Active and Hoverable Buttons

Add the border-radius property if you want a rounded "active" and "hover" button:

Example

More Examples

Hoverable Transition Effect: Add the transition property to the page links to create a transition effect on hover:

Bordered Pagination:Use the border property to add borders to the pagination:

Rounded Borders: Tip: Add rounded borders to your first and last link in the pagination:

Space Between Links: Tip: Add the margin property if you do not want to group the page links:

Pagination Size: Change the size of the pagination with the font-size property:

Centered Pagination: To center the pagination, wrap a container element (like <div>) around it with text-align:center

Breadcrumbs

Another variation of pagination is so-called "breadcrumbs":

Example

CSS Buttons

Learn how to style buttons using CSS.

Basic Button Styling

Example

Button Colors

Use the background-color property to change the background color of a button:

Example

Button Sizes

Use the font-size property to change the font size of a button:

Example

Use the padding property to change the padding of a button:

Example

Rounded Buttons

Use the border-radius property to add rounded corners to a button:

Example

Colored Button Borders

Use the border property to add a colored border to a button:

Example

Hoverable Buttons
Use the :hover selector to change the style of a button when you move the mouse over it.

Tip: Use the transition-duration property to determine the speed of the "hover" effect:

Example

Shadow Buttons

Use the box-shadow property to add shadows to a button:

Example

Disabled Buttons
Use the opacity property to add transparency to a button (creates a "disabled" look).

Tip: You can also add the cursor property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:

Example

Button Width

By default, the size of the button is determined by its text content (as wide as its content). Use the width property to change the width of a button:

Example

Button Groups

Remove margins and add float:left to each button to create a button group:

Example

Animated Buttons

Example
Add an arrow on hover:

Example
Add a "pressed" effect on click:

Example
Add a "ripple" effect on click: Flash Effect

CSS Images

Learn how to style images using CSS.

Rounded Images
Use the border-radius property to create rounded images:

Example

Example

Thumbnail Images
Use the border property to create thumbnail images.

Example

Example

Responsive Images

Responsive images will automatically adjust to fit the size of the screen.

Resize the browser window to see the effect:

If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:

Example

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.

Center an Image

To center an image within the page, use margin: auto; and make it into a block element:

Example

Polaroid Images / Cards

Example

Transparent Image

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

Note: IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

Example

Image Filters

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.

Example

Change the color of all images to black and white (100% gray):

Tip: Go to our CSS filter Reference to learn more about CSS filters.

Image Hover Overlay

Create an overlay effect on hover:

Example

Fade in text:

Example

Fade in a box:

Example

Slide in (top):

Example

Slide in (bottom):

Example

Slide in (left):

Example

Slide in (right):

Responsive Image Gallery

CSS can be used to create image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:

Example

Tip: Read more about Responsive Web Design in our CSS RWD Tutorial.

Image Modal (Advanced)

This is an example to demonstrate how CSS and JavaScript can work together.

First, use CSS to create a modal window (dialog box), and hide it by default.

Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image:

Example

CSS3 Animations

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

Browser Support for Animations

The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

What are CSS3 Animations?
An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

To use CSS3 animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

To get an animation to work, you must bind the animation to an element.

The following example binds the "example" animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

Example

Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.

In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)).

It is also possible to use percent. By using percent, you can add as many style changes as you like.

The following example will change the background-color of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Example

The following example will change both the background-color and the position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete:

Example

Delay an Animation
The animation-delay property specifies a delay for the start of an animation.

The following example has a 2 seconds delay before starting the animation:

Example

Set How Many Times an Animation Should Run
The animation-iteration-count property specifies the number of times an animation should run.

The following example will run the animation 3 times before it stops:

Example

The following example uses the value "infinite" to make the animation continue for ever:

Example

Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property is used to let an animation run in reverse direction or alternate cycles.

The following example will run the animation in reverse direction:

Example

The following example uses the value "alternate" to make the animation first run forward, then backward, then forward:

Example

Specify the Speed Curve of the Animation
The animation-timing-function property specifies the speed curve of the animation.

The animation-timing-function property can have the following values:

ease - specifies an animation with a slow start, then fast, then end slowly (this is default)
linear - specifies an animation with the same speed from start to end
ease-in - specifies an animation with a slow start
ease-out - specifies an animation with a slow end
ease-in-out - specifies an animation with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

The following example shows the some of the different speed curves that can be used:

Example

Animation Shorthand Property
The example below uses six of the animation properties:

Example

The same animation effect as above can be achieved by using the shorthand animation property:

Example

CSS3 Animation Properties

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should play in reverse direction or alternate cycles
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

CSS3 3D Transforms

CSS3 allows you to format your elements using 3D transformations. Mouse over the elements below to see the difference between a 2D and a 3D transformation:

Original after roration

Browser Support for 3D Transforms
The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

CSS3 3D Transforms
In this chapter you will learn about the following 3D transformation methods:

rotateX()
rotateY()
rotateZ()

The rotateX() Method

The rotateX() method rotates an element around its X-axis at a given degree:

Example

The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree:

Example

The rotateZ() Method
The rotateZ() method rotates an element around its Z-axis at a given degree:

Example

CSS3 Transform Properties

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements
transform-style	Specifies how nested elements are rendered in 3D space
perspective	Specifies the perspective on how 3D elements are viewed
perspective-origin	Specifies the bottom position of 3D elements
backface-visibility	Defines whether or not an element should be visible when not facing the screen

3D Transform Methods

unction	Description
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z)	Defines a 3D translation
translateX(x)	Defines a 3D translation, using only the value for the X-axis
translateY(y)	Defines a 3D translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z)	Defines a 3D scale transformation
scaleX(x)	Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y)	Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
perspective(n)	Defines a perspective view for a 3D transformed element

CSS3 Web Fonts - The @font-face Rule
Web fonts allow Web designers to use fonts that are not installed on the user's computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your "own" fonts are defined within the CSS3 @font-face rule.

Browser Support
The numbers in the table specify the first browser version that fully supports the property.

Different Font Formats
TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.

The Web Open Font Format (WOFF 2.0)

TrueType/OpenType font that provides better compression than WOFF 1.0.

SVG Fonts/Shapes

SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.

Embedded OpenType Fonts (EOT)

EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.

Browser Support for Font Formats
The numbers in the table specifies the first browser version that fully supports the font format.

*IE: The font format only works when set to be "installable".

*Firefox: Not supported by default, but can be enabled (need to set a flag to "true" to use WOFF2).

Using The Font You Want
In the CSS3 @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Example

Using Bold Text
You must add another @font-face rule containing descriptors for bold text:

Example

The file "sansation_bold.woff" is another font file, that contains the bold characters for the Sansation font.

Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.

This way you can have many @font-face rules for the same font.

CSS3 Font Descriptors

Descriptor	Values	Description
font-family	name	Required. Defines a name for the font
src	URL	Required. Defines the URL of the font file
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default is "normal"
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default is "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default is "normal"
unicode-range	unicode-range	Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"

DW Faisalabad New Version

Sunday, 27 August 2017

CSS3 Media Queries

CSS3 Flexbox

CSS3 Box Sizing

Wednesday, 16 August 2017

CSS3 User Interface

CSS3 Multiple Columns

CSS Pagination Examples

Tuesday, 15 August 2017

CSS Buttons

CSS Images

Friday, 11 August 2017

CSS3 Animations

Tuesday, 8 August 2017

CSS3 3D Transforms

CSS3 Web Fonts