It is possible to draw various figures by drawing of CSS and CSS3. It doesn’t become a reason why drawing by pure CSS is not used for the web expression though it is
necessary to consider how to support a browser of IE8 or less.
CSS3 is convenient, and sexy. But, it looks complex.
It is necessary to enjoy the expression by CSS3 positively. I think that it is the best practice of the understanding of css3.
However, the clue of something is necessary.
I think that you should understand the method of making a basic figure as for the first step. As much as the time before when we learned Adobe Illustrator.
square
class：square
/*square. This shape is origin of other shapes.*/
.square {
width:100px;
height:100px;
margin:20px;
position:relative;
background:rgb(100,100,255);
}
.square:hover {/*box-shadow is For sample*/
-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.7);
-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.7);
box-shadow:3px 3px 3px rgba(0,0,0,0.7);
}
cross
class：square cross
.square.cross {
width:25px;
left:37.5px;
}
.cross::before {
content:"";
display:block;
width:100%;
height:100%;
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
background:rgb(80,80,200);
}
The width of the element is specified for 1/4 of the height. And make before pseudoelement content, change to block, And 100% width and height, And 90-degree rotation.
The reference point of the rotation is possible to specify with transform-origin. But, that’ s default values is center. So, I don’t touch it.
times
class：square cross batu (‘BATU’ is a name of the sign that shows ‘Times’ in Japanese.)
.shapesDemo .sample .square.cross.batu {
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
Only 45-degree rotation added to “cross”.
asterisk
class：square cross asterisk
.square.cross.asterisk::before {
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
transform:rotate(60deg);
}
.square.cross.asterisk::after {
/*that increases one line Content*/
content:"";
display:block;
width:100%;
height:100%;
-moz-transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
transform:rotate(-60deg);
background:rgb(50,50,200);
/*Before pseudoelement
has already been generated,
so, the following specification
is necessary to pile it up.*/
position:absolute;
top:0;
left:0;
}
rounded square
class：square rounded
.rounded {
-moz-border-radius:10px;
border-radius:10px;
}
To round the corner, border-radius is specified. in Firefox3.6,-moz- vender-prefix is necessary.
circle
class：square circle
.circle {
-moz-border-radius:50%;
border-radius:50px;
}
When the value of border-radius is adjusted to 50% (height and width), square becomes circle.
Because it is not possible to specify it with % in webkit, it specifies it by the numerical value.I want to support % specification by all means.
By the way, I was not daily using the English word “Radius”. Other Japanese people too, I think.
However,I remembered “r”. Once upon a time, I learned it in the elementary school as formulas 2πr and πr2…
And when saying, other “There were a lot of car accidents of this road because “r” was large” etc. , the initial “r” was noticed to be used!
ellipse
class：square ellipse
.ellipse {
height:50px;
-moz-border-radius:50%/25%;
border-radius:50px/25px;
}
Four values can be specified for border-radius.top-left,top-right,bottom-right, and bottom-left. In addition, it is possible to specify it by delimiting radius in the direction of x and y by/as a value of radius of each corner.
There are a major axis and a minor axis in the oval. If it is an oblong oval, half the value of width becomes a major axis, and half the value of height becomes a minor axis.
When the ratio in length and breadth is an oval of 1:2,X of radius of four corners is adjusted to 50%, and y is adjusted to 25%.
It is necessary to specify webkit by the numerical value.
tube
class：square tube
.tube {
-moz-border-radius:50%/25%;
border-radius:50px/25px;
}
.tube:after{/*Upper side*/
content:"";
display:block;
position:absolute;
top:2px;
left:2px;
width:96px;
height:48px;
-moz-border-radius:50%/25%;
border-radius:50px/25px;
background:rgb(150,150,255);
}
When x of four “border-radius” is adjusted to 50%, and y is adjusted from 26 to less than 50%, it becomes the outline of the cylinder that collapses to the vertical direction.
It becomes a tube if content is generated with ::after pseudoelement of this element, the same specification as the “oval” is done, and it arranges it by the absolute configuration up.
