Cracker World : CSS

Showing posts with label CSS. Show all posts

CSS3 Tool Tip

hi,This is CSS tool tip.tool tip is mean to hover the content display a information .now css have hover a text or image to display a text on the hover a text.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pageswritten in HTML and XHTML , but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS Simple Drop Down Menu

Output:

Demo

Hover to Change the Image

This is Change image position to hover the image.CSS simple coding for hover a image to changing position image .simple CSS using to change a position.

CSS:

#myButtonLink {
display: block;
width: 500px;
height:311px;
background:url(pa.jpg) bottom;
text-indent: -99999px;
margin:0 auto;
}
#myButtonLink:hover{
background-position: 0 0;
}

HTML:

Source Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hover to Change the Image</title>
<style>
#myButtonLink {
display: block;
width: 500px;
height:311px;
background:url(pa.jpg) bottom;
text-indent: -99999px;
margin:0 auto;
}
#myButtonLink:hover{
background-position: 0 0;
}

</style>
</head>

<body>
<h2 align="center">Hover to Change the Photo </h2>
<a id="myButtonLink"></a>
</body>
</html>

Bar Chart in Css

This is CSS3 Bar chart. A bar graph is a chart that uses either horizontal or vertical bars to show comparisons among categories. One axis of the chart shows the specific categories being compared, and the other axis represents a discrete value. Some bar graphs present bars clustered in groups of more than one (grouped bar graphs), and others show the bars divided into subparts to show cumulate effect (stacked bar graphs).

CSS3 Action Buttons

CSS Action Buttons,it used for admin panel add edit delete save and mail .no need icon or image.one time call a CSS access to anywhere a action button and change any color of button .it's very simple .. content: "\271A"; is Add icon. 270E is edit icon it's is ASCII Character .it display corresponding symbol

Live Demo

Download

Button Css

