Home » Archive

Articles in the CSS Category

CSS, CSS3, Design, HTML5, Javascript »

[24 Feb 2013 | No Comment | ]

Simple javascript and html coded calculator does simple operations like Addition, Subtraction, division and multiplication.
The code is free to use or modify.
I am distributing to code to be useful for beginners.

Simple Calculator (html, css, javascript)
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
</head>
<style>
#wrapper
{
width:250px;
height:330px;
background:#333;
position:absolute;
}
#container{
width:95%;
height:95%;
position:relative;
left:5px;
top:7px;
border:1px solid #666;
background:#666;
}
.inputClass
{
padding:10px 0px;
margin:4px 0px 0px 4px;
text-align:right;
font-size:14px;
font-weight:600;
}
.numericBTN{
width:52px;
height:30px;
margin:20px 0px 0px 4px;
}

.controlBTN
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight:bold;
color: #000;
background: -moz-linear-gradient(
top,
#f5c7d7 0%,
#ff5c5c);
background: -webkit-gradient(
linear, left top, left bottom,
from(#f5c7d7),
to(#ff5c5c));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #ff5c5c;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.4),
0px …

CSS, CSS3, Design, HTML5 »

[18 Jan 2013 | No Comment | ]

To create layout which scales across multiple devices, We dont always use the same content or images across the smaller screen size devices.
It is wise to use minimal content in small screen devices. So while creating responsive design!! means loading different stylesheet pages or applying different styles for the content. We want remove some containers from the layout inside media queries CSS.

HTML5 Tutorials
CSS3 Tutorials

 

Problem:
How to remove some of the text or image content from HTML page on small screen devices while using media queries?, But which is better way to …

CSS, CSS3, Design »

[14 Dec 2011 | No Comment | ]

CSS3 border allows you to change the look of a css element. CSS border is one of the widely used css property. With CSS3 border property you can specify border style, color and width of a CSS element border.
In this article we are going to discuss CSS3 border property and how to change border color, width and style.
Also try css3 border generator
CSS3 Border Compatibility:
All the browsers support css3 border.

 
Topics covered:

border-style
border-color
border-width

Let’s discus each of the css3 border property in detail.
CSS3 Border-style:
Every side of a css element border like border-top-style , border-right-style, border-bottom-style, …

CSS, CSS3, Design »

[4 Dec 2011 | No Comment | ]

CSS3 drop shadow or css box shadow allows you to add shadow to the css element. It can be either outer or inner shadow with color, blur, size and offset.

Also try css3 drop shadow generator.
CSS3 Box Shadow Compatibility:
CSS3 drop Shadow is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.

[ css3 box shadow compatibility Table via caniuse.com ]
CSS3 Shadow Syntax:
Below is the syntax for CSS3 box shadow
<shadow> = inset? && [ <length>{2,4} && <color>? ]
box-shadow: h-shadow v-shadow blur spread color inset;
1. Horizontal offset of shadow: positive value casts the …

CSS, CSS3, Design »

[3 Dec 2011 | One Comment | ]

CSS rounded corners is being used for long time, with the include of css3 border radius as native support. Now it is possible to created rounded corner css elements without using images in css3.
In this tutorial we are going to see how to create simple CSS3 rounded corners or how to control css3 border radius. Before going deep into the properties let’s check the compatibility and simple border radius.
Also try css3 border radius generator.

CSS3 border radius Compatible table:

[ Table via caniuse.com ]
simple css3 border radius:
Below is the simple example of using …