How to Animate Using CSS Transforms


From the previous posts about to transform elements and creating animations using CSS, you have learned the uses of transform property and different transformation functions used in transformation property and creating animations for any HTML elements using CSS animation property. In this post with combining both of the above concepts I am describing on how to animate elements using CSS transforms. Along with transforming elements, you can animate your transform using animation property in CSS with creating animations on elements on any action like mouse over, click etc. or with animating automatically on loading your web page.

How To Animate Using CSS Resize


You can animate HTML elements using scale function in transform property of CSS. Here an example that animate with re-sizing on mouse over and animate automatically in infinite iteration.

CSS Code:

h4{color:blue;}
.box{width:100px; height:70px; background:#aaffaa; border-radius:10px;text-align:center;position:relative;}
#box1:hover{-webkit-transform:scale(1.5,1.5);-moz-transform:scale(1.5,1.5);
-ms-transform:scale(1.5,1.5);transform:scale(1.5,1.5);background:#ffaa00;border-radius:10px;}

@-webkit-keyframes box2{
  from {-webkit-transform:scale(1,1);}
  50%  {-webkit-transform:scale(1.5,1.5);
     background:#ffaa00;}   
    to {-webkit-transform:scale(1,1);}
  }
  @keyframes box2{
  from {-moz-transform:scale(1,1);
        -ms-transform:scale(1,1);
        transform:scale(1,1);}
  50%  {-moz-transform:scale(1.5,1.5);background:#ffaa00;
    -ms-transform:scale(1.5,1.5);background:#ffaa00;
    transform:scale(1.5,1.5);background:#ffaa00;}
    to {-moz-transform:scale(1,1);
        -ms-transform:scale(1,1);
        transform:scale(1,1);}
  }
#box2{
  -webkit-animation-name:box2;
  -webkit-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-duration:6s;
 
  animation-name:box2;
  timing-function:linear;
  animation-iteration-count:infinite;
  animation-duration:6s;
}

HTML Code:

<div align="center" width="100%">
<h4>This Box is Animated With Scalling on Mouseover</h4>
<div class="box" id="box1">First Box</div><br/>
<h4>This Box is Animated With Scalling Automatically </h4>
<div class="box" id="box2">Second Box</div></div>

Preview:

Read More »

How to Create Animation Using CSS


You can create animations for any HTML elements using CSS animation property. This property allows you to assign name of animation, duration of animation play, style of animation, time to start animation, animation direction and number of times animation should play. There are sub properties for each animation property to assign and also have short hand property which is used to set all the animation properties at once where each value is defined by its named property. Like other shorthand properties, values may be omitted. Here are syntax and example of animation property to create animation.

Syntax:

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

Example:

#animation1 {
-webkit-animation: move 5s ease-out 0 infinite alternative;
-moz-animation: move 5s ease-out 0 infinite alternative;
}
While creating animations, @keyframes rule is used to define the properties that will be animated in an animation rule.

Syntax:

@keyframes: keyframe-name {percentage | from | to {css rules}}

Example:

@keyframes move {
from{left: 0; top:0;}
50% {left:500px;top:0;}
to  {left:500px;top:500px;}
 }

How To Assign Animation Name and Duration


There is a property animation-name, which is used to define the animations that should be run. The @keyframe directive specified defines the properties to animate. The keyword none can be used to override a cascade.

Syntax:

animation-name: @keyframe-name | none [,@keyframe-name|none]
Here, @keyframe-name is the name of the animation defined by an @keyframe directive.

There is another property animation-duration, which is used to define the time taken in one iteration of an animation to play where time is a valid time like 4s 400ms.

Syntax:

animation-duration: time [,time]

Example:

@-webkit-keyframes move {
from{left: 0; top:0;}
50% {left:300px;top:0;}
to  {left:300px;top:100px;}
}
@-webkit-keyframes resize {
from{height:300px;width:100px;}
50% {height:100px;width:100px;}
to  {height:100px;width:300px;}
}
@-webkit-keyframes fade {
from{opacity:1;}
50% {opacity:0.5;}
to  {opacity:0.1;}
}
@keyframes move {
from{left: 0; top:0;}
50% {left:300px;top:0;}
to  {left:300px;top:100px;}
}
@keyframes resize {
from{height:300px;width:100px;}
50% {height:100px;width:100px;}
to  {height:100px;width:300px;}
}
@keyframes fade {
from{opacity:1;}
50% {opacity:0.5;}
to  {opacity:0.1;}
}
#animation1{
-webkit-animation-name:move, resize, fade;
-webkit-animation-duration:10s, 10s, 10s;
-webkit-animation-iteration-count:infinite;
animation-name:move, resize, fade;
animation-duration:10s, 10s, 10s;
animation-iteration-count:infinite;
position:relative;
}

