web-development (CSS)

Showing posts with label web-development (CSS). Show all posts

Tuesday, August 20, 2013

Create CSS3 Button

Create CSS3 Button

<html>
<head>
<style>
body {background-color:#1B1B1D;}
input[type=submit]{
 
 /* Submit button */
 
 opacity:0.9;
 position:absolute;
 top:262px;
 left:25px;
 width: 239px;
 height:36px;
 cursor:pointer;
 border-radius:6px;
 box-shadow:0 1px 1px #888;
 border:none;
 color:#fff;
 font:14px/36px 'Segoe UI Light','Segoe UI',Arial,sans-serif;
 
 /* CSS3 Gradients */
 
 background-image: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
 background-image: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
 background-image: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
 background-image: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
 background-image: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
 
 background-image: -webkit-gradient(
  linear,
  left bottom,
  left top,
  color-stop(0.5, rgb(80,102,127)),
  color-stop(0.5, rgb(87,109,136)),
  color-stop(1, rgb(106,129,155))
 );
}

input[type=submit]:hover{
 opacity:1;
}
</style>
</head>
<body>
<input type="submit" name="submit" value="Recover" />
</body>
</html>

Simple Dropdown Menu like apple

Simple Dropdown Menu like apple

<style type="text/css">
#cssmenu ul {margin: 0; padding: 7px 6px 0; background: #7d7d7d url(menu_assets/images/overlay.png) repeat-x 0 -110px; line-height: 100%; border-radius: 1em; font: normal .8em/1.5em Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}
#cssmenu li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
#cssmenu a,
#cssmenu a:link {font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding:  8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;  text-shadow: 0 1px 1px rgba(0,0,0, .3); }
#cssmenu a:hover {background: #000; color: #fff;}
#cssmenu .active a, 
#cssmenu li:hover > a {background: #666 url(menu_assets/images/overlay.png) repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); }
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none;}
#cssmenu ul ul a:hover {background: #8f8f8f url(menu_assets/images/overlay.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
#cssmenu li:hover > ul {display: block;}
#cssmenu ul ul {display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ddd url(menu_assets/images/overlay.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}
#cssmenu ul ul li {float: none; margin: 0; padding: 3px; }
#cssmenu ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
#cssmenu ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
* html #cssmenu  ul {height: 1%;}</style>
<div id='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Saturday, July 27, 2013

Style a Select Box Using CSS

Style a Select Box Using CSS

<style>
.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
   }
   .styled-select {
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url(down_arrow_select.jpg) no-repeat right #ddd;
  
   display:block;font-size:16px;outline:0 none;padding:.4em;text-shadow:0 1px 0 #fff;-moz-border-radius:.6em;-webkit-border-radius:.6em;border-radius:.6em;border:1px solid #aaa;color:#333;text-shadow:0 1px 0 #fff;
   }
</style>
<div class="styled-select">
   <select>
      <option>Male</option>
      <option>Female</option>
   </select>
</div>

Friday, June 14, 2013

Create a simple style css table

Create a simple style css table

