CSS3 (Web Designing)

Zoom Hover Effect with CSS3 Only

2015-01-15T04:41:00.000-08:00

In my opinion design is the thing which really and only matters for a great site. People use to come back where they got attracted to some thing, and design is the thing which can work as a magnet for your visitors.

In this tutorial I'll describe a cool effect which is based upon CSS3 Transform property. We will use this effect to zoom any HTML element on mouse over.

Below is the HTML code, so you can better understand the classes used in the CSS3:

<div class="dialog-popup">
    <div class="dialog-container">
        <h1>Hover On The Browser Icons</h1>
        <div class="browser-icon">
         <a href="#" class="chrome-icon"><i>&#160;</i></a>
         <a href="#" class="moz-icon"><i>&#160;</i></a>
         <a href="#" class="opera-icon"><i>&#160;</i></a>
         <a href="#" class="safari-icon"><i>&#160;</i></a>
         <a href="#" class="ie-icon"><i>&#160;</i></a>
     </div>
    </div>
</div>

I hope everyone understand the HTML shown in the above snippet. The <i> tags are used to show the icons in between there. And &#160 is an HTML Entity. It is used to show a space in the output.

CSS for class dialog-popup

.dialog-popup {
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #333;
  font: 12px/20px Lato, "lucida grande", Arial, Tahoma, Verdana, sans-serif;
  z-index: 1;
}

Explanation: The things are rather simpler in the above code. The z-index: 1; specifies the stack order for the particular class.

CSS for class dialog-container

.dialog-container {
  width: 724px;
  padding: 30px 0;
  max-height: 290px;
  min-height: 290px;
  position: relative;
  top: 50%;
  margin: -145px auto 0;
  background-color: #fff;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0px 0px 10px #000;
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px 10px #000;
}

Explanation: The above CSS3 will change the div with class dialog-container into a popup. Here in this code, the top property sets the popup's top edge below 50% inside the dialog-popup. The shadow property will create a glowing effect. -webkit- and -moz- are used with properties for Cross-Browser support.

CSS to create Zooming Effect

.dialog-container .browser-icon {
  margin: 50px 0;
  text-align: center;
}
.dialog-container .browser-icon a {
  padding: 10px;
  display: inline-block;
  border-radius: 2px;
  border: 1px solid #fff;
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
}
.dialog-container .browser-icon a:hover {
  border: 1px solid #D5EAF2;
  border-bottom: 3px solid #A1CBDA;
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
.dialog-container .browser-icon a:active, .dialog-container .browser-icon a:active:hover {
  background: #D5EAF2;
}

Explanation: In the above CSS3 we are styling the a tags, which we have used in the above HTML markup. Actually, these a tags are the real images that we wanted to zoom on hover. In the second set of CSS properties, there are just a simple couple o things related to general styling of a tags. Transition property is used to create a nice looking transitional effect on hover. So, the styling defined below appears with some effect rather than appearing at once, which don't look so nice to me :P.
Now, the third set of above Code, is the very very important part. In this part we have increased the size of the a tags. But not with that width and height technique. Here we are using CSS Transforms. In .dialog-container .browser-icon a:hover we have used the border and border-bottom properties. As, you all probably know, the border is used to create a thin line around the a tags on hover (mouse over). And border-bottom is used to change the bottom border separately. The overall border is set to 1px but the bottom border is set to 3px which will be a thinner than the overall border around the a tags.
Transform property is used to change the size of a tags and its contents. Scale(1.1,1.1) will increase the width and height of a tags, when you will hover over them. The last and final set of CSS is used to change the background color of a tags on click (active). This will also add some cool effect you will see.

CSS to Set the Icons into a tags

.dialog-container .browser-icon a i {
  display: inline-block;
  width: 104px;
  height: 104px;
  background: url(browsericons.png);
}
.dialog-container .browser-icon a.chrome-icon i {
  background-position: 0 0;
}
.dialog-container .browser-icon a.moz-icon i {
  background-position: -104px 0;
}
.dialog-container .browser-icon a.opera-icon i {
  background-position: -208px 0;
}
.dialog-container .browser-icon a.safari-icon i {
  background-position: -312px 0;
}
.dialog-container .browser-icon a.ie-icon i {
  background-position: -416px 0;
}

Explanation: The CSS under .dialog-container .browser-icon a i will set the background, width and height and display for <i> </i> tags inside a tags.
Here it is important to note that, we are not using separate images for each icon tag. But it's a single image (See image Here).
In the below sets, we have set the position of the background for all of a tags used in the HTML markup above.
When we use the background property it will set the image as a background image for a tags. Now, in the below parts of CSS, we are specifying that what part of image we want to see in the particular a tag, with the help of background-position property.
In .dialog-container .browser-icon a.chrome-icon i, background position is set to 0 0. It means, it will be showing the image's first 104 pixels (because the width and height of <i> tags is set to 104px).

Under .dialog-container .browser-icon a.moz-icon i, the background position is set to -104 px. Now, in this <i> tag, the second part of image will be visible. Which will consist of Mozilla Icon.

And so on...

See the live working demo with all of code in the pen below:

See the Pen Zoom Hover Effect by Asna Farid (@asna_farid) on CodePen.

Note: This post is inspired by Asna Farid's pen on Codepen. This is why, the original pen is shown above.

Simple Drop Down Menu using CSS Only

2014-12-15T11:25:00.000-08:00

In this article we will learn how to create a simple drop-down menu using CSS3 only.
I don't think if anybody isn't familiar with a drop-down menu. But if you don't know about drop-down menu, then this is a navigation bar on the top of web pages with some DROP-DOWN effect just like this one:

http://goo.gl/KTlvkM

Now just look at this HTML code:

<ul id="top-menu">
  <li><a href="#">Languages</a>
    <ul>
      <li><a href="#">Ruby</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">C++</a></li>
    </ul>
  </li>
  <li><a href="#">Browsers</a>
    <ul>
      <li><a href="#">Chrome</a></li>
      <li><a href="#">Opera</a></li>
      <li><a href="#">IE</a></li>
      <li><a href="#">Firefox</a></li>
      <li><a href="#">Safari</a></li>
    </ul>
 </li>
 <li><a href="#">Operation systems</a>
   <ul>
     <li><a href="#">Windows</a></li>
     <li><a href="#">Linux</a></li>
     <li><a href="#">FreeBSD</a></li>
     <li><a href="#">Mac OS</a></li>
   </ul>
 </li>
 <li><a href="#">Others</a></li>
</ul>

This will create simple looking nested lists, looking like this:

These are just multi level lists. Drop-Down menus are created using lists. CSS converts this multi-level lists into a drop down menu.
Let's look at the CSS. This CSS is divided into several groups. Each group has its own functionality.
Look at this code snippet:


#top-menu, li ul { 
     
    list-style: none; 
     
    margin: 0px; 
     
    padding: 0px; 
     
   }