Demo:

Read More »

How To Transform Elements Using CSS


There is a property in CSS called transform property which can transform HTML elements in different ways like re-sizing elements, changing the shape of elements, rotating elements in certain angle and translating elements from one location to another location. For all of the above transformations there are functions scale(number, number), skew(angle, angle), rotate(angle) and translate(translation-value-x, translation-value-y) to use as the value of transform property. In this post I am describing the uses of transform property and different transformation functions used in transformation property.
Syntax: transform:list of transform-functions | none
Where transform-function includes functions used for re-sizing, skewing, rotating and translating elements.

How To Resize Elements Using CSS


You can resize HTML elements using scale function in transform property of CSS. The transformation function scale(number, number) scales the object by the scale values specified. Where 1 is the same scale of the object and numbers less than one scale the objects smaller and grater than one larger. If the second value for Y scale is omitted, it is assumed to be the same as the first. Other functions used for re-sizing elements are as follows.

scaleX(number)Scales the object only on the X axis keeping Y the same.
scaleY(number)Scales the object only on the Y axis keeping X the same.
scaleZ(number)Scales the object only on the Z axis to make 3-D shape.
scale3d(number, number, number)Same as scale(number, number) with adding parameter on Z axis.

Examples:

#transformXY{
 -moz-transform:scale(1.2, 1.9);
 -webkit-transform:scale(1.2, 1.9);}
#transformX{
 -moz-transform:scaleX(0.5);
 -webkit-transform:scaleX(0.5);}
#transformY{
 -moz-transform:scaleY(1.5);
 -webkit-transform:scaleY(1.5);}
#transformZ{
 -moz-transform:scaleZ(2.5);
 -webkit-transform:scaleZ(2.5);}
#transformXYZ{
 -moz-transform:scale3d(0.5,1.5,2.5);
 -webkit-transform:scale3d(0.5,1.5,2.5);}

Demo:

Read More »

How To Create Text Shadow Using CSS


You can create shadow effect of text using text-shadow property in CSS. In text-shadow property, the values are defined by a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order in the text itself. Each shadow effect must specify a shadow offset horizontally and vertically and may optionally specify a blur radius and a shadow color. Here are syntax and examples for creating text shadow using CSS.
Syntax: text-shadow: shadow1 [,shadow2, ......shadowN]
where each shadow value is defined as horizontal-offset vertical-offset [blur-radius] color

A shadow offset is specified with two length values, usually in absolute measurement, that indicate the distance from the text. In horizontal offset, offset value specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text.

The second length value specifies the vertical distances below the text. A negative vertical length value places the shadow above the text.

The optional blur radius may be specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect.

A color value may optionally be specified before or after the length values of the shadow effect. The color value will be used as the basis for the shadow effect. If no color is specified, the value of an inherited color property should be used.

Examples of Text Shadow Effects


Here are some examples for creating shadow effect of text using text-shadow property in CSS.

Text Shadow Without Blur Effect


You can create text shadow without blur effect with specifying value of blur radius 0 and specifying some value on horizontal and vertical offset. Here is an example of this type of text shadow.

