CSS3

CSS3 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.

What is The Viewport?

-is the user's visible area of a web page. -varies with the device, and will be smaller on a mobile phone than on a computer screen.

Flex Item Properties : Margin .flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: 10px; } .flex-item:first-child { margin-right: auto; }

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: to see the whole example : http://www.w3schools.com/css/css3_flexbox.asp

CSS3 supported multi columns

_________________ to arrange the text as news paper structure.

The user interface property

__________________ allows you to change any element into one of several standard user interface elements.

Some of the common properties which are using in css3 User interface.

appearance , box-sizing, icon, resize, outline-offset, nav-down, nav-left, nav-right, nav-up For description: https://www.tutorialspoint.com/css/css3_userinterface.htm

Web fonts

are used to allows the fonts in CSS, which are not installed on local system.

What is Gradients?

displays the combination of two or more colors

Cascading Style Sheets (CSS)

is a style sheet language used for describing the look and formatting of a document written in a markup language.

The align-content Property .flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; width: 300px; height: 300px; background-color: lightgrey; }

modifies the behavior of the "flex-wrap" property. It is similar to "align-items", but instead of aligning flex items, it aligns flex lines. 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

Box sizing property - Example Above elements are having same height and width with box-sizing:border-box so result is always same for both elements or * { box-sizing: border-box; }

.div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; }

Media Queries Simple Examples

@media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left:216px;} } http://www.w3schools.com/css/tryit.asp?filename=trycss3_media_queries2

CSS3 has Supported additional color properties as follows

RGBA colors HSL colors HSLA colors Opacity

2D transforms common values

https://www.tutorialspoint.com/css/css3_2d_transform.htm

Methods of 3D transforms

https://www.tutorialspoint.com/css/css3_3d_transform.htm

Different web fonts formats

https://www.tutorialspoint.com/css/css3_web_font.htm

CSS3

is a latest standard of css earlier versions(CSS2) main difference : -Media Queries -Namespaces -Selectors Level 3 -Color -Model

CSS3 Responsive Web Design

provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles and tabs)

The flex-wrap Property .flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: 300px; height: 250px; background-color: lightgrey; }

specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line. 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

There are following most commonly used property in CSS3

text-align-last : Used to align the last line of the text text-emphasis : Used to emphasis text and color text-overflow : used to determines how overflowed content that is not displayed is signaled to users word-break: Used to break the line based on word word-wrap : Used to break the line and wrap onto next line

The align-items Property .flex-container { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 400px; height: 250px; background-color: lightgrey; }

vertically aligns the flexible container's items when the items do not use all available space on the cross-axis. 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

CSS3 - 3D transforms

we can move element to x-axis, y-axis and z-axis

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

@keyframes Keyframes for more example : https://www.tutorialspoint.com/css/css3_animation.htm

will control the intermediate animation steps in CSS3. @keyframes animation { from {background-color: pink;} to {background-color: green;} } div { width: 100px; height: 100px; background-color: red; animation-name: animation; animation-duration: 5s; }

opacity #g1 {background-color:rgb(255,0,0);opacity:0.6;} #g2 {background-color:rgb(0,255,0);opacity:0.6;} #g3 {background-color:rgb(0,0,255);opacity:0.6;}

- is a thinner paints need black added to increase opacity. - A sample syntax of opacity is as shown below −

What is Responsive Web Design?

- provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices -uses only HTML and CSS. - is not a program or a JavaScript.

RGBA #d1 {background-color: rgba(255, 0, 0, 0.5);} #d2 {background-color: rgba(0, 255, 0, 0.5);} #d3 {background-color: rgba(0, 0, 255, 0.5);}

- stands for Red Green Blue Alpha. - It is an extension of CSS2,Alpha specifies the opacity of a color and parameter number is a numerical between 0.0 to 1.0.

HSL #g1 {background-color: hsla(120, 100%, 50%, 0.3);} #g2 {background-color: hsla(120, 100%, 75%, 0.3);} #g3 {background-color: hsla(120, 100%, 25%, 0.3);}

- stands for hue, saturation, lightness. - Here Huge is a degree on the color wheel, saturation and lightness are percentage values between 0 to 100%. A Sample syntax of HSL as shown below −

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.

Media queries in CSS3

-Instead of looking for a type of device, they look at the capability of the device. -Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

You can also have different stylesheets for different media:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

Media Query Syntax @media not|only mediatype and (expressions) { CSS-Code; }

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.