The above CSS code has removed all bullets and aligned them in single line.

Now we need to align the main menu (Language, Browser, Operation Systems and Others) into a single line.


#top-menu li { 
     
  float: left;  
     
  position: relative;  
     
       } 

#top-menu li a { 
     
  display: block; 
     
  }

Above CSS code aligned the main menu in the single row on left

To place a sub menu item over the main menu item you must apply position: absolute; property to that sub menu item:


#top-menu li ul {  
     
  position: absolute; 
     
   }

Applying the above CSS will align the sub menu items under the main menu vertically.
Now this is the main part of the drop down menu. Now we have to write the code that will change all these menus in such a ways that, when we hover over some main menu item, the corresponding drop down menu should appear, otherwise it should be hidden under that main menu entry.


#top-menu li ul { 
     
  visibility: hidden; 
     
 } 

#top-menu li:hover ul { 
     
  visibility: visible; 
     
 }

The first block of the above code is to hide the sub-menu entries in the normal position. The second part will be executed when we hove over the main menu options. It will show its effect if the main menu entry has some sub-menu underneath. When we hove over that entry, the corresponding sub menu entry will be shown in the drop down. You can apply padding to to make the entries separate to look readable.
Below pen shows the output and the code as well.

See the Pen simple CSS drop-down menu by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

Create a flashing/glowing button using CSS3 only

2014-12-04T05:02:00.001-08:00

In this tutorial we will learn how can we create a cool and good looking glowing/flashing button on our web pages, that can highlight, which matters the most on our web page.
The glowing/flashing effect can be applied to both, links and the form buttons.

To create this effect we will be using CSS3 animations. If you don't know how to create CSS3 animations, please refer to our previous article "CSS3 ANIMATIONS - @KEYFRAMES RULE".

Animations are too easy to use to create nice looking effects on our web pages using CSS3. It can replace the traditional flash animations.
Let's get back to our work. Here is the simple HTML code which creates a simple LINK and BUTTON :

<a href="#" class="glowingbutton" > Click me! </a>
<button type="submit" class="glowingbutton"> Click me! </button>

Now the below CSS will change the basic properties (color, fonts, width, height, borders etc.) of the above two buttons:


.glowingbutton {  
     
  background-color: #004A7F; 
     
  -webkit-border-radius: 10px; 
     
  border-radius: 10px; 
     
  border: none; 
     
  color: #FFFFFF; 
     
  cursor: pointer; 
     
  display: inline-block; 
     
  font-family: Arial; 
     
  font-size: 20px; 
     
  padding: 5px 10px; 
     
  text-align: center; 
     
  text-decoration: none; 
     
  animation: glowing 1500ms infinite; 
     
}

The below part of CSS3 is the all, what we need to create the glowing effect.
We will use @keyframe rule to make this animation. There will be three keyframes in our animation. One will be at 0%, second will be on 50% and third on 100%.

At 0% the background color of the button will be dark red and the background shadow will be light red at 3px distance.
At 50% the background color of the button will be light red and the background shadow will also be light red but at 20px distance, so that it create a good glowing effect.
and At 100% the background color and background shadow will be as same as at 0%.


@keyframes glowing { 
     
  0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } 
     
  50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; } 
     
  100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; } 
     
}

In the below code pen the sample output and the code is given. The code in the below pen is also useful for cross browser solution (will give same output in every browser).

See the Pen glowing/flashing button by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

CSS Image Filters - blur(), grayscale(), drop-shadow() etc...

2014-11-24T09:12:00.001-08:00

CSS Image filters are tools that offer developers to create cool varying visual effects on HTML elements like blur and grayscale. These filters are just like filters in the photoshop.
Filters are commonly used to render the effects on images, backgrounds and borders etc.
You can use any of the below mentioned:

blur()
brightness()
contrast()
url()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
sepia()

The syntax:

 
element { 
      
filter: filter-function(value) | none; 
    
}

Multiple filters can be applied using space between each function.

Single Filter being used:

grayscale() give a black and white effect on any element. Its value can vary from 0% to 100%.


img { 
    
filter: grayscale(100%); 
    
}
Output

Multiple filters being used:

You can also use multiple filter functions in the same line separating them with space between each other.


img { 
    
filter: grayscale(60%) blur(2px); 
    
}
Output

Filter Functions

To use filter functions, each functions is applied with some value. Some take values in %age and some in decimals. There are a also some functions which take values in pixels.

Below we will use all of the filter functions to this image:

1. grayscale()


filter: grayscale( %age );

This filter is provided with %age. The value 100% indicates the full grayscale effect. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.

See the Pen grayscale() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

2. sepia()


filter: sepia( %age );

This filter converts this image to sepia. The value provided to this filter is in %age. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.

See the Pen sepia() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

3. saturate()


filter: saturate( %age );

This filter saturates the input image. %age value is provided to this filter. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.

See the Pen saturate() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

This filter doesn't show too much effect like others, but you can also use this one if needed.

