CSS3 tips – buttons and rounded images

CSS can be used across many types of media; almost any device that’s capable of displaying HTML or XML can also display CSS rules. CSS are also faster to change than edition pictures. That’s why so many modern websites uses it.

CSS3 brings news features for creating new beautiful and cool web design effects — that are more efficient and flexible results than the techniques we’ve been using in past. I’ll focus on teaching you some techniques that can truly improve your sites and are ready to be used in your work right away.

Rounded images

To get the effect of rounded edges of any image you do not need to use a graphics program, just that you will use pure CSS. All you have to do it add one class to your image, example to the href attribute.

<a class="rounded" title="Lots of options" href="#your link#"> <img alt="" src="#link to your image#"> </a>

Now add some line of css, especially if the pictures should have a predetermined size.:

.rounded:link, .rounded:visited {
   border-radius: 5px 5px 5px 5px;
   display: block;
   height: 150px;
   margin-bottom: 15px;
   overflow: hidden;
   width: 280px;
     }

And now you will get this kind of picture:

Beautiful input buttons

You probably also want to give a nice style of buttons on your website. Nothing could be easier, of course, without using of graphic files. Bacause CSS3 contains a lot of new properties that allow you to create visual effects that previously could be accomplished only with images, such as rounded corners, drop shadows, semitransparent backgrounds, and gradients.

And now add the property:

     .button.medium {
     font-size: 120%;
     font-weight: bold;
     padding: 7px 16px;
     }


     .button.red {
     border-color: #9e0b0f; 
     background: #e41d24; 
     background: -moz-linear-gradient(top, #fb4e55 0%, #d7020a 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb4e55), color-stop(100%,#d7020a)); 
     background: -webkit-linear-gradient(top, #fb4e55 0%,#d7020a 100%); 
     background: -o-linear-gradient(top, #fb4e55 0%,#d7020a 100%); 
     background: -ms-linear-gradient(top, #fb4e55 0%,#d7020a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb4e55', endColorstr='#d7020a',GradientType=0 ); 
     background: linear-gradient(top, #fb4e55 0%,#d7020a 100%); 
     color: #FFFFFF !important;
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
     }

     .button.blue {
     border-color: #0076a3;
     background: #49b3fc;
     background: -moz-linear-gradient(top, #76c7ff 0%, #1da0fa 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#76c7ff), color-stop(100%,#1da0fa));
     background: -webkit-linear-gradient(top, #76c7ff 0%,#1da0fa 100%);
     background: -o-linear-gradient(top, #76c7ff 0%,#1da0fa 100%);
     background: -ms-linear-gradient(top, #76c7ff 0%,#1da0fa 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76c7ff', endColorstr='#1da0fa',GradientType=0 );
     background: linear-gradient(top, #76c7ff 0%,#1da0fa 100%);
     color: #fff !important;
     text-shadow: 0 -1px 0 rgba(0,0,0,.1);
     }
     .button.blue:hover { background: #76c7ff; }
     .button.red:hover { background: #fb4e55; }

     input[type="submit"], input[type="reset"] {
     cursor: pointer;
     margin: 0;
     outline: medium none;


     }
     .button {
     border: 1px solid #AAAAAA;
     border-radius: 5px 5px 5px 5px;
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(255, 255, 255, 0.3) inset;
     display: inline-block;
     font: 100% Arial,Helvetica,sans-serif;
     text-decoration: none !important;
     vertical-align: middle;
     }


     

The end result should be as follows.