Best css and jquery tutorials: Other CSS Examples

Showing posts with label Other CSS Examples. Show all posts

How to open link on main page from an iframe

Example of open link on main page from an iframe

Link open in main window

How to remove border from textbox in chrome

Google Chrome by default shows a border across textbox when user click on it, for remove this problem follow this simple code
How to remove border from textbox in chrome

CSS CODE

.textbox:focus
{
 outline:none;
}

HTML CODE

Textbox with Default Settings

Textbox without border

Download File Used in this example View Live Demo

Total Downloads:

How to make a div clickable using jquery

This tutorial teach you How to make a div clickable using jquery. Just use this short jquery code and turn your divs into clickabel.

CSS CODE

.clickable-div
{
 width:400px;
 padding:50px;
 text-align:center;
 background:#CC9900;
 cursor:pointer;
}
.clickable-div a
{
 color:#333;
 text-decoration:none;
 font-weight:bold;
}

JQUERY CODE

HTML CODE


Click Here

Download File Used in this example View Live Demo

Total Downloads:

Beautiful Tables CSS Designes

Designes Beautiful tables with css and jquery. Try this simple code and turn of boring table format into a clean and beautiful look.
Beautiful Tables CSS Designes

CSS Code

.table
{
 font-family:"Arial Black", Gadget, sans-serif;
 border:solid 1px #eee;
 padding:5px;
 box-shadow:0px 0px 5px #ccc;
}
.table th
{
 background:#33c744;
 padding:10px;
 color:#fff;
 text-align:left;
}
.table td
{
 padding:10px;
 font-size:14px;
}
.border
{
 border-top:solid 1px #ccc;
 border-bottom:solid 1px #ccc;
}


  

    Heading 1
    Heading 2
    Heading 3
    Heading 4
    Heading 5
  

    One
    Two
    Three
    Four
    Five
  

    One
    Two
    Three
    Four
    Five
  

    One
    Two
    Three
    Four
    Five
  

    One
    Two
    Three
    Four
    Five
  

    One
    Two
    Three
    Four
    Five
  

    One
    Two
    Three
    Four
    Five

Heading 1	Heading 2	Heading 3	Heading 4	Heading 5
One	Two	Three	Four	Five
One	Two	Three	Four	Five
One	Two	Three	Four	Five
One	Two	Three	Four	Five
One	Two	Three	Four	Five
One	Two	Three	Four	Five

Download File Used in this example View Live Demo

Total Downloads:

How to make Css Custom Select Box

Simple tutorial of making Css Custom Select Box with diffrent colors and themes acording to website themes. This is pure css3 code for your selectbox to look good and stylish. Copy any of selectbox class and paste in your website and you may also customize the look and feel of these select boxes.
How to make Css Custom Select Box

CSS Code

.selectbox1 {
    border: 1px solid #ccc;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
    background: #fafafa url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYPpkMKsz66mOAe1oRrWZ1_QjwzpnPBJztK2gU2U0fmusAWt7gdU1B22txhZ89b9IDnnXyMlYuA7WPkgYqHv9agyLULQ5NCTzJPSYN6awtR7tvqX6_5ZQSMm0DH0Y21f90uyve_i_MWd6o/s1600/ic_arrow_drop_down_48px-32.png") no-repeat 90% 50%;
 box-shadow:0px 0px 5px #ccc;
}

.selectbox1 select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
 
}

.selectbox1 select:focus {
    outline: none;
}

.selectbox2 {
    border: 1px solid #b0301c;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
 
    background: #d7452f url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kbxPT5ISACaY8UNEuP_obYHnIABGesvs9txAWJL-LyicqLa-ArmVuX3jv_DXA3jGRJSugsiEEQDcyws8ywBUt1G4CDb5ruLFqlI6g6RNgGyuNjEQsHghD4DnxmfJSMV84PGJbXhg8ra0/s1600/ic_arrow_drop_down_48px-32-2.png") no-repeat 90% 50%;
}