4. hue-rotate()


filter: hue-rotate( angle );

This filter applies hue rotation to the input image. The values is provided with some angle. Angle can be anything from 0deg to 350deg.

See the Pen hue-rotate() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

5. invert()


filter:  invert( %age );

Inverts the samples in input image. %age value is provided to this filter. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.

See the Pen invert() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

6. opacity()


filter:  opacity( %age );

Opacity function applies transparency to the samples in input image. This is the function for more developed property opacity. Its value is provided in %ages. 0% is full transparent and 100% will leave the content unchanged.

See the Pen opacity() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

7. brightness()


filter: brightness(100%);

This filter increases/decreases the brightness of content in image. The value is provided with %age. 0% will create full darkness. 100% is the original image's brightness. If no value is provided then 100% is used as default. The values more than 100% are allowed providing the brighter results.

See the Pen brightness() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

8. contrast()


filter: contrast(%age);

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the “amount” parameter is missing, a value of 100% is used.

See the Pen contrast() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

9. blur()


filter: blur(3px);

Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

See the Pen blur() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

10. drop-shadow()


filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type
This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

See the Pen drop-shadow() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

CSS Gray-Scale Image Tint - Change the Color of Image on Hover

2014-11-23T14:25:00.000-08:00

Images are a big part of any site these days. As CSS3 allows us to decorate and stylize our sites to look more attractive and more elegant. So, it also comes with a lot tricks to customize images on our sites. You can create a lot of cool stuff using CSS3.

The above images is Gray Scaled with CSS3. May be its's not such a good idea to use such old styles on our sites these days. But what if, when we hover over the image, it turns colorful?

Yeah! It sounds cool.

Check out here: Example

Now, let's see how to create this.
We can do this effect using CSS Image Filters. Image filters are like Photoshop Filters for browser.

Filters can be applied to any image with a simple line of code:


img { 
     
filter: grayscale(50%); 
     
}

To create the effect as it is in above example, there are many ways.
We will be using a simplest trick to do so. Just look at this code snippet:


.tint img { 
     
	display: block; 
     
	transition: all 0.7s linear; 
     
	filter: grayscale(100%); 
     
	-webkit-filter: grayscale(100%);    
     
	-moz-filter: grayscale(100%);     
     
	-o-filter: grayscale(100%);      
     
	} 

.tint img:hover {
	filter: grayscale(0); 
     
	-webkit-filter: grayscale(0);    
     
	-moz-filter: grayscale(0);     
     
	-o-filter: grayscale(0);     
     
	}

In the above snippet we have a div named .tint , which contains image that on which we want to apply the style. transition: all 0.7s linear; will create some cool transitional effect on hover, so it don't change its color at once.
The strategy we are using in creating this effect is very simple. When the image is loads its already gray-scaled to 100% (filter: grayscale(100%);).
And as we can see in the .tint img:hover , the grayscale is turned to 0% , so that it comes into its original condition (full colored).

Have a look at this codepen:

See the Pen Simple but nice looking Image Tint by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

CSS3 Animations - @keyframes Rule

2014-11-09T12:32:00.000-08:00

CSS3 animations can replace the old fashioned flash animations. You can lessen the bandwidth usage by replacing the flash animations with CSS3 animations.
This is a simple example of CSS3 animation, a div element changing its background from red to yellow:

@keyframes rule

The @keyframes is where the animations is created. Now if you don't know about "frames", here it is:

A key frame in animation and filmmaking is a drawing that defines the starting and ending points of any smooth transition. The drawings are called "frames" because their position in time is measured in frames on a strip of film.

I think its clear now. In the @keyframes rule we create the frames or starting and ending points for any animation.
Specify any style in "frame" and the animation will gradually change from current style to the specified new style.

CSS3 animation

When an animation is created in the @keyframes rule, you must attach it to some HTML element to work. Otherwise the animation will remain useless and will show no effect.

Bind the animation to any selector (HTML element) with specifying at least two properties:

the name of the animation
the duration of the animation

Below code snippet is to create an animation of 5sec on div element with name myfirst:


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


/* Chrome, Safari, Opera */ 

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


/* Standard syntax */ 

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

Output

Note: You must have to specify the duration time for an animation. If no time is specified, the animation will have no effect, because the default value is 0.

CSS3 animations (explained)

An animation is

the technique of photographing successive drawings or positions of puppets or models to create an illusion of movement when the film is shown as a sequence.

CSS3 animation let any element gradually change from one style to another.
You can change as many properties as you want, as many times you want.
You can specify that at what frame change should happen in percents, or you can use the keywords "from" and "to" to specify the changes.
"From" represents 0% and "to" represents 100%.
0% represents the start of the animation, and 100% represent the end of the animation.


/* Chrome, Safari, Opera */ 

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


/* Standard syntax */ 

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

Output

In the below example there is a div element, which changes its background color as well as its position at the given time:


/* Chrome, Safari, Opera */ 

@-webkit-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;} 
    
} 



/* Standard syntax */ 

@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;} 
    
}


Output

We can also make an animation with infinite loop. Means some time you just need an animation no to stop, you want it to keep running. You can also do this in CSS3 animations.
To create an animation with infinite loop you just need to declare the animation this way:


div { 
    
animation: myfirst 5s infinite; 
    
}

The "infinite" keyword in the animation declaration will cause the animation not to stop until we close the webpage.
Look at this more good example of CSS3 animation:


div { 
    
    /* Chrome, Safari, Opera */ 
    
    -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; 
    
    /* Standard syntax */ 
    
    animation-name: myfirst; 
    
    animation-duration: 5s; 
    
    animation-timing-function: linear; 
    
    animation-delay: 2s; 
    
    animation-iteration-count: infinite; 
    
    animation-direction: alternate; 
    
    animation-play-state: running; 
    
}

Output

The above code snippet can be summarized into one single line of code as follows (the output will remain same) :