<style>
.simple-style {border-top:1px solid #CFCFCF; border-left:1px solid #CFCFCF; border-right:0; border-bottom:0; width:100%;font-family: Arial, Helvetica, tahoma sans-serif; font-size:12px; line-height:1.6; color:#282828;}
.simple-style td, .simple-style th {border-right:1px solid #CFCFCF; border-bottom:1px solid #CFCFCF; text-align:center; padding:5px 0; width:20%;}
.simple-style th {background-color:#dedede; font-size:120%;text-shadow: 0 1px 0 #fff;}
.simple-style tr:nth-child(even) {background: #fff;}
.simple-style tr:nth-child(odd) {background: #F6F6F6;}
</style>
<div style="width:700px;">
<h3>SIMPLE STYLE TABLE</h3>
<table class="simple-style">
    <thead>
        <tr>
            <th scope="col">Country</th>
            <th scope="col">Area</th>
            <th scope="col">Official languages</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>United States of America</td>
            <td>9,826,630 km2</td>
            <td>English</td>
        </tr>
        <tr>
            <td>United Kingdom</td>
            <td>244,820 km2</td>
            <td>English</td>
        </tr>
        <tr>
            <td>India</td>
            <td>3,287,240 km2</td>
            <td>Hindi, English</td>
        </tr>
        <tr>
            <td>Canada</td>
            <td>9,984,670 km2</td>
            <td>English, French</td>
        </tr>
        <tr>
            <td>Germany</td>
            <td>357,021 km2</td>
            <td>German</td>
        </tr>
    </tbody>
</table>
</div>

CSS3 Techniques

CSS3 Techniques

<style type="text/css">
body {
 background-color: #D6E4FF;
}

.shadow1 {
 background-color: #eee; 
 padding: 10px;
 padding-left: 18px;
 padding-right: 18px;
 box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.7);
 color: black;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
}
.shadow2 {
 background-color: #333; 
 padding: 10px;
 padding-left: 18px;
 padding-right: 18px;
 box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
 -webkit-box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
 -moz-box-shadow: 0px 2px 6px rgba(255,255,153,0.7);
 color: white;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
}


.round1 {
 background-color: #f99;
 border: solid 1px black;
 border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 padding: 10px;
 padding-left: 18px;
 padding-right: 18px;
 color: black;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
}
.round2 {
 background-color: #333; 
 border-radius: 12px;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 -webkit-border-top-left-radius: 59px 20px;
 -webkit-border-bottom-left-radius: 59px 20px;
 -moz-border-radius-topleft: 59px 20px;
 -moz-border-radius-bottomleft: 59px 20px;
 padding: 10px;
 padding-left: 18px;
 padding-right: 18px;
 color: white;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
}
.round3 {
 border: dashed 2px #093;
 -webkit-border-top-left-radius: 17px;
 -moz-border-radius-topleft: 17px;
 -webkit-border-bottom-right-radius: 17px;
 -moz-border-radius-bottomright: 17px;
 background-color: #ff9; 
 padding: 10px;
 padding-left: 18px;
 padding-right: 18px;
 color: black;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
}



.css5box2 {
 <!-- Baseline -->
 
 background-color: #fed; 
 border-top: solid 1px white;
 border-bottom: solid 1px #669;
 padding: 10px;
 padding-left: 18px;
 padding-right: 18px;
 color: black;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
 margin-bottom: 10px;
 border-radius: 8px;
 <!-- border radius -->
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 <!-- shadows -->
 -moz-border-radius: 8px;
 box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 <!-- gradient -->
 background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, #fffffa),
            color-stop(30%, #fed),
            color-stop(80%, #fed),
            color-stop(100%, #fffffa)
          );
 background: -moz-linear-gradient(
            top, #eef, #cce 30%, #cce 80%, #eef 100%
          );
 width:350px;   
}

.gradback {
 background-color: #eee; 
 background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, #eef),
            color-stop(30%, #cce),
            color-stop(80%, #cce),
            color-stop(100%, #eef)
          );
 background: -moz-linear-gradient(
            top, #eef, #cce 30%, #cce 80%, #eef 100%
          );

 border-top: solid 1px white;
 border-bottom: solid 1px #669;
 padding: 10px;
 padding-left: 18px;
 padding-right: 18px;
 border-radius: 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 color: black;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
}
.css5box2 h3 {
 text-shadow: 0px 3px 3px rgba(0,0,0,0.2);
 color: #339;
}

input.styled {
 background-color: #eee; 
 background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, #eee),
            color-stop(100%, #fff)
          );
 background: -moz-linear-gradient(
            top, #eee, #fff
          );

 border: solid 2px white;
 padding: 3px;
 padding-left: 7px;
 padding-right: 7px;
 border-radius: 4px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 color: black;
 text-shadow: 0px 1px 1px white;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
}
input.styled:focus {
 box-shadow: 0px 1px 6px rgba(0,64,255,0.7);
 -webkit-box-shadow: 0px 1px 6px rgba(0,64,255,0.7);
 -moz-box-shadow: 0px 1px 6px rgba(0,64,255,0.7);
 outline: none;
 -webkit-focus-ring-color: none;
}

input.roundbutton {
 background-color: #eee; 
 background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(0%, #eee),
            color-stop(100%, #ccc)
          );
 background: -moz-linear-gradient(
            top, #eee, #ccc
          );

 border: solid 2px white;
 padding: 10px;
 padding-left: 18px;
 padding-right: 18px;
 border-radius: 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 cursor: pointer;
 box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.7);
 color: black;
 text-shadow: 0px 1px 1px white;
 font-family: "Lucida Sans MS", "Lucida Grande", Helvetica, sans-serif;
 font-size: 10pt;
}
input.roundbutton:active {
 border-width: 1px;
 margin-left: 1px;
 margin-right: 1px;
 -box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
 -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
 -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.8);
 background: -webkit-gradient(
            linear,
            center top, center bottom,
            color-stop(100%, #eee),
            color-stop(0%, #ccc)
          );
 background: -moz-linear-gradient(
            top, #ccc, #eee
          );

}
</style>
<p><b>Shadows</b></p>
<p> <span class="shadow1">Shadow</span>   <span class="shadow2">Glow</span></p>
<p><b>Borders with Rounded Corners</b></p>
<p> <span class="round1">Round Corners</span>   <span class="round2">Round Corners</span>   <span class="round3">Round Corners</span></p>

<p><b>How to Style Boxes</b></p>
<div class="css5box2">
<h3>Lorem Ipsum Dolor</h3>
<p>Lorem ipsum dolor sit amet,  vurucelerisque tincidunt ac vel elit.</p>
</div>

<div>
<input type="text" value="I am a text field" size="43" class="styled" />
</div>

<p><b>Styling Forms</b></p>
<div style="height: 43px">
<input type="button" value="Click Me" class="roundbutton" />
</div>

Create CSS Testimonial

Create CSS Testimonial

<style>
.testimonial {
    margin: 0;
    background: #B7EDFF;
    padding: 10px 50px;
    position: relative;
    font-family: Georgia, serif;
    color: #666;
    border-radius: 5px;
    font-style: italic;
    text-shadow: 0 1px 0 #ECFBFF;
    background-image: linear-gradient(#CEF3FF, #B7EDFF);
 width:400px;
}

.testimonial:before, .testimonial:after {
    content: "\201C";
    position: absolute;
    font-size: 80px;
    line-height: 1;
    color: #999;
    font-style: normal;
}

.testimonial:before {
    top: 0;
    left: 10px;
}
.testimonial:after {
    content: "\201D";
    right: 10px;
    bottom: -0.5em;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #B7EDFF;
    margin: 0 0 0 25px;
}
.testimonial-author {
    margin: 0 0 0 25px;
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
    text-align:left;
}
.testimonial-author span {
    font-size: 12px;
    color: #666;
}
</style>
<blockquote class="testimonial">
  <p>Nullam non wisi a sem semper eleifend. Pellentesque habitant morbi tristique senectus et netus et male</p>
</blockquote>
<div class="arrow-down"></div>
<p class="testimonial-author">adipiscin</span></p>

Saturday, June 1, 2013

5 Tips for optimizing and cleaning up CSS

5 Tips for optimizing and cleaning up CSS

1. Use shorthand
CSS properties like padding, margin, background, font and border allow usage of shorthand. Combining values using shorthand help in cutting down code and coding time.
For example:

padding-left:0px ;
padding-top:4px;
padding-bottom: 3px;
padding-right:0px;

can be written as:

padding:0 4px 3px 0;

*hint : top – right – bottom – left*
2. Omit units like px / em / % when value is zero
As you may have noticed in the above example, I have eliminated px from the properties that are of value 0. Zero (0) doesn’t require units. 0px is the same as 0em or 0%.
3. Color Prefixes
Typically HEX codes used to define color values are 6 characters long. However, certain color combinations can be reduced and represented in 3 chars.

For example:

color:#000000;

can be written as:

color:#000;

also

color: #aa88aa;

can be written as:

color:#a8a;

4. Group Elements
If there are multiple elements like h1, h2, h3 with common properties, instead of declaring them separately it helps optimize your CSS by combining them, like as follows:

h1, h2, h3{
padding:0 ;
margin:0;
color:#000;
}

5. Use a compressor
Once you are done with your CSS wizardry, it is a good idea to use a CSS compressor tool to shed the excess load off your CSS files. There is a bunch of such services available online, like: cleancss.com, codebeautifier.com, and cssoptimiser.com to name a few. Make sure you attempt optimizing your CSS this way at the end of your project, just before going live because it is likely that you will be served up with a human unreadable (but browser friendly) block of code.

Monday, June 4, 2012

HTML 5 Form

HTML 5 Form

Download

 <style>
  *:focus {outline: none;}
  body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
  .html5form ul {
   width:750px;
   list-style-type:none;
   list-style-position:outside;
   margin:0px;
   padding:0px;
  }
  .html5form li{
   padding:12px; 
   border-bottom:1px solid #eee;
   position:relative;
  } 
  .html5form li:first-child, .html5form li:last-child {
   border-bottom:1px solid #777;
  }
  .html5form label {
   width:150px;
   margin-top: 3px;
   display:inline-block;
   float:left;
   padding:3px;
  }
  .html5form input {
   height:20px; 
   width:220px; 
   padding:5px 8px;
  }
  .html5form button {margin-left:156px;}
  /* form element visual styles */
   .html5form input { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right:30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
   }
   .html5form input:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
    padding-right:70px;
   }
   /* === HTML5 validation styles === */ 
   .html5form input:required {
    background: #fff url(images/red_asterisk.png) no-repeat 98% center;
   }
   .html5form input:required:valid {
    background: #fff url(images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
   }
   .html5form input:focus:invalid {
    background: #fff url(images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
   }
   /* === Form hints === */
   .form_hint {
    background: #d45252;
    border-radius: 3px 3px 3px 3px;
    color: white;
    margin-left:8px;
    padding: 1px 6px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
   }
   .form_hint::before {
    content: "\25C0";
    color:#d45252;
    position: absolute;
    top:1px;
    left:-6px;
   }
   .html5form input:focus + .form_hint {display: inline;}
   .html5form input:required:valid + .form_hint {background: #28921f;}
   .html5form input:required:valid + .form_hint::before {color:#28921f;}
   /* === Button Style === */
   button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
   }
   button.submit:hover {
    opacity:.85;
    cursor: pointer; 
   }
   button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
    
   }
 </style>
<form class="html5form" action="#" method="post" name="html5form">
    <ul>
  <li>
            <label for="name">Name:</label>
            <input type="text"  placeholder="Ednalan" required />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="email" name="email" placeholder="ednalan@gmail.com" required />
            <span class="form_hint">Proper format "ednalan@gmail.com"</span>
        </li>
        <li>
         <button class="submit" type="submit">Submit Form</button>
        </li>
    </ul>
</form>

Thursday, January 19, 2012

CSS Info Boxes

CSS Info Boxes

Download

<style>
.columns-wrapper {
width: 960px;
float: left;
margin-bottom: 30px;
}
.two-columns,.two-columns-2 {
width: 457px;
float: left;
margin-right: 45px;
}
.info_box,.note_box,.tip_box,.error_box,tip_box {
padding: 20px;
margin: 20px 0px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-khtml-border-radius: 10px;
border-radius: 7px;
padding-left: 55px;
background: #eee;
font-style:italic;
}
.info_box {
background: #ddf3fc url(images/icons/info.png) no-repeat scroll 10px
 14px;
border: 1px solid #8ed9f6;
color: #2e6093;
}
.note_box {
background: #fffadb url(images/icons/note.png) no-repeat scroll 10px
 15px;
border: 1px solid #f5d145;
color: #9e660d;
}
.error_box {
background: #ffdede url(images/icons/error.png) no-repeat scroll 10px
 15px;
border: 1px solid #d97676;
color: #cd0a0a;
}
.tip_box {
background: #eff7d9 url(images/icons/tip.png) no-repeat scroll 10px
 15px;
border: 1px solid #b7db58;
color: #5d791b;
}

</style>
<h2>Info Boxes</h2>
    <div class=" columns-wrapper">
      <div class="two-columns">
        <div class="info_box"><b>Info:</b> Insert your text here</div>
        <div class="error_box"><b>Error:</b> Insert your text here</div>
      </div>
      <div class="two-columns-2">
        <div class="note_box"><b>Note:</b> Insert your text here</div>
        <div class="tip_box"><b>Tip:</b> Insert your text here</div>
      </div>
      <br />
      <br />
    </div>

Tuesday, January 17, 2012

Create A CSS Style Form

<style>
input {margin:0; padding:0;}
input[type=text], input[type=password], textarea { border:1px solid #e3e3e3; padding:7px; font-size:11px; color:#777; }
input[type=text], input[type=password], textarea, select {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
background: linear-gradient(top, #ffffff 0%,#f4f4f4 100%);
-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;
outline:0 none !important;
}
input[type=text].rounded, input[type=password].rounded, textarea.rounded, select.rounded, input[type=submit].rounded, button.rounded {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;  }
input[type=text]:hover, input[type=password]:hover, textarea:hover { border:1px solid #b4b4b4; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus { -moz-box-shadow: 0 0 3px #EB540A;-webkit-box-shadow: 0 0 3px #EB540A; box-shadow: 0 0 3px #EB540A; border: 1px solid #EB540A; }
input[type=submit], button {
background:#EB540A; padding: 4px 14px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5);
text-transform:uppercase; cursor:pointer; border:1px solid #444;
-webkit-box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset;
}
input[type=submit]:hover, button:hover { -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset; -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset; box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 -2px 6px rgba(255, 255, 255, 0.5) inset;}
input[type=submit]:active, button:active {-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset; -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) inset;}
.rounded-fields input[type=text], .rounded-fields input[type=password], .rounded-fields textarea, .rounded-fields select, .rounded-fields input[type=submit], .rounded-fields button {-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;  }
select {padding:7px; border:1px solid #e3e3e3;}
select:hover { border:1px solid #b4b4b4; }
form > div {margin-bottom:15px;}
form label {color:#454545;}

form.infield > div, form.infield > p {position:relative;}
form.infield label {position:absolute; left:7px; top:5px; font-size:11px; color:#888;}

.form-preset input[type=text], .form-preset input[type=password] {width:240px;}
.form-preset textarea {width:450px;}
</style>


               <h1 class="title">FORM STYLES</h1>
                
                  <form action="#" method="post" class="form-preset">
                   <div>
                           <label for="name2">Text Input (with rounded corners):</label><br>
                           <input type="text" name="name2" class="rounded" id="name2" value="" tabindex="2" />
                      </div>
                      <div>
                           <label for="name">Password Input (with rounded corners):</label><br>
                           <input type="password" name="name2" class="rounded" id="name2" value="tralala" tabindex="2" />
                      </div>
                    
                
                    
                      <div>
                          <label for="select-choice">Select Dropdown Choice (rounded corners):</label><br>
                          <select name="select-choice" id="select-choice" class="rounded">
                              <option value="Choice 1">Choice 1</option>
                              <option value="Choice 2">Choice 2</option>
                              <option value="Choice 3">Choice 3</option>
                          </select>
                      </div>
                    
                    
                      <div>
                          <label for="textarea">Textarea (round corners):</label><br>
                          <textarea cols="40" rows="8" name="textarea" id="textarea" class="rounded">This textarea has .rounded class set to it</textarea>
                      </div>
                   
                      <div>
                       Submit input with .rounded class:<br>
                          <input type="submit" value="Submit" class="rounded" />
                      </div>
                  </form>

CSS Simple Photo gallery

<style>
ul.gallery {clear: both; list-style: none outside none; margin: 8px auto; overflow: hidden; padding: 8px 0;}
ul.gallery li {background:#FFFFFF; float: left; margin: 5px; padding: 0; list-style:none; }
ul.gallery li a img {padding:4px; border:1px solid #ededed;-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; }
ul.gallery li a img:hover {-moz-box-shadow: 0 0 5px #EB540A;-webkit-box-shadow: 0 0 5px #EB540A; box-shadow: 0 0 5px #EB540A; border: 1px solid #EB540A;}
</style>
<h2>Photo gallery</h2>
<ul class="gallery">
 <li><a href="#"><img src="photo1.jpg" alt=""></a></li>
 <li><a href=""><img src="photo2.jpg" alt=""></a></li>
 <li><a href=""><img src="photo3.jpg" alt=""></a></li>
</ul>

Wednesday, December 14, 2011

Simple CSS Vertical Menu

Simple CSS Vertical Menu

Download

<style type="text/css">
.verticalmenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 200px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.verticalmenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 10px 0;
padding-left: 10px;
text-decoration: none;
}
* html .verticalmenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}
.verticalmenu li a:visited, .verticalmenu li a:active{
color: white;
}
.verticalmenu li a:hover{
background-image: url(images/glossyback2.gif);
}
</style>
<ul class="verticalmenu">
<li><a href="#" >r-ednalan.blogspot.com</a></li>
<li><a href="#" >CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Web Design</a></li>
</ul>

Sunday, December 11, 2011

Create CSS Vertical Menu

<style type="text/css">
.verticalmenu{
width: 190px;
}
.verticalmenu .headerbar{
font: bold 13px Verdana;
color: #000000;
background: #F3CE69 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
border:1px solid #73310A;
}
.verticalmenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.verticalmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.verticalmenu ul li a{
font: normal 12px Arial;
color: black;
background: #FFFBEF;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
border:1px solid #73310A;
}
.verticalmenu ul li a:visited{
color: black;
}
.verticalmenu ul li a:hover{ /*hover state CSS*/
color: #D95A16;
background: #DDDDDD;
}
</style>
<div class="verticalmenu">
<h3 class="headerbar">Tutorials</h3>
<ul>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">DATABASES</a></li>
<li><a href="#">DESIGN</a></li>
<li><a href="#">HTML CSS</a></li>
<li><a href="#">JAVASCRIPT AND AJAX</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">TOOLS AND TIPS</a></li>
<li><a href="#">PYTON</a></li>
</ul>
</div>

Friday, December 9, 2011

CSS Menu

CSS Menu

Download

<style>
*{
margin:0;
padding:0;
}
#menu_blue{
width:90%;
margin:25px auto;
}
#menu_blue ul{
list-style:none;
}
#menu_blue li{
display:block;
float:left;
}
#menu_blue li a{
background:#e4e8eb url(menu_bg_blue.gif) repeat-x;
border:2px solid #bdc5cd;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu_blue li a span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu_blue li a:hover{
background:#e46825 url(menu_hover_blue.gif) repeat-x;
border:2px solid #4a88ce;
text-decoration:none;
}
#menu_blue li a:hover span{
color:#636363;
}
.current_blue{
background:#74befd url(menu_hover_blue.gif) repeat-x;
border:2px solid #4a88ce;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;
height: 50px;
}
.current_blue span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
</style>
<div id="menu_blue">
<ul>
 <li class="current_blue">Home<br /><span>takes you to<br /> home page</span></li>
 <li><a href="#">About Us<br /><span>takes you to<br />about us page</span></a></li> 
 <li><a href="#">Products<br /><span>takes you to<br />products page</span></a></li>
 <li><a href="#">Contact Us<br /><span>takes you to<br />contact page</span></a></li>
</ul>
</div>

Free CSS Drop-Down Menu Framework

Free CSS Drop-Down Menu Framework

CSS Drop-Down Menu Framework is a free & cross-browser solution to create good looking menus Compatibility: All Major Browsers

Website: http://lwis.net/free-css-drop-down-menu/

Demo: http://lwis.net/free-css-drop-down-menu/dropdown.mtv...

Download: http://free-css-drop-down-menu-framework.googlecode.com/files/free-css-drop-down-menu_v1.2.zip

Tuesday, November 29, 2011

Create Form Styling with CSS3

<style>
form { width: 460px; padding: 20px; color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; margin: 0 auto }
fieldset { position: relative; padding: 10px; padding-top: 0; padding-top: 25px\9; margin-bottom: 30px; background: #F6F6F6; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#FFFFFF)); background: -moz-linear-gradient(center top, #EFEFEF, #FFFFFF 100%); box-shadow: 3px 3px 10px #ccc; -moz-box-shadow: 3px 3px 10px #ccc; -webkit-box-shadow: 3px 3px 10px #ccc }
legend { padding: 6px 12px; position: absolute; left: 10px; top: -11px; background-color: #4F709F; color: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; -webkit-box-shadow: 2px 2px 4px #888; text-shadow: 1px 1px 1px #333 }
label, span { float: left; clear: left; display: block; width: 180px; padding-right: 20px; text-align: right; height: 20px; line-height: 20px }
input, textarea { padding: 3px; float: left; width: 200px; border: 1px solid #d9d9d9 }
.submit { width: 100px; float: right; margin-right: 37px; border: 0; padding: 5px 10px; background: #4F709F; color: white; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; box-shadow: 2px 2px 4px #888; -moz-box-shadow: 2px 2px 4px #888; -webkit-box-shadow: 2px 2px 4px #888; margin-bottom: 4px; text-shadow: 1px 1px 1px #333 }
textarea { background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(1%, #EEEEEE), to(#FFFFFF)) }
input:focus, textarea:focus { background: white; border-color: #666 }
p { overflow: hidden; margin-bottom: 10px }
p:first-of-type { padding-top: 25px }
</style>
<form>
  <fieldset>
   <legend>Details</legend>
   <p><label for="name">Name</label><input id="name" type="text" /></p>
   <p><label for="email">Email</label><input id="email" type="email" /></p>
   <p><label for="telephone">Telephone</label><input id="telephone" type="tel" /></p>
   <p><label for="project-details">Additional Details</label><textarea id="project-details" rows="5"></textarea></p>
   <p><input class="submit" type="submit" id="submit" value="Submit Form" /></p>  
  </fieldset>
 </form>

A Set Of Pure CSS Animations – Animate.css

A Set Of Pure CSS Animations – Animate.css

Animations like fade in/fade out or bounce are used almost everywhere, thanks to the ease that JS frameworks are offering, to create attractive user experiences.

Website: http://daneden.me/animate/

Download: https://github.com/daneden/animate.css

Creative, CSS3-Powered And Animated Menus

Creative, CSS3-Powered And Animated Menus

10 unique examples, all have the same HTML structure but different CSS styles that make use of CSS transitions and animations.

Website: http://tympanus.net/codrops/2011/10/24/creative-css3...

Demo: http://tympanus.net/Tutorials/CreativeCSS3AnimationM...

Friday, November 25, 2011

Create a CSS Tab

Create a CSS Tab

Download Here

<style>
* {padding:0; margin:0;}
body {background:url(images/bg.jpg) repeat; font-family:Georgia, "Times New Roman", Times, serif; color:#212713;}
#wrap {width:1000px; margin:auto;}
#contentwrap {background:url(images/contentbg.gif) repeat-y; padding:10px 0 3px 0;}
#menu {background:url(images/contenttop.gif) center bottom no-repeat; height:44px; padding-bottom:11px;}
#contentbtm {background:url(images/cntntbtm.gif) center no-repeat; height:12px;}
ul {list-style:none;}
#menu li {display:inline; font:bold 22px Comfortaa;}
#menu li a {display:block; height:44px; float:left; background:url(images/menu2.gif) right top no-repeat; margin-right:3px; padding-right:10px; color:#dbe7af; text-decoration:none;}
#menu li a span {display:block; background:url(images/menu1.gif) left top no-repeat; padding:7px 20px 0 30px; height:37px;}
#menu li a:hover {background:url(images/menuh2.gif) right top no-repeat; color:#1b2502; text-shadow:#fff 1px 1px 1px;}
#menu li a:hover span {background:url(images/menuh1.gif) left top no-repeat;}
#menu li.active a {background:url(images/menuh2.gif) right top no-repeat; color:#1b2502; text-shadow:#fff 1px 1px 1px;}
#menu li.active a span {background:url(images/menuh1.gif) left top no-repeat;}
#mainpage {padding:0 10px 10px 10px;}
</style>
<div id="wrap">
 <div id="menu">
  <ul>
  <li class="active"><a href="index.html"><span>Home</span></a></li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Contact</span></a></li>
  </ul>
 </div>
 <div id="contentwrap">
  <div id="mainpage">
   Contents
  </div>
 </div>
 <div id="contentbtm"></div>
</div>

Monday, November 21, 2011

Create Contact Form Design


<style>
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#222222;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#2c2c2c; text-transform:capitalize;}
#contactform label span { display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:440px; border:1px solid #dcdcdc; margin:5px 0; padding:5px 2px; height:25px; background:#f5f5f5;}
#contactform textarea { width:440px; border:1px solid #dcdcdc; margin:10px 0; padding:2px; background:#f5f5f5;}
#contactform li.buttons input { padding:3px 0; margin:0; border:0; color:#FFF;}
</style>
<h2>Contact form</h2>
<form action="contact.php" method="post" id="contactform">
            <ol>
              <li>
                <label for="name">First Name<a href="#">*</a><br />
                </label>
                <input name="name" class="text" id="name" />
              </li>
              <li>
                <label for="label2">Your e-mail<a href="#">*</a><br />
                </label>
                <input id="label2" name="name2" class="text" />
              </li>
              <li>
                <label for="email">Company Name<br />
                </label>
                <input id="email" name="email" class="text" />
              </li>
              <li>
                <label for="label">Subject<br />
                </label>
                <input id="label" name="email2" class="text" />
              </li>
              <li>
                <label for="message">Message<a href="#">*</a><br />
                </label>
                <textarea id="message" name="message" rows="6" cols="50"></textarea>
              </li>
              <li class="buttons">
                <input type="image" name="imageField2" id="imageField2" src="images/send.gif" />
              </li>
            </ol>
          </form>

Tutorial101

article

Tuesday, August 20, 2013

Create CSS3 Button

Simple Dropdown Menu like apple

Saturday, July 27, 2013

Style a Select Box Using CSS

Friday, June 14, 2013

Create a simple style css table

CSS3 Techniques

Create CSS Testimonial

Saturday, June 1, 2013

5 Tips for optimizing and cleaning up CSS

Monday, June 4, 2012

HTML 5 Form

Thursday, January 19, 2012

CSS Info Boxes

Tuesday, January 17, 2012

Create A CSS Style Form

CSS Simple Photo gallery

Wednesday, December 14, 2011

Simple CSS Vertical Menu

Sunday, December 11, 2011

Create CSS Vertical Menu

Friday, December 9, 2011

CSS Menu

Free CSS Drop-Down Menu Framework

Tuesday, November 29, 2011

Create Form Styling with CSS3

A Set Of Pure CSS Animations – Animate.css

Creative, CSS3-Powered And Animated Menus

Friday, November 25, 2011

Create a CSS Tab

Monday, November 21, 2011

Create Contact Form Design

Related Post

Search This Blog

HOME

Category

Popular Posts