.selectbox2 select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
 color:#fff;
}

.selectbox2 select:focus {
    outline: none;
}

.selectbox3 {
    border: 1px solid #aaaaaa;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
 
    background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi03HnMxKUee7-LZdcNs8G-4CHwZSHG_dbuxVEKXczz4lYNY8P_90B_SKp1tj9eE5LiNVCM0czizrF8PR5itn46l9KSKnviRA-cu1haK75ycAQK4I0wHI3O4RlpK8lisWhZSLmKz_vp9A8G/s1600/drop2.png") no-repeat 100% 50%;
}

.selectbox3 select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
 color:#333;
}

.selectbox3 select:focus {
    outline: none;
}

.selectbox4 {
    border: 1px solid #0a7646;
    width: 200px;
    border-radius: 3px;
    overflow: hidden;
 
    background: #009b57 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kbxPT5ISACaY8UNEuP_obYHnIABGesvs9txAWJL-LyicqLa-ArmVuX3jv_DXA3jGRJSugsiEEQDcyws8ywBUt1G4CDb5ruLFqlI6g6RNgGyuNjEQsHghD4DnxmfJSMV84PGJbXhg8ra0/s1600/ic_arrow_drop_down_48px-32-2.png") no-repeat 90% 50%;
}

.selectbox4 select {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
 color:#fff;
}

.selectbox4 select:focus {
    outline: none;
}

HTML Code

Download File Used in this example View Live Demo

Total Downloads:

CSS3 image shadow effects

Decorate your images with these simple CSS3 image shadow effects. This is pure css3 shadow effects with simple code. so just copy these effects and try one by one on your website images.

CSS3 image shadow effects

CSS Code

body
{
 background:#eee;
}
.box
{
 width:200px;
 height:200px;
 background:#ccc;
 border:solid 3px #fff;
 margin:20px;
 float:left;
}
#shadow1
{
   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);
   box-shadow: 00 28px 16px -26px rgba(0, 0, 0);
}
#shadow2
{
  position: relative;
}
#shadow2:before, #shadow2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
#shadow2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
#shadow3
{
  position: relative;
}
#shadow3:before, #shadow3:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 35px 20px #777;
  -moz-box-shadow: 0 35px 20px #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
#shadow3:after
{
  -webkit-transform: rotate(8deg);
  -moz-transform: rotate(8deg);
  -o-transform: rotate(8deg);
  -ms-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

#shadow4
{
   position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
#shadow4:before, #shadow4:after
{
 content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
#shadow4:after
{
 right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
       -moz-transform:skew(8deg) rotate(3deg);     
        -ms-transform:skew(8deg) rotate(3deg);     
         -o-transform:skew(8deg) rotate(3deg); 
            transform:skew(8deg) rotate(3deg);
}

HTML

Download File Used in this example View Live Demo

Total Downloads:

How to make a div vertical scrollable

Sometimes it is very usefull to display content with vertically scrolling, to make a div vertical scrollable you just specify overflow-y CSS property to scroll as shown in below example

CSS

#content-div
{
	width:300px;
	height:200px;
	background:#eee;
	padding:10px;
	overflow-y:scroll;
}

HTML


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur

Download File Used in this example View Live Demo

Total Downloads:

How to change css value with jquery

You can change css value with jquery an example of this is below, you can change any css value with jquery so chnage it according to your need.

CSS

.content{background:#ccc;}

Jquery

$(document).ready(function(){
  $('#change').click(function(){
   $('.content').css("background-color","#FF0000");
   $('.content').css("color","#FFF");
  });
 });

HTML

This is a sample content.
Click to change above div css

Download File Used in this example View Live Demo

Labels

CSS CODE

HTML CODE

Textbox with Default Settings

Textbox without border

CSS CODE

JQUERY CODE

HTML CODE

CSS Code

CSS Code

HTML Code

CSS3 image shadow effects

CSS Code

HTML

CSS

HTML

CSS

Jquery

HTML