div { 
    
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */ 
    
    animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */ 
    
} 

 Output

CSS3 Animation Properties

Property	Description
@keyframes	Specifies the animation
animation	A shorthand property for setting all the animation properties, except the animation-play-state and the animation-fill-mode property
animation-delay	Specifies when the animation will start
animation-direction	Specifies whether or not the animation should play in reverse on alternate cycles
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode	Specifies what styles will apply 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
Qouted from: W3Shools

CSS3 3D Transforms: rotateX() , rotateY()

2014-11-02T09:10:00.002-08:00

CSS3 transforms extends CSS transforms to allow elements rendered by CSS to be transformed in three-dimensional space.

In this chapter we will learn about some of 3D transforms methods:

rotateX()
rotateY()

The rotateX() method:

rotateX(angle) method, rotates any element around its X-axis at a given degree(angle).

Look at the example below:

 div { 
        
    -webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */ 
        
    transform: rotateX(120deg); 
        
}
Output

The rotateY() method:

In rotateY() method, you can rotate any HTML element around its Y-axis at a given degree.

 div { 
        
    -webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */ 
        
    transform: rotateY(130deg); 
        
}
Output

CSS3 transforms properties:

Property	Description
transforms	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
Source: W3Schools

CSS3 Radial Gradients

2014-10-26T01:51:00.000-07:00

A radial gradient is defined by its center.
To create a radial gradient you have to specify at least two color stops.
Below is a simple looking Radial Gradient, created using CSS3:

Syntax:

backgroud: radial-gradient(shape size at position, start-color, ..., end-color) ;

Radial Gradient - Evenly spaced color stops (default)

By, default, color stops are evenly spaced in Radial Gradients.

Below code snippet creates an radial gradients:


#grad { 
        
  background: -webkit-radial-gradient(red, green, blue); 
        
  background: -o-radial-gradient(red, green, blue); 
        
  background: -moz-radial-gradient(red, green, blue); 
        
  background: radial-gradient(red, green, blue); 
        
}
Output

Radial Gradient - Differently spaced color stops

You can also specify a custom space for every color in radial gradient.

Look at this example:


#grad { 
     
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); 
     
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); 
     
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); 
     
  background: radial-gradient(red 5%, green 15%, blue 60%); 
     
}
Output

Define Shape

You can also specify different space in radial gradient.

shape parameter, takes as values, either circle or eclipse. Default value is eclipse.

The below code snippet creates a radial gradient of a circle shape:


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

Use different Size Keywords

Size keywords, define size for radial gradients.

It can take any of these four values:

closest-side
farthest-side
closest-corner
farthest-corner

Example:


#grad1 {
  
     
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); 
  
     
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
 
     
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

     
  background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);

     
}

 #grad2 {
 
     
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
 
     
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
 
     
  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
 
     
  background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);

     
}
Output

Repeating Radial Gradient

repeating-radial-gradient is used to repeat a radial gradient:

Example:


#grad {

      
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
 
     
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
 
     
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
 
     
  background: repeating-radial-gradient(red, yellow 10%, green 15%);

     
}
Output

CSS3 Linear Gradients

2014-10-25T13:55:00.001-07:00

Linear Gradient

Gradients allows you to add a simple and smooth transitions between specified colors (the above example describes you a liner gradient in the form of a rainbow).

Early you have to use images to do so, but now CSS3 let you this very easily.
Using CSS3 gradients, you can reduce you bandwidth usage too. In addition, CSS3 gradients looks better when zoomed out, because gradients are generated by the browser itself.

In CSS3 there are, two types of Gradients:
1. Linear Gradients (from top to bottom / from left to right)
2. Radial Gradients (defined by their center)

Here we will just talk about Linear Gradients. For Radial Gradients, you can reed next post.

CSS3 Linear Gradients

To create a Linear Gradients you must at least define two color stops. Color stops are the colors in which you want to create a transitional look.

Syntax:

CSS3 gradients are being generated using the following syntax:

background: linear-gradient ( direction, color-stop1, color-stop2, ... );

Linear Gradient - Top to Bottom (its default)

This code generates a gradient which starts from and ends at bottom, transitioning between red to blue:



#grad { 
     
  background: -webkit-linear-gradient(red, blue); 
     
  background: -o-linear-gradient(red, blue);  
     
  background: -moz-linear-gradient(red, blue);  
     
  background: linear-gradient(red, blue);  
     
}
Output

Linear Gradients - Left to Right

This is an example of linear gradients that starts from left:


#grad { 
     
  background: -webkit-linear-gradient(left, red , blue);  
     
  background: -o-linear-gradient(right, red, blue);  
     
  background: -moz-linear-gradient(right, red, blue);  
     
  background: linear-gradient(to right, red , blue);  
     
}
Output

Linear Gradients - Diagonal

CSS3 allows you to create DIAGONAL linear gradients too.

To create a Diagonal Linear Gradient, you have to specify both ending and starting point and two colors.

Below is the example demonstrating a linear gradient:


#grad { 
     
  background: -webkit-linear-gradient(left top, blue, yellow); 
     
  background: -o-linear-gradient(bottom right, blue, yellow); 
     
  background: -moz-linear-gradient(bottom right, blue, yellow); 
     
  background: linear-gradient(to bottom right, blue, yellow); 
     
}
Output

Using Angles

We can also specify an angular transition in Linear Gradients. Angles can be used to control the direction of an linear gradient.

Below example demonstrates a gradient which is created by using an angle of 45deg.


#grad { 
     
  background: -webkit-linear-gradient(45deg, red, blue);  
     
  background: -o-linear-gradient(45deg, red, blue); 
     
  background: -moz-linear-gradient(45deg, red, blue);  
     
  background: linear-gradient(45deg, red, blue); 
     
}
Output

Using Multiple Color Stops

The CSS3 gradients are not limited to only two colors in a gradients, you can use as many colors as you want.

