CSS

What is the difference between PX, EM and Percent?

UIxpider CSS, HTML5

Pixel is a static measurement, while percent and EM are relative measurements. The size of an EM or percent depends on its parent. If the text size of body is 16 pixels, then 150% or 1.5 EM will be 24 pixels (1.5 * 16). Look at CSS Units for more measurement units.

Transition + Transformation

UIxpider CSS

This example does not work in Internet Explorer 9 and earlier versions.

Hover over the div element above, to see the transition effect.

<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}

div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
</style>

Change The Cursor Style

UIxpider CSS

Mouse over the words to change the cursor.

<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

Create Image Gallery with CSS

UIxpider CSS, HTML

First Create an Html page and insert images in separate Div tags.
Simply copy the following code:

<div class="img"><a><img class="aligncenter size-full wp-image-123" src="https://attariwebsol.files.wordpress.com/2015/04/thumb.jpg" alt="" width="110" height="90" /></a></div>
<div class="desc">Add a description of the image here</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-122" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-6.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-121" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-5.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="#"><img class="aligncenter size-medium wp-image-120" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-4.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-119" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-3.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-118" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-2.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-full wp-image-117" src="https://attariwebsol.files.wordpress.com/2015/04/thumb-1.jpg" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a><img class="aligncenter size-medium wp-image-116" src="https://attariwebsol.files.wordpress.com/2015/04/sports_cars_differences-y8.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="#"><img class="aligncenter size-medium wp-image-115" src="https://attariwebsol.files.wordpress.com/2015/04/d7fuj28l_1_autoshow_xylo.jpg?w=110" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="img"><a href="#"><img class="aligncenter size-full wp-image-114" src="https://attariwebsol.files.wordpress.com/2015/04/9781429653169.jpg" alt="" width="110" height="90" /></a>
<div class="desc">Add a description of the image here</div>
</div>

After Pasting th above Html change the links of images according to your gallery and the insert the following CSS:

<style>
div.img {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}

div.img img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}

div.img a:hover img {
border: 1px solid #0000ff;
}

div.desc {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
</style>

Basic Button Styling with CSS3

UIxpider CSS , ,

Simple Button:

To create Button, add the Button classname to any or element.

A Simple Button

simpleDisabled Button:

To mark a button as disabled, add the button-disabled classname alongside button.

A Disabled Button

disable

Colored Button:

To color a button background add the following Css into your button

background: greenyellow;
border: none
colored

Buttons with different sizes:

<div>
    <style scoped>

        .button-xsmall {
            font-size: 70%;
        }

        .button-small {
            font-size: 85%;
        }

        .button-large {
            font-size: 110%;
        }

        .button-xlarge {
            font-size: 125%;
        }

    style>

    <button class="button-xsmall">Extra Small Button</button>
    <button class="button-small">Small Button</button>
    <button class="reguler-button">Regular Button</button>
    <button class="button-large">Large Button</button>
    <button class="button-xlarge">Extra Large Button</button>
</div>

diff-size

Buttons with icons:

We doesn’t ship with icon fonts, but we play nice with existing ones. Incorporating icon fonts with Buttons is easy. In the example below, we’re using icon fonts fromFont Awesome. Put the Font Awesome CSS file on your page and use an element within a pure-button element.

<button class="pure-button">
    <i class="fa fa-cog"></i>
    Settings
</button>

<a class="pure-button" href="#">
    <i class="fa fa-shopping-cart fa-lg"></i>
    Checkout
</a>

iconeBorder A Button:

To border a button use the following CSS

  • To Border Top
border-top: red 2px solid;

b-top

  • To Border Bottom
border-bottom: red 2px solid;

b-botom

  • To Border Left
border-left: red 2px solid;

b-left

  • To Border Right
border-right: red 2px solid;

b-right

Change Styling of a Button’s Border:

border: red 2px solid;  border-style: double;

b-styl

border: red 2px solid;  border-style: dashed;

b-s-1

CSS Syntax

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Try All These Styles:

Value Description
none Default value. Specifies no border
hidden The same as “none”, except in border conflict resolution for table elements
dotted Specifies a dotted border
dashed Specifies a dashed border
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The border-style property sets the style of an element’s four borders. This property can have from one to four values. Examples:

  • border-style:dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style:dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style:dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style:dotted;
    • all four borders are dotted

Border Radius of a Button:

border: 2px solid red;    border-radius: 5px;

b-r

Example 1

border-radius:2em;

is equivalent to:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

Example 2

border-radius: 2em 1em 4em / 0.5em 3em;

is equivalent to:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

Create Fancy Buttons with CSS3

UIxpider CSS

All Corner Round and bordered Gradient a Button with CSS3:

background: linear-gradient(red, pink);

border-style: inset;

border-radius: 5px;

color: white;

s1

2 Corner Styling with Gradient:

background: linear-gradient(green, greenyellow);

border-style: inset;

border-radius: 5px 0;

color: white;

border-color: red;

s2

1 / 3 Border Styling :

background: linear-gradient(blue, skyblue);

border-style: inset;

border-radius: 5px 0 0;

color: white;

border-color: cyan;

b3

Simple linear Gradient 2 Colors:

background: linear-gradient(black, orange); 
color: white;
border: none;

b4

2/2 Stylish Gradient Button:

background: linear-gradient(yellow, orange, red);
color: white;
border: none;
border-radius: 5px 50px 5px 50px;
width: 75px;

b5

Radial Gradient button:

background: radial-gradient(red, orange, orange);
text-decoration: blink;
padding: 2px;
border-style: solid;
border-radius: 5px;
border-width: 4px;
border-color: green;

b6