Example:

.dropshadow {color:green;text-shadow:2px 2px 0 gray;}
.pinkshadow{color:red; text-shadow:pink 1px 0.1em 0px;}

Text Shadow With Blur on Bottom Right


Here is an example to create text shadow with blur effect appearing on bottom right side with specifying positive value on horizontal and vertical offset and specifying value in blur radius.

Example:

.redblurry {color:blue;text-shadow:3px 3px 5px red;}

Text Shadow With Blur on Same Position


Here is an example to create text with blur effect appearing on same position with specifying 0 on horizontal and vertical offset and specifying some value in blur radius.

Example:

.solar {color:white; text-shadow:black 0px 0px 5px;}

Left Shifted Text Shadow With Blur


You can create text shadow shifted on left of original text with blur effect with specifying negative value on horizontal offset and some positive value in blur radius. Here is an example of this type of text shadow.

Example:

.grayshadow{color:brown; text-shadow:gray -3px 0px 3px;}
.blueshadow{color:pink; text-shadow:blue -1px 1px 3px;}

Right Shifted Text Shadow With Blur


You can create text shadow shifted on right of original text with blur effect with specifying positive value on horizontal offset and some positive value in blur radius. Here is an example of this type of text shadow.

Example:

.rightshadow{color:red; text-shadow:#FF00AA 3px 0px 5px;}
.rightshadow2{color:brown; text-shadow:gray 5px 1px 2px;}

Top Shifted Text Shadow With Blur


Here is an example to create text shadow shifted on top of original text with blur effect with specifying negative value on vertical offset and some positive value in blur radius.

Example:

.green-top{color:#00AA00; text-shadow:green 0 -0.05em 1px;}

Bottom Shifted Text Shadow With Blur


Read More »

How to Make Gradient Image Using CSS


There is a function in CSS which creates a CSS gradient image that can be used anywhere an image URL is required. You can use this gradient image with including background-image, border-image and can also used on list-style properties. With this property, you can create two types of gradient image Linear and Radial. In linear gradient image, color moves from on point to another point i.e. from top to bottom, left to right etc. where as in radial gradient image, color moves from center point to outer in a circular form. In this post I am explaining the methods to create these two types of gradient images using gradient property in CSS.

How to Create Linear Gradient Image Using CSS


You can create linear gradient image with specifying type of gradient linear with start point, end point and stop point. On start point and end point you can specify the values left top, right top, left bottom, right bottom etc. The color-stop takes two arguments, the first of which is a number between 0 and 1 or 0 or percentage indicating the location of stop and the second argument is the color at that stop as a standard color value. Values from and to are used to specify starting color and ending color, from(color-value) and to (color-value) are shorthand or color-stop(0, color-value) and color-stop(1, color-value). Following are the syntax and examples for creating linear gradient images.

Syntax:

gradient: linear, start_point, end_point, stop1 [....stopN]

Top To Bottom Linear Gradient


Here is an example to display linear gradient from top to bottom. It starts from green transaction to blue.
#linear1 {
height: 80px;
background: -webkit-linear-gradient(green, blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(green, blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(green, blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(green, blue);
/* Standard syntax */
}

Left To Right Linear Gradient


Here is an example to display linear gradient from left to right. It starts from red transaction to green.
#linear2 {
height:80px;
background: -webkit-linear-gradient(left, red , green);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, green);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, green);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , green);
/* Standard syntax */
}

Diagonal Linear Gradient


Here is an example to display diagonal linear gradient starts at top left and goes to bottom right. It starts from brown transaction to blue.
#linear3 {
height:80px;
background: -webkit-linear-gradient(left top, brown , blue);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, brown, blue);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, brown, blue);
/* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, brown , blue);
/* Standard syntax */
}

Linear Gradient with Multiple Color Stops 


