Flowing Content with CSS Shapes
As seen from the
screenshots below, you can easily shape up your texts however you want to. The Polydraw tools will help you shape your text giving it
even the most extraordinary shape.
See! You can shape your text inside of those rectangles no manner what their shape is.
Guess how much lines of
code you need to shape these text blocks? Well, JUST 6!
|
1
2
3
4
5
6
|
#rectangle {
shape-inside:
rectangle(0, 0, 100%, 100%, 25%, 25%);
}
#hexagon {
shape-inside:
polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
|
|
1
2
3
4
5
6
7
8
|
#oval {
width: 200px;
height: 100px;
background: purple;
-moz-border-radius:
100px / 50px;
-webkit-border-radius:
100px / 50px;
border-radius:
100px / 50px;
}
|
Want to see twelve point
star? Here you go!
|
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
|
#twelve-point-star {
height: 100px;
width: 100px;
background: orange;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: orange;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
height: 100px;
width: 100px;
background: orange;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
|
How about a heart?
|
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
|
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: red;
-moz-border-radius: 50px
50px 0 0;
border-radius: 50px
50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
|
Hi,An ethical web designer won't have a problem in Web Design Cochin instructing their clients if they are willing to learn. There's always room for both parties to work together towards the end result, which really yields the best results. Thanks.....
ReplyDeletehi aparna i am not understand the problem give me call to my number or mail to me detail
DeleteE:mkiran.wd@gmail.com
M:+91 9177113112