.button
{
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#09F), to(#09F));
background-image: -webkit-linear-gradient(top, #0095DD, #ccc);
background-image: -moz-linear-gradient(top, #0095DD, #0052A4);
background-image: -ms-linear-gradient(top, #0095DD, #0052A4);
background-image: -o-linear-gradient(top, #0095DD, #0052A4);
background-image: linear-gradient(top, #0095DD, #0052A4);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
}

Action icon CSS

.add:before
{
content: "\271A";
}
.edit:before
{
content: "\270E";
}
.delete:before
{
content: "\2718";
}
.save:before
{
content: "\2714";
}
.email:before
{
content: "\2709";
}

Html

<a href="#" class="button">Button</a>
<a href="#" class="button add">Add</a>
<a href="#" class="button edit">Edit</a>
<a href="#" class="button delete">Delete</a>
<a href="#" class="button save">Save</a>
<a href="" class="button email">Send email</a>

source code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Css3 Button</title>
</head>
<style>

h2
{
font: bold 1.4em 'Lucida sans', 'Trebuchet MS', Tahoma, Arial;
color: #555;
}
.button
{
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#09F), to(#09F));
background-image: -webkit-linear-gradient(top, #0095DD, #ccc);
background-image: -moz-linear-gradient(top, #0095DD, #0052A4);
background-image: -ms-linear-gradient(top, #0095DD, #0052A4);
background-image: -o-linear-gradient(top, #0095DD, #0052A4);
background-image: linear-gradient(top, #0095DD, #0052A4);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
text-align: center;
}

.button:hover
{
background-color: #eee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #48A4FF, #006CD9);
background-image: -moz-linear-gradient(top, #48A4FF, #006CD9);
background-image: -ms-linear-gradient(top, #48A4FF, #006CD9);
background-image: -o-linear-gradient(top, #48A4FF, #006CD9);
background-image: linear-gradient(top, #48A4FF, #006CD9);
}
.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;
pointer-events: none;
}
/* Hexadecimal entities for the icons */
.add:before
{
content: "\271A";
}
.edit:before
{
content: "\270E";
}
.delete:before
{
content: "\2718";
}
.save:before
{
content: "\2714";
}
.email:before
{
content: "\2709";
}
</style>
<body>
<h2>Button</h2>
<a href="#" class="button">Button</a>
<a href="#" class="button add">Add</a>
<a href="#" class="button edit">Edit</a>
<a href="#" class="button delete">Delete</a>
<a href="#" class="button save">Save</a>
<a href="" class="button email">Send email</a>
</body>
</html>

Image Rolling Effect in CSS3

Hi. This is code for roll the images .it rotate a images both sides.it contain simple css coding to rotate a image,Hover a image to rotate automatically images .this is used to animated your website very easily.

CSS for rotate text or images

box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);

Demo Download

source code

<html>
<head>
<title>Scroll of Social Media Icon</title>
<style>
.nav
{
float:left; width:600px;
}
.social-roll {
height: 48px;
width: 48px;
margin: 10px;
float: left;
border-radius: 50%;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-roll:hover {
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
<body>
<div class="nav">
<div class="social-roll"><img src="facebook-48circle.png" /></div>
<div class="social-roll"><img src="twitter-48circle.png" /></div>
<div class="social-roll"><img src="googleplus-48circle.png" /></div>
</div>
</body>
</html>

CSS3 Drop Down Menu

hi. this css3 menu... this is drop down menu in css3 this is simple

Demo Download

Source Code:

index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Drop down Menu </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<ul id="menu">
<li><a href="#">Home</a></li>

<li>
<a href="javascript:void(0)">Categories</a>
<ul>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
<li><a href="#">Item 13</a></li>
<li><a href="#">Item 14</a></li>
</ul>
</li>
<li>
<a href="#">Graphic design</a>

<ul>
<li><a href="#">Item 21</a></li>
<li><a href="#">Item 22</a></li>
<li><a href="#">Item 23</a></li>
<li><a href="#">Item 24</a></li>
</ul>
</li>

<li>
<a href="#">Development tools</a>
<ul>
<li><a href="#">Item 31</a></li>
<li><a href="#">Item 32</a></li>
<li><a href="#">Item 33</a></li>
<li><a href="#">Item 34</a></li>

</ul>
</li>
<li>
<a href="#">Web design</a>
<ul>
<li><a href="#">Item 41</a></li>
<li><a href="#">Item 42</a></li>
<li><a href="#">Item 43</a></li>

<li><a href="#">Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)">Work</a>
<ul>

<li>
<a href="#">Work 1</a>
<ul>
<li>
<a href="#">Work 11</a>
<ul>
<li><a href="#">Work 111</a></li>
<li><a href="#">Work 112</a></li>

<li><a href="#">Work 113</a></li>
</ul>
</li>
<li>
<a href="#">Work 12</a>
<ul>
<li><a href="#">Work 121</a></li>
<li><a href="#">Work 122</a></li>

<li><a href="#">Work 123</a></li>
</ul>
</li>
<li>
<a href="#">Work 13</a>
<ul>
<li><a href="#">Work 131</a></li>
<li><a href="#">Work 132</a></li>

<li><a href="#">Work 133</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 2</a>
<ul>
<li>

<a href="#">Work 21</a>
<ul>
<li><a href="#">Work 211</a></li>
<li><a href="#">Work 212</a></li>
<li><a href="#">Work 213</a></li>
</ul>
</li>

<li>
<a href="#">Work 22</a>
<ul>
<li><a href="#">Work 221</a></li>
<li><a href="#">Work 222</a></li>
<li><a href="#">Work 223</a></li>
</ul>
</li>

<li>
<a href="#">Work 23</a>
<ul>
<li><a href="#">Work 231</a></li>
<li><a href="#">Work 232</a></li>
<li><a href="#">Work 233</a></li>
</ul>
</li>

</ul>
</li>
<li>
<a href="#">Work 3</a>
<ul>
<li>
<a href="#">Work 31</a>
<ul>

<li><a href="#">Work 311</a></li>
<li><a href="#">Work 312</a></li>
<li><a href="#">Work 313</a></li>
</ul>
</li>
<li>
<a href="#">Work 32</a>

<ul>
<li><a href="#">Work 321</a></li>
<li><a href="#">Work 322</a></li>
<li><a href="#">Work 323</a></li>
</ul>
</li>
<li>
<a href="#">Work 33</a>

<ul>
<li><a href="#">Work 331</a></li>
<li><a href="#">Work 332</a></li>
<li><a href="#">Work 333</a></li>
</ul>
</li>
</ul>
</li>

</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

CSS:

style.css

#nav{
width:75%;
font: 13px 'trebuchet MS', Arial, Helvetica;
margin:0 auto;

}
a {
color: #2A679F;
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}

#menu {
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}

#menu:before,
#menu:after {
content: "";
display: table;
}

#menu:after {
clear: both;
}

#menu {
zoom:1;
}

#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}

#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a {
color: #fafafa;
}

*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}

#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#menu ul a {
padding: 10px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}

#menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}

#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

CSS3 Coding for Loading Effect

This css loading effect .mostly loading effect is create flash software .now css present by loading effect.in coding u can change any color to the loading effect in css. css is now all animation crated by simple with customize a coding easy .

Live Demo

Download

Source code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 Loading Animation</title>
</head>
<style type="text/css">
.loading span{
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background:#005279;
border-radius: 5px;
-webkit-animation: loading 0.9s infinite alternate;
-moz-animation: loading 0.9s infinite alternate;
box-shadow:1px 1px 1px #444444;
}
.loading span:nth-of-type(2) {
background: #005279;
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
}
.loading span:nth-of-type(3) {
background: #005279;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
}
.loading span:nth-of-type(4) {
background: #005279;
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
.loading span:nth-of-type(5) {
background: #005279;
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
}
@-webkit-keyframes loading {
0% {
width: 10px;
height: 10px;
-webkit-transform: translateZ(0);
}
100% {
width: 24px;
height: 24px;
-webkit-transform: translateZ(-21px);
}
}
@-moz-keyframes loading {
0% {
width: 10px;
height: 10px;
-moz-transform: translateZ(0);
}
100% {
width: 24px;
height: 24px;
-moz-transform: translateZ(-21px);
}
}
</style>
<body>
<div class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>

CSS3 coding for hide and Show

This is hide and show in css.simple css coding for hide and show content if hide click to hide the content and show click to show the content it's toggle concepts

CSS:

.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }

html

Demo:

Here's a list

[show]

item 1
item 2
item 3

How about that?

Source Code:

<!DOCTYPE html>
<head>
<title>CSS3 coding for hide and Show</title>
<style type="text/css">
.show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:none; }
@media print { .hide, .show { display: none; } }

</style>
</head>
<body>
<p>Here's a list</p>
<div>
<a href="#" class="hide">[hide]</a>
<a href="#" class="show">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>
<p>How about that?</p>
</body>
</html>

Pages

CSS3 Tool Tip

Demo : CSS3 Tool Tip

CSS Simple Drop Down Menu

Output:

css coding for Hover to Change the Photo

Demo

Hover to Change the Image

CSS:

HTML:

Source Code:

Bar Chart in Css

CSS3 Action Buttons

Button Css

Action icon CSS

Html

source code

Image Rolling Effect in CSS3

source code

CSS3 Drop Down Menu

Source Code:

index.php

CSS:

style.css

CSS3 Coding for Loading Effect

Source code :

CSS3 coding for hide and Show

CSS:

html