Here is an example to display linear gradient goes from top to bottom with multiple color stops. It starts from red transaction to green and gray.
#linear4 {
height:80px;
background: -webkit-linear-gradient(red, green, gray);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green, gray);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, gray);
/* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, gray);
/* Standard syntax */
}

Linear Gradient with Specified Arbitrary Stops 


Read More »

How to Make 2-Columns or 3-Columns Using CSS


If you want to make 2-Columns, 3-Columns or more then 3-Columns in a HTML document, it is possible using a CSS property columns which can be used to create and give style to columns. The columns property is a shorthand definition of the number of columns and their widths in a multi-column text flow. It has two values column-count and width, where column-count is a positive integer for the number of columns to flow the text into and width is a positive CSS length defining the width of each column. In this post I am describing the uses of different styles of columns using different column properties in CSS. Here are syntax and examples for creating columns in a HTML document with column property.
Syntax: columns: column-count width

Examples:

.two-column {columns:2 150px; -webkit-columns:2 150px;}
.three-column {columns:3 15em;-webkit-columns:3 15em;}

How to Create Columns and Setup Their Width


There is a property column-count, which defines the number of columns to create in a multi-column text flow.
Syntax: column-count: integer | auto

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;}
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;}
There is another property column-width, which defines the width of each column in a multi-column text flow. It has two values length and auto, where length is a positive value for width between columns in any valid CSS measurement. 
Syntax: column-width: length | auto

Examples:

.two-column {-moz-column-count:2; -webkit-column-count:2; column-count:2;-moz-column-width:300px; -webkit-column-width:300px; column-width:300px; }
.three-column {-moz-column-count:3; -webkit-column-count:3; column-count:3;-moz-column-width:200px; -webkit-column-width:200px; column-width:200px;}

Demo:


How to Control Column Element Breaks


There are two properties column-break-after and column-break-before, to control column elements breaks before and after an associated element. column-break-after property can control column break after the associated element when the following multi-column text.

This property has three values which are always, auto and avoid where value always should force a column break after the associated element, avoid attempts to avoid a column break after the element and the default value auto neither forces nor forbids a column break, allowing the user agent to decide how to break the content during flow. Here are the syntax and examples of this property.
Read More »

How to Change Display Style Using CSS


You can change the default display style of any HTML element using display property in CSS. This property specifies an elements display style and can override an element's defined presentation. The different values used in this property are inline, block, list-item, run-in, inline-block, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none and inherit. In this post I am describing the uses of those different types of display style using CSS. Here are the syntax and examples for changing display style of an element using CSS.

Syntax:

display: inline, | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Example:

div.ads{display:block;}

How to Make Display Style Inline or Block


Using value of display property of an element inline or block, you can make an element display inline or block. The value inline causes an element to act it were an inline element with no returns added.
Example: #intxt{display:inline;}
Another value of display property block makes an elements display block box. For this value all the elements are shown with line break, no elements can reside on both sides of an element.
Example: #inblock{display:block;}
You can also use value inline-block to display item as block, but other elements can reside on both sides of an element.
Example: #in-block{display:inline-block;}
There is another value run-in which will make the item inline or block depending on the context. If a block box that is not floated or positioned follows the run-in box it becomes the first inline box if the block, otherwise, it becomes a block.
Example: #runin{display:run-in;}
A list-item value creates a block for the list box and an inline box for items.
Read More »

How to Generate Custom Content Using CSS


Content property in CSS can generate custom content in a HTML document with the :before and :after pseudo-elements. With this property, you can add any string, image url, any attribute values, open quote and close quote before and after any element. You can also style a list by adding custom counter with adding additional content on a list. CSS rules can also be used to style the generated content. Here are syntax and examples for generating custom content in a HTML document with the:before and :after pseudo-elements.

Syntax:

content: normal | none | string | url() | counter | attr(x) | open-quote | close-quote | no-open-quote | no-close-quote | inherit

Example: 

div.add:before{content:"It is Generated Content";}

How to Insert String Content Using CSS


