Tuesday 5 March 2013

CSS 3 BORDER Styles


1. Basic shapes

A. Square

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 …
1
2
3
4
5
6
7
8
.square{

display:block;
width:100px;
height:100px;
background-color:#ccc;

}

B. Rounded rectangular/square

Using border-radius you can specify the radius of the corner
In css3 the property is border-radius which specify the amount of curve for all corners or for specific corner , however older browser support different form of this property:
  • -moz-border-radius in Firefox
  • -webkit-border-radius older safari and Chrome
  • For you know who!!! :( .. Internet explorer none .. but this is a hack that you can find here “Css curved corner ” @ Google code . I think it will be supported by the IE9.
More about browser compatibility and comparison can be found in this very informative post by Jerry Seeger .
Back to the fun part ..
1
2
3
4
5
6
7
8
9
.rounded_corner{
display:block;
width:100px;
height:100px;
background-color:#344567;
-moz-border-radius:20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
This will draw a square with border radius =20px .
1
2
3
4
5
6
7
8
9
.rounded_corner2{
display:block;
width:100px;
height:100px;
background-color:#344567;
-moz-border-radius:20px 40px    0    0;
-webkit-border-radius: 20px    40px    0    0;
border-radius: 20px    40px    0    0;
}
In the previous example you can see that we can change the radius for each corner individually (top/Left ,top/Right , bottom/Right ,bottom/left ) .

C. Circle

1
2
3
4
5
6
7
8
background-color: #c06;
height: 100px;
width: 100px;
display:block;

-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
A high radius will make the corners blend into a circle .
1
2
3
4
5
6
7
8
9
10
11
.half_circle {
background-color: blue;
height: 50px;
width: 100px;
display:block;

-moz-border-radius:75px 75px 0 0 ;
-webkit-border-radius: 75px 75px 0 0 ;
border-radius: 75px 75px 0 0 ;

}
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 …
1
2
3
4
5
6
7
8
9
.q_circle {
background-color: green;
height: 50px;
-moz-border-radius:75px 0 0 0 ;
-webkit-border-radius: 75px 0 0 0 ;
border-radius: 75px 0 0 0 ;
width: 50px;
display:block;
}
With the quarter square the width and height can still be the same and only one corner is curved … Cool isn’t it :)

D. Trianlge

I found this cool and simple trick at Jon Rohan blog ..
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
1
2
3
4
5
6
7
.triangle {
border-color: red transparent transparent transparent ;
border-style:solid;
border-width:40px;
width:0;
height:0;
}
As we all know we have 4 borders the first one is red the other 3 are transparent .
More examples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.triangle2 {
border-color:  transparent  yellow transparent  transparent ;
border-style:solid;
border-width:40px;
width:0;
height:0;
}
.triangle3 {
border-color:  transparent transparent green transparent ;
border-style:solid;
border-width:40px;
width:0;
height:0;
}

.triangle4 {
border-color:  transparent transparent  transparent orange;
border-style:solid;
border-width:40px;
width:0;
height:0;
}

2. More tools

More tools to help you with your drawing process ..

a. Transparency

1
2
3
4
5
6
7
8
9
10
11
12
13
.trans {

/* for IE */

filter:alpha(opacity=50);

/* FF */

-moz-opacity:0.5;
/* CSS3 standard */
opacity:0.5;

}

b. Rotation

Rotating an element can help you in creating a third one . For example rotating a square can create a diamond shape.
1
2
3
4
5
6
7
8
9
10
/* for firefox, safari, chrome, and others . */

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

/*  for IE  */

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
<pre><code>
According to snook.ca
In order to perform a transformation, the element has to be set to
1
display:block
The rotation property of the BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.

C. Gradient

Another cool touches to your master piece .Here is a quick way
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Div{

/*  For Older Browsers */

background: #fff;

/* For IE */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000');

/* For webkit Browser (Safari , Chrome .. etc) */

background: -webkit-gradient (linear, left top, left bottom, from(#fff), to(#000));

/* For firefox 3.6 and more */

background: -moz-linear-gradient(top,  #fff,  #000);

}
For older browsers that don't support css3 there will be one solid color .
1
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',  endColorstr='#000000');
For IE :) it's not css3 but it's the 2nd best thing .. A way to apply the gradient using filters .
1
background: -webkit-gradient (linear, left top, left bottom,  from(#fff), to(#000));
For safari and chrome .. etc use -webkit-gradient
  • we specified the gradient as a liner at the first parameter .
  • Left top : are the starting point
  • Left bottom : are the ending points .
  • from (#fff) : the first color
  • to(#000) : the 2nd color
1
background: -moz-linear-gradient(top,  #fff,  #000);
with firefox it's quite different
  • -moz-linear-gradient : This is means start a linear gradient
  • top: is the starting position .
  • #fff : is the first color.
  • #000 : is the last color
More info and options about the gradient property visit the art of web .

Examples

Those are fairly simple examples for demonstration purpose .

Let's have some fun..Happy face...

I haven't done stunning drawings like the Steve Dennis " Fail whale " but ..
Just like " Hello world " codes .. I will do happy face example .. which was 1 large circle head , 2 small Circles for the eyes and half circle for the mouth .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.happyface {
background-color: yellow;
height: 100px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
width: 100px;
text-align :center;
position :relative;
}
.happyface b {
background-color: black;
height: 20px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
width: 20px;
display:block;
float:left;
margin-left:20px;
margin-top:25px;
}
.happyface i {
background-color: red;
height: 30px;
-moz-border-radius:0 0 75px 75px ;
-webkit-border-radius: 0 0 75px 75px;
border-radius: 0 0 75px 75px;
width: 50px;
display:block;
position :absolute;
bottom:12px;
left:24px;
}
and the css is
1
2
<div><strong> </strong><strong> </strong>
<em> </em></div>
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  .
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.frame{
background:blue;
padding:10px 10px 0 10px;
width:300px;
margin:0 auto;
text-align :center;
background: -moz-linear-gradient(top, #7AA9DD, #D9D9F3);
min-height:200px;
position:relative;
}
.house {
position:absolute ;
margin:0 auto;
display:block;
width:100px;
height:100px;
background: -moz-linear-gradient(top, #8B5A2B, #8B5A2B);
bottom:0;
left:100px;
}
.house:before {
border-color:  transparent transparent #603311 transparent ;
border-style:solid;
border-width:50px;
width:0;
height:0;
display:block;
content:"\00a0";
position:absolute;
z-index:1;
top:-100px;

}
.house span{
display:block;
width:30px;
height:30px;
background-color:#FEE5AC;
float:right;
margin-right:14px;
margin-top:6px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-kcss-opacity: 0.5;
opacity: 0.5;

}
.house b{
display:block;
width:40px;
height:60px;
background-color:#FEE5AC;
position :absolute;
bottom:0;
right:30px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-kcss-opacity: 0.5;
opacity: 0.5;

}
.sun {
background-color: yellow;
height: 70px;
-moz-border-radius:75px;
-webkit-border-radius: 75px;
border-radius: 75px;
width: 70px;
display:block;
}
and the css
1
2
3
4
5
6
7
<div class="frame">

<span class="sun"> </span>
<div class="house"><span class="window"> </span>
<span class="window"> </span>
<strong> </strong></div>
</div>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)