For this you just need to define all of the colors you want to show in a gradients.

The below code explains how to create a rainbow looking gradient with some text in it:


#grad { 
     
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
     
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
     
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
     
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
     
}
Output

Using Transparency

Well, to create a nice looking gradient, CSS3 gives you another thing, Transparency.!

You can create a fading effect using transparency.

To add transparency we use rgba() to define color stops. In rgba() the last parameter indicates the transparency. Which can be a value from 0 to 1.

0 indicates full transparency and 1 indicates full color (no transparency).

below example defines a gradient with some transparent effect:


#grad1 { 
     
    height: 200px; 
     
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); 
     
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); 
     
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); 
     
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 
     
}
output

CSS3 2D Transforms (Part III) - skew() , matrix()

2014-10-17T05:29:00.003-07:00

skew()

skew() can be use to turn an element to a given angle. With skew() property, element is turned to an angle according to the parameters given for horizontal line (X-axis) and vertical line (Y-axis).


div#div2 { 
    
    -ms-transform: skew(30deg,20deg); /* IE 9 */ 
    
    -webkit-transform: skew(30deg,20deg); /* Chrome, Safari, Opera */ 
    
    transform: skew(30deg,20deg); /* Standard syntax */ 
    
}

This is the output of above mentioned code snippet:

matrix()

The matrix() method combines all of the 2D transforms.

It takes six parameters containing mathematical mathematical functions. Which allows you to rotate, scale, move(translate), and skew elements respectively.

The below example demonstrates how we can rotate any element using matrix() method:


div#div2 { 
    
    -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ 
    
    -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Chrome, Safari, Opera */ 
    
    transform: matrix(0.866,0.5,-0.5,0.866,0,0); /* Standard syntax */ 
    
}

This is the output of above mentioned code:

For detailed CSS3 2D transforms Methods, Visit Next Post.

CSS3 2D Transforms Methods (Table)

2014-10-17T05:29:00.001-07:00

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X-axis and Y-axis
translateX(n)	Defines a 2D translation, moving the element along X-axis
translateY(n)	Defines a 2D translation, moving the element along Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the element's width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameters
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X-axis and Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis

quoted form: W3Schools.com\

CSS3 2D Transforms (Part II) - translate() , scale()

2014-10-13T11:22:00.000-07:00

This is another tutorial about CSS3's 2D Transforms.
In this tutorial we will be discussing translate() and scale() properties of 2D transforms.

translate()

Using this property we can move any element from it's current position to some where else, except Space :P

I mean, if a div box's initial position is 10px form right and 10px from top. With transform() we can move it from 10px right to 50px right and from 10px top to 50px top.
Not just 10's and 50's, you can choose these values, whatever you want.

Look at the code snippet below:


div#div2 { 
     
    -ms-transform: translate(50px,100px); /* IE 9 */ 
     
    -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */ 
     
    transform: translate(50px,100px); /* Standard syntax */ 
     
   }

Look at the output:

Well, let's try something cool in the above example. Just hover over the "Second DIV element", and see:

Here is the whole CSS3 code used for second output box:


div { 
     
    width: 100px; 
     
    height: 75px; 
     
    background-color: red; 
     
    border: 1px solid black; 
     
    transition: 0.3s; 
     
    -webkit-transition: 0.3s; 
     
    -ms-transition: 0.3s; 
     
    -o-transition: 0.3s; 
     
   } 
 


div#div2 { 
     
    -ms-transform: translate(50px,100px); /* IE 9 */ 
     
    -webkit-transform: translate(50px,100px); /* Chrome, Safari, Opera */ 
     
    transform: translate(50px,100px); /* Standard syntax */ 
     
background-color: yellow; 
     
   }

scale()

This property is used to change the width and height of any HTML element using CSS3.

You can do pretty much cool things using this property e.g., a popping out image on hover, or some DIV element increasing its width and height on hover etc.

Hover over the second DIV element, and see:

The code used in the above example is:


div#div2 { 
     
    -ms-transform: scale(2,3); /* IE 9 */ 
     
    -webkit-transform: scale(2,3); /* Chrome, Safari, Opera */ 
     
    transform: scale(2,3); /* Standard syntax */ 
     
   }

You can try alot of different effects using CSS3 2D transforms. Just play with them, apply them to some of the images, and see the results. If you face any kind of difficulty at any place, you can simply do comment, and I'll reach you as soon as possible.

Rotate any HTML Element using CSS3 - CSS3 Transforms Part 1

2014-10-10T10:43:00.000-07:00

As we CSS and CSS3 allows us to make our web pages look more advanced, beautiful and interactive.
This post is about one of CSS3's advanced properties, transform . This property can do a lot of things, like moving element from its current position, rotating, turning, skewing etc. I'll be sharing all of them one by one.

The first one, we gonna talk about is, ROTATE.
I don't there would be anyone, who don't the meaning of ROTATING, Is there?
Well! Either no or yes, we will explain.
Hmm... According to google translate, the ROTATE means, "move or cause to move something in a circle around an axis or center." e.g., A wheel rotates in a circle around its center.
I hope now its clear.

In CSS3, rotate means exactly same as in the above example.
Better see a demo, Just hove over the below box and see:

This is a simple div element.

Well! How can be this helpful in our web pages?
We can use this feature in to our images. Hovering over some image and rotating it.
Hover over the image below:

I know, it's very cool effect.
I just used the following code in the above example:


.rotates img { 
     
				width: 80px; 
     
				height: 80px; 
     
				border: 6px solid white; 
     
				border-radius: 50px; 
     
				transition: 0.3s; 
     
				-webkit-transition: 0.3s; 
     
				-moz-transition: 0.3s; 
     
				-o-transition: 0.3s; 
     
				-ms-transition: 0.3s; 
     
			} 

			.rotates img:hover { 
     
				border-color: black; 
     
				-webkit-transform: rotate(30deg); 
     
				-ms-transform: rotate(30deg); 
     
				-moz-transform: rotate(30deg); 
     
				-webkit-transform: rotate(30deg); 
     
				transform: rotate(30deg); 
     
			}