You can insert string content with most commonly used string value, which simply inserts the defined quote-delimited string either before or after the selected element depending on the rule in use. Here are syntax and examples for inserting string content in a HTML document with the:before and :after pseudo-elements.
Read More »

How to Customize List Style Using CSS


In CSS there is a property list-style which helps to customize style of a list. Using this property you can apply different types of list style like bullet, numbered and using custom image in bullet list ordered and unordered list. List styles values disc, circle and square are used on unordered lists and the values decimal, lower-roman, upper-roman, lower-alpha and upper-alpha are typically used on ordered lists. You can also use custom image on a list using list-style-image property. In this post I am describing the uses of those different types list style using list style properties in CSS.

Syntax:

list-style: list-style-type | list-style-position | list-style-image 

Example:

ul {list-style: inside url("image-bullet.gif");}
ol {list-style: upper-roman outside;}
ul {list-style: inside square;}

How to Add Custom Image in a List


You can assign a graphic image to a list item using CSS list-style-image property. You have to give image url on this properties value. Here are the syntax and examples for adding custom image in a list.
Read More »

How to Apply Border Color, Style and Width Using CSS


With CSS border property, you can apply border along with specific color, style and width to any HTML element. In CSS border property you can specify three values for width, style and color. Where width sets all borders in numeric measurement or with a named value of thin, medium and thick. The second value style is used to set the style of the border and is set to a value of dashed, dotted, double, groove, hidden, inset, none, outset, ridge, or solid. The last value color is used to set the color of the border using a CSS color value.
Syntax: border: border-width border-style border-color
Example: p {border: 2px double red;}

How to Apply Border for Individual Sides


As mentioned  on border property you can apply border property for individual sides top, bottom, left and right with specifying values for them. There are border properties for each sides border-top, border-bottom, border-left and border-right respectively. You can specify values of border-width, border-style and border-color for border property of each sides.
Read More »

How To Set Background Image or Color Using CSS


With background property in CSS, you can set background color or image in HTML element. There are different sub-properties of background property, which are background-color-to set background color, background-image-to set image in a background, background-repeat-to tile image in background when image is smaller than the canvas space, background-attachment-to set an image to scroll or fixed and background-position-to set the position or align of an image. Using short hand property of background, you can specify all of these sub-properties at a time as given below.
Syntax: background: background-color background-image background-repeat background-attachment background-position;
Example: #section1 {background: pink url(back.png) no-repeat fixed 10px 10px;}

How to Set Background Color Using CSS


You can set background color using background-color property. The default value of this property is transparent, which allows any underlying content to show through. You can specify color value in any format for this property.
Syntax: background-color: color|transparent|inherit
Example: #para1{background-color:#00AAFF;}

Demo:

See the Pen zGQGzx by Shuseel Baral (@shuseel) on CodePen.

How to Set Background Image Using CSS


CSS allows to set an image in background using background-image property. This property associates a background image with an element. Content laying under may show through transparent regions in the source image. The background image requires a URL whether complete or relative to link it to the source image specified with the url() syntax. The default value for this property is none which sets the background so that is doesn't display image.
Read More »

How to Style Multiple Sections of an HTML Document Using CSS [cont.]


We have already discussed that, we can style multiple sections of an HTML document using CSS selectors pseudo classes and have discussed on some pseudo-class selectors like link related pseudo classes, activity related pseudo classes and interface state pseudo classes. In this post we are going to discuss about rest of the other pseudo class selectors which are document tree pseudo classes, language pseudo class and negation pseudo class.

Document Tree Pseudo Classes


The HTML document tree is a standard object model and programming interface for HTML. It defines the HTML elements as objects, properties of all HTML elements, methods to access all HTML elements and events for all HTML elements. You can control and style different elements in HTML document tree using CSS pseudo classes.

CSS2 supports different pseudo classes for a HTML document tree like :first-child, :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n) and :nth-last-of-type(n).