Responsive Web Design - Grid-View http://www.w3schools.com/css/css_rwd_grid.asp

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

Responsive Web Design - Media Queries http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Always Design for Mobile First Add a Breakpoint

Responsive Web Design - Frameworks - Bootstrap Example: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Bootstrap is most popular web design framework based on HTML,CSS and Java script and it helps you to design web pages in responsive way for all devices

module

CSS3 is collaboration of CSS2 specifications and new specifications, we can called this collaboration is ______ Selectors Box Model Backgrounds Image Values and Replaced Content Text Effects 2D Transformations 3D Transformations Animations Multiple Column Layout User Interface

elements.Shadow

CSS3 supported to add shadow to text or _____ property has divided as follows Text shadow :text-shadow: 2px 2px red; Box Shadow :box-shadow: 10px 10px;

Setting The Viewport Explanation about the <meta> http://www.w3schools.com/css/css_rwd_viewport.asp

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. You should include the following <meta> viewport element in all your web pages: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Flex Item Properties : Perfect Centering .flex-item { background-color: cornflowerblue; width: 75px; height: 75px; margin: auto; }

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: To see the whole example : http://www.w3schools.com/css/css3_flexbox.asp

Types of gradients

Linear Gradients(down/up/left/right/diagonally) Radial Gradients for code example: https://www.tutorialspoint.com/css/css3_gradients.htm

Flex Item Properties : align-self .flex-item { background-color: cornflowerblue; width: 60px; min-height: 100px; margin: 10px; } .item1 { -webkit-align-self: flex-start; align-self: flex-start; } .item2 { -webkit-align-self: flex-end; align-self: flex-end; }

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: To see the whole example : http://www.w3schools.com/css/css3_flexbox.asp

Flex Item Properties : flex .flex-item { background-color: cornflowerblue; margin: 10px; } .item1 { -webkit-flex: 2; flex: 2; } .item2 { -webkit-flex: 1; flex: 1; }

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: To see the whole example : http://www.w3schools.com/css/css3_flexbox.asp

Fonts description: <style> @font-face { font-family: myFirstFont; src: url(/css/font/SansationLight.woff); } div { font-family: myFirstFont; } </Style>

The following list contained all the fonts description which are placed in the @font-face rule − font-family: Used to defines the name of font src : Used to defines the URL font-stretch: Used to find, how font should be stretched font-style: Used to defines the fonts style font-weight: Used to defines the font weight(boldness)

Flex Item Properties : Ordering .flex-item { background-color: cornflowerblue; width: 100px; height: 100px; margin: 10px; } .first { -webkit-order: -1; order: -1; }

The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container: to see the whole example : http://www.w3schools.com/css/css3_flexbox.asp

Size Content to The Viewport

Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally! Some additional rules to follow: 1. Do NOT use large fixed width elements 2. Do NOT let the content rely on a particular viewport width to render well 3. Use CSS media queries to apply different styling for small and large screens

2D transforms

_____ are used to re-change the element structure as translate, rotate, scale, and skew

flex-direction property .flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; width: 400px; height: 250px; background-color: lightgrey; }

_____ 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 , column, column-reverse

Box sizing property

______ is using to change the height and width of element.

CSS3 Rounded corners #rcorners7 { border-radius: 60px/15px; background: #FF0000; padding: 20px; width: 200px; height: 150px; }

_______ are used to add special colored corner to body or text by using the border-radius property

Animation

_______ is process of making shape changes and creating motions with elements.

The justify-content Property .flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; width: 400px; height: 250px; background-color: lightgrey; }

______________ 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

CSS3 Media Types

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

Some of most common used multi columns properties

column-count , column-fill, column-gap, column-rule, rule-color, rule-style, rule-width, column-span For description: https://www.tutorialspoint.com/css/css3_multi_columns.htm

CSS3 - Border image #borderimg { border: 10px solid transparent; padding: 15px; border-image-source: url(/css/images/border.png); border-image-repeat: round; border-image-slice: 30; border-image-width: 10px; }

is used to add image boarder to some elements.you don't need to use any HTML code to call boarder image.A sample syntax of boarder image is as follows −

CSS Multi background property #multibackground { background-image: url(/css/images/logo.png), url(/css/images/border.png); background-position: left top, left top; background-repeat: no-repeat, repeat; padding: 75px; }

is used to add one or more images at a time without HTML code, We can add images as per our requirement.A sample syntax of multi background images is as follows −

CSS3 contained several extra features, which is added later on

text-overflow word-wrap word-break