-webkit-, -moz-, -o-, -ms- are being used to overcome the Cross Browser Problems.

Define and use your "own" fonts in CSS3 (@font-face rule)

2014-10-09T00:44:00.000-07:00

With CSS3, you are not bound to use only 'Web-Safe' fonts. You can use whatever fonts you want.

As we all know CSS3 allows the developers to design the website as the developer wants. It gives us a lot of opportunities,
With HTML, we can just use the web-safe fonts. I'll say, HTML allows us to use only default fonts.
But with CSS3 we are not limited to the web-safe fonts only. We can use any kind of fonts into our pages.
As you see on the top of the page, I've used some different and modern fonts.

If you want to use some different fonts into your web page, you can do this using @font-face rule.

Different Font Formats

TrueType Fonts (TTF)

TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TruType is the most commons format for both 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 TruType with compression and additional metadata. The Goal is to support font distribution from a server to a client over a network with bandwidth constraints.

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 and SVG document. You can also apply CSS to SVG document, 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.

Defining your own Fonts

In the CSS3 you can define your own fonts using @font-face rule. In @font-face rule, first you need to define a name for the font and then point to the font file.


@font-face { 
      
font-family: AlexaBrush;   
     
src: url(AlexaBrush-Regular.ttf); 
     
}

Output: http://goo.gl/iK3fhd

You can download the AlexaBrush font Here.

Using Bold Fonts

If you want to use the same font but with bold style, you need to define another @font-face rule containing the bold font's descriptors.


@font-face { 
      
font-family: TlwgTypist;   
     
src: url(TlwgTypist.ttf); 
     
} 
 

@font-face { 
      
font-family: TlwgTypist;   
     
src: url(TlwgTypist-Bold.ttf); 
     
font-weight: bold; 
     
} 
 

p { 
     
font-family: TlwgTypist; 
      
}

Output: http://goo.gl/EP1CJ8 (Download TlwgTypist Fonts, HERE)
In the above code "TlwgTypist-Bold.ttf" is another font file with Bold fonts.
Browser will use this whenever a TlwgTypist font is rendered as bold.
This way you can use your own fonts using @font-face.

CSS3 Borders for different HTML Elements (Part II)

2014-10-05T04:52:00.002-07:00

Move to previous part:

Part I

Border Radius

The simple borders have four sharp corners, when it is set to default styling.

If we want to change the border's corners from sharp to rounded, we have to define the border-radius property.
Its value can be set in pixels.
Have a look below:

p.one { border: 1px solid green; border-radius: 6px; }

It gives a nice looking effect on the elements. You can design a lot of boxes and buttons, using this technique.

Border Individual Sides

As we know, each border around an element, have four sides, left. right, top and bottom.

CSS allows us to design each side individually.

Look at the example below:

p.one { 
      border-top-style: dotted; 
      border-right-style: double; 
      border-bottom-style: dashed; 
      border-left-style: solid;
      }

Output: http://goo.gl/Se0wHi

We can also specify different color for each side individually.

Look at the example below:

p.one { 
     
border: 5px solid;
      border-top-color: yellow; 
      border-right-color: rgb(255,243,225); 
      border-bottom-color: #ff0011; 
      border-left-color: red;
      }

Output: http://goo.gl/1uWDtj

We can also change the width of each side individually.

p.one { 
     
border-style: solid;
      border-left-width: 15px; 
      }

Output: http://goo.gl/Jy04p0

Border Style property can have one to four values.

border-style: dotted solid double dashed;

top border is dotted
right border is solid
bottom border is doubled
left border is dashed

border-style: dotted solid dashed;

top border is dotted
right border is solid
bottom border is dashed

border-style: double dotted;

top border is doubled
right border is dotted

border-style: dashed;

all sides are dashed

Border Short Hand Property

As we all know we have to deal with a lot of properties when dealing with borders.

To shorten the code there is a short hand property for borders.

Short Hand property of borders deals with the following three border properties:

border-width
border-style
border-color

p.one { 
     
border: 2px solid red;
      }

Have a look on the table containing All CSS Border Properties.

All CSS Border Properties (Table)

2014-10-05T04:51:00.003-07:00

Property	Description
border	Sets all the border properties in one declaration
border-bottom	Sets all the bottom border properties in one declaration
border-bottom-color	Sets the color of the bottom border
border-bottom-style	Sets the style of the bottom border
border-bottom-width	Sets the width of the bottom border
border-color	Sets the color of the four borders
border-left	Sets all the left border properties in one declaration
border-left-color	Sets the color of the left border
border-left-style	Sets the style of the left border
border-left-width	Sets the width of the left border
border-right	Sets all the right border properties in one declaration
border-right-color	Sets the color of the right border
border-right-style	Sets the style of the right border
border-right-width	Sets the width of the right border
border-style	Sets the style of the four borders
border-top	Sets all the top border properties in one declaration
border-top-color	Sets the color of the top border
border-top-style	Sets the style of the top border
border-top-width	Sets the width of the top border
border-width	Sets the width of the four borders

CSS3 Borders for different HTML Elements (Part I)

2014-10-04T12:37:00.000-07:00

Borders are also a way to make some elements look beautiful on your sites.
And some elements needs some border to separate from others.
Just have a look on a simple paragraph having some border around it:

This is a paragraph with some border around it. We can design and decorate the border as we want.

Adding border to some element:

If you decided to add a border around some element, simply select the element in CSS style section and add the border properties for it. Look at the code snippet below:


.someclass p { border: 1px solid; }

This will add a solid border of 1px around the selected element.

Border Style

Border style property defines the style of any HTML elements's border, like dotted, dashed etc.

border-style values:

Border style values can be:

none: defines no border

dotted: defines a dotted line around element.

dashed: defines a dashed line around element.