The :first-child pseudo class selector selects the elements that are the default among a set of similar elements. For example,
ul li:first-child {color:brown;}
would make the first <li> tag found within <ul> brown color.

Similarly, the :last-child pseudo class selector selects the elements that is the last child or its parent. For example,
ul li:last-child {background-color:pink;}
would make the last list item in an unordered list have blue text and background color pink.
Read More »

How to Style Multiple Sections of an HTML Document Using CSS


In the previous post I have talked about selecting particular portion of an HTML document while designing web pages. Similarly this, you may also style multiple sections of an HTML document using CSS. There are selectors pseudo classes like pseudo elements allow CSS selectors to specify styles for multiple sections of a document tree that may not have style groups clearly associated with them. Traditionally, pseudo classes were dominantly used with link states and simple interface states, but under CSS2 and CSS3, the number of pseudo classes has exploded to include a wide variety of document position and tree logic selectors. Here I am describing syntax and examples of different pseudo-class selectors used in CSS.

Link Related Pseudo Classes


If you are new with using web sites, you'll know that there are three primary states of typical text links: unvisited, visited and active -in which the link text color is blue, purple and red, respectively. In CSS, the presentation of link states is controlled through the pseudo class selectors- a:link, a:visited and a:active.
a:link {color:green; text-decoration:none;}
a:active {color:pink; background-color: #00aaff;}
a:visited {color:brown; text-decoration:none;}
CSS2 also adds a:hover for the mouse hovering over a link. Similarly, the pseudo class :focus would be selected when the link gains focus, generally through keyboard navigation.
a:hover {color:red; text-decoration:underline;}
a:focus {border:1px dashed #00aaff}

Example:

Here is an example to illustrate the uses of a:link, a:active, a:visited, a:hover and a:focus Pseudo-Classes in HTML document.
CSS code: a:link {color:green; text-decoration:none;}
a:active {color:pink; background-color: #00aaff;}
a:visited {color:brown; text-decoration:none;}
a:hover {color:red; text-decoration:underline;}
a:focus {border:1px dashed #00aaff}
HTML code: <a href="http://www.siteforinfotech.com">Infotech Site-Best Place For Complete IT Tips</a>

Demo:

See the Pen PqgqXX by Shuseel Baral (@shuseel) on CodePen.

Activity Related Pseudo Classes


I have just talked about link related pseudo classes a:hover and a:focus-used mainly to change the appearance of links when user hover and focus on them. There are another pseudo classes related to user activity, they are :hover and :focus-can apply pseudo class to any element. The :focus pseudo class is used to apply a rule to an element only when that element has focus. To set any text input field to have pink background color when it gains focus, you could use the following rule.
Read More »

How to Select Particular Portion of an HTML Document Using CSS


While designing web pages, you may face a problem in which you want to select particular portion of an HTML document but there is not a defined element associated with it. CSS provides the ability to style portions of a document tree without a unique element associated with the content. CSS creates an element to effect this change in a particular portion of an HTML document, such selectors are called pseudo-element selectors. Here I am describing syntax and examples of different pseudo-element selectors used in CSS. 

:first-letter and :first-line Pseudo-Elements


If you want to style the first line of a paragraph or a first character of a paragraph, it would be easy enough to specify a CSS selector. However, we might not actually have a full element that the rule is bound to, so a pseudo-element is thus implied. For example If you want to make the first character of a paragraph large, which was usually in Newspaper design, you can use pseudo-element rule :first-letter to bind style.
p:first-letter {font-size:xx-large; color:red;}

It would make every first letter of paragraph large and red. You can also make the initial line of paragraph a different style using the :first-line pseudo-element.
p:first-line {font-size:large; font-weight:bold;}

It would make every first line of paragraph large and bold. These pseudo-classes aren't limited to <p> tags but they are generally limited to block elements.

Under CSS3, the syntax of pseudo-elements has been changed to have two colons, so :first-line becomes ::first-line and :first-letter becomes ::first-letter.
Read More »