is a professionally managed web design and web development company in Hyderabad, India.
Tuesday, 5 March 2013
CSS 3 BORDER Styles
1. Basic shapes
This not exactly css3 but I thought we need to cover all shapes and actually this is mostly where all the other shapes will start from. In fact all other shapes will be square with tweaked corners or borders .. you will get the idea later …
The trick to make half circle is to make the height = 1/2 width or width =1/2 height depends on the orientation of the shape in the above example the height is 50 and the width is 100 . The top right and left corners are curved so we can achieve half circle effect …
Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent
the B tags are where the eyes are and the I tage is where the mouth is .
One more please .. My house ..
Another very basic example that I did was a house .OK this is the Mom side of me .. when my kids start drawing I first teach them how to draw a face .. then a house .. then a car .This is just a habit that I can't break ..sorry!
The house is triangle on top or a square .. 2 squares for the windows and a rectangle for the door and a shining sun .