solid: defines a solid line around element.

double: defines a double border around the element.

groove: defines a 3D grooved border. The effect depends on the border-color value

ridge: defines a 3D ridged border. The effect depends on the border-color value

inset: defines a 3D inset border. The effect depends on the border-color value

outset: defines a 3D outset border. The effect depends on the border-color value

Border width:

We can use the border of our desired thickness as well. We just need to set the border-width property to do so.
Border width can be set in pixels or in three pre-defined value, thin, medium and thick.

Note: The border-width property can not work alone. We have to define the border using border-style property first.

Have a look here:


.someclass p { border: 1px; border-style: solid; border-width: 5px; }

p.two { border-style: solid; border-width: medium; }

Border Color:

To look borders more nice, we can change the color of the border too.

To do so, we just need to define border-color property.
Border color can be set by:

name - by specifying a color name like "red"
RGB - Specify an RGB value like "rgb(255,255,255)"
Hex - Specify a Hex value like "#ffffff"

If the border color property is not specified, then it is inherited from the element.

p.one { border-style: solid; border-color: red; } 
 p.two { border-style: solid; border-color: #ff0011; }

Learn more in the next part:

Part II

Styling tables using CSS3

2014-09-16T05:37:00.001-07:00

Everyone know about simple tables and how they look. We use the tables to display the data on our web pages. When we talk about the website design, everything on the website must be in a proper design pattern, so it look attractive.

This is a simplest example of how the table looks:

May be its the best one for some of the sites, but its not so good looking at all.

According to our themes, most of the time, we gotta design everything present on a single page.

Like other things we can design tables too using CSS3.

Table Borders

By default, when we use <table> tags, the border of the table is set to none. Means there is no border by default. We can make some border around the table using HTML and CSS3 too:


table, th, td {
    border: 1px solid black;
}

The above code will show a 1px black border around the all the tables in the page.
e.g., http://css3wdesign.net16.net/border.html
In the above mentioned example the table has double border on its sides. This is because the th/td elements have separate borders mentioned.
To show a single border on it we use:

border-collapse property

The border-collapse property indicates that whether the border of the table are collapsed or separated.


table { 
border-collapse: collapse;
}  

table, th, td { 1px solid black; }

It gives a very good looking effect on table. Have a look yourself: http://tinyurl.com/q8plg6k

Table Width and Height

We can also change the table width and height with CSS3. We can change the table's cell height separately too.


table { width: 100%; } 

th { height: 50px; }

e.g., http://tinyurl.com/myzmc3c

Table Text Alignment

Horizontal Alignment

We can change the text alignment in the table cell too.

The text-align property sets the text's horizontal place, like left, center or right.


th { text-align: left; }

Vertical Alignment

We can also change the vertical place of the text in a cell, like top, bottom or middle.


th { height: 50px; 
       vertical-align: bottom; }

Table Padding

By default the table don't have any space between the border and text. To control the space between the table cell and content in the cell we use pading property. We can set its value in pixels.


td { padding: 15px; }

Background Color

We can change the table's background color too. It allows us to make the table look like our theme.

We can design interactive tables using this property.

The below code snippet specifies the table's border colors and text color and th element's background color:


table, td, th {
    border: 1px solid green;
}


th {
    background-color: green;
    color: white;
}

Have a look on the fully designed and customized table here: http://tinyurl.com/lt5mecj
Download the code given in the following article: http://tinyurl.com/oarhaoa

Styling Lists Using CSS

2014-09-08T06:31:00.002-07:00

Like other items, there are some CSS properties to design and style HTML Lists too.
CSS List Properties allow you to :

Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as list item marker

There are two types of lists in HTML:

Ordered Lists - The list items are marked with numbers or alphabets
Unordered Lists - The list items are marked with bullets

With CSS list items can be styled further. An image can be used as list item marker.

The type of list item marker is specified by list-style-type property:

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

Example: http://css3wdesign.net16.net/list-item-markers.html

An Image as the List Item Marker

CSS allows us to use any image as the list item marker. Just use the list-style-image instead of list-style-type, and place the URL before :

ul {
   list-style-image: url('sqblue.gif');
}

Example: http://css3wdesign.net16.net/image-marker.html

In the above mentioned example, the image is slightly bigger than the usual bullet. The image specified as the image marker, will be slightly more bigger in IE and Opera than the image in Safari, Chrome and Firefox.
To overcome this, you have to specify all of the image attributes independently. Below is a Crossbrowser solution for this:

Crossbrowser solution

The below code will show the image marker in all browsers equally:

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
    background-image: url(sqblue.gif);
    background-repeat: no-repeat;
    background-position: 0px 5px; 
    padding-left: 14px; 
}

Try using this URL in all browsers: http://css3wdesign.net16.net/image-marker2.html

Explained example:

For ul:

to remove the list item marker first, set the list-style-type to none
set the margin to 0 (for crossbrowser compatibility)

For ul li

place URL of image in the background-image property and set it to the no-repeat
specify the image position using background-position (left 0px and down 5px)
position the text in the list item: padding-left

list-style: none;

Sometime, we don't need to specify any of the list-item style. CSS also allows to do so.

Use the list-style: none;

and the list will be without any style. Below is the output of the list-style: none;


Item one
Item two
Item three
Item four




Here is the list of all values, which can be used in list-style-type. 

http://css3wdesign.blogspot.com/2014/09/css-list-style-type-property-all-values.html

CSS list-style-type Property (All Values - Table)

2014-09-08T06:31:00.001-07:00

A complete description of all of the values of list-style-type :

Value	Description
disc	Default Value. The marker is a filled circle.
armenian	The marker is traditional Armenion numbering.
circle	The marker is a circle.
cjk-ideographic	The marker is a plain ideographic numbers.
decimal	The marker is a number.
decimal-leading-zero	The marker is a number with leading zero (01, 02, 03 etc)
georgian	The marker is traditional Georgian numbering.
hebrew	The marker is traditional Hebrew numbering.
hiragana	The marker is traditional Hiragana numbering.
hiragana-iroha	The marker is traditional Hiragana iroha numbering.
katakana	The marker is traditional Katakana numbering.
katakana-iroha	The marker is traditional Katakana iroha numbering.
lower-alpha	The marker is lower-alpha (a, b, c, d etc. )
lower-greek	The marker is lower-greek.
lower-latin	The marker is lower-latin (a, b, c, d etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv etc.)
none	No marker is shown.
square	The marker is a square.
upper-alpha	The marker is upper alpha (A, B, C, D etc)
upper-latin	The marker is upper latin (A, B, C, D etc)
upper-roman	The marker is upper roman (I, II, III, IV etc)
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

This example explains all above examples: http://css3wdesign.net16.net/all-bullets.html

Advanced: Creating Link Boxes with CSS

2014-09-03T09:38:00.001-07:00

I've already posted an article about designing the different states of a link.
Read Here: Styling Links With CSS

While talking about the designing the links, there comes a lot to do.
We can create links in whatever style we want. Now a days, we see a lot of websites. Every Website contains different links. Every Link is in a different style. Sometimes, we see a some picture, which is also a link. Some times, we see a beautiful box. When we hover it, it changes the color of text and background. This is also a link.
But the question is how to design that link.
Here is the code snippet.

Just look on the following examples:
http://css3wdesign.net16.net/link-boxes.html

The method mentioned in the above example can be used to make the menu of a website or something like that.

Add Different Styles to Hyperlinks

2014-09-03T07:14:00.001-07:00

I've already mentioned how to change the default color on different states of a single link.

Read the post and learn ( Styling Links with CSS ).

This example demonstrate how to design the different states of different links on a single web page.

There are many ways to do so.

Create a ID for a single link to design.
Create a Class for more than one link, to design using CSS.

I'll use the Class technique to do so.

Just assume, we have a link with class yellow. On mouse over we will change the background from default to yellow. The code is given below:

We can also change the font-family, text-color, font-size and text-decoration.

The below example demonstrate this well:

http://css3wdesign.net16.net/advance-links.html

Have a look on More Advance Example.

Advanced: Creating Link Boxes with CSS

Styling Links with CSS

2014-08-22T03:47:00.000-07:00

Default color of a link is blue. But it doesn't look so nice, when we are not using a simple theme.

In style of a site, everything must be in a proper color contrast.

The links' color can also be changes to whatever we want.

To do so, first of all we should know the states of a link on a page.

I mean, if we put some link on a page, First of all it is, A normal unvisited link.

When we click on a link, in becomes active. And after visiting that link, it becomes a visited link.

By default in HTML the default colors of different color states are:

	blue - a normal unvisited link
	red - an active link (when we click on a link)
	purple - a visited link

But it's not all in all. We can change these color and style of the links to whatever we want.
Just you should know how to select the states of a link in CSS.
The link states are:

a:link - a normal, unvisited link
a:visited - a link that user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Have a look on the following example:

http://css3wdesign.net16.net/styled-links.html

While designing the links for several states, there are some order rules:

a:hover must come after a:link and a:visited
a:active must come after a:hover

Common Link Styles:

Let's have a look on some of the following examples.

These are the CSS codes to design the links.

Text Decoration

Text decoration is used to remove/add the underline effect or style into some link.

The code below will remove the underline from all of the links.

Example: http://css3wdesign.net16.net/text-decoration.html

Background Color

This property is used to change the background color of a text.

Example: http://css3wdesign.net16.net/link-color.html

More Advance Examples

Add Different Styles to Hyperlinks

This example demonstrates how to add different styles to the hyperlinks.

Advanced: Creating Link Boxes with CSS

This example is one of the advanced. In this example we will demonstrate how to change the links to look like boxes using different CS properties.

Text Shadows using CSS3

2014-08-19T07:16:00.001-07:00

Text shadow always give a cool looking effect to some text.
A text with some kind of shadow is more attractive than a text without any shadow.

Heading

Now the question is How to add shadows to some text?
This is, for what you are here :P.

The above code snippet will look like this: http://css3wdesign.net16.net/shadow.html

We can add following values to the textssible color values

Value	Description
h-shadow	Required. The position of the horizontal shadow. Negative values are allowed
v-shadow	Required. The position of the vertical shadow. Negative values are allowed
blur	Optional. The blur distance
color	Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values

The default position to set all values, place all these values is, as it is given in the above table.
like:

There are some of CSS3 generators can also do these things for you:
http://css3gen.com/text-shadow/
http://css3generator.com (I've posted a small tutorial to run this generator in my first post. To check, Click Here.

All CSS Text Styling Properties

2014-08-19T06:22:00.001-07:00

Property	Detail	Example
color	Specifies the color of a text.	http://css3wdesign.net16.net/color.html
direction	Specifies the text direction/writing direction	http://css3wdesign.net16.net/direction.html
letter-spacing	Increases or decreases the space between characters in a text	http://css3wdesign.net16.net/spacing.html
line-height	Sets the line height	http://css3wdesign.net16.net/height.html
text-align	Specifies the horizontal alignment of text	http://css3wdesign.net16.net/aligned.html
text-decoration	Specifies the decoration added to text	http://css3wdesign.net16.net/decorate.html
text-indent	Specifies the indentation of the first line in a text-block	http://css3wdesign.net16.net/indent.html
text-shadow	Specifies the shadow effect added to text	Text Shadows using CSS3
text-transform	Controls the capitalization of text	http://css3wdesign.net16.net/transform.html
unicode-bidi	Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document	http://css3wdesign.net16.net/unicode-bidi.html
white-space	Specifies how white-space inside an element is handled	http://css3wdesign.net16.net/white-space.html
word-spacing	Increases or decreases the space between words in a text	http://css3wdesign.net16.net/word-spacing.html

Downlaod all Examples.Click Here.