10:26
PhatTrien.net
Square
#square {
width: 140px;
height: 140px;
background: blue;
}
Circle
#circle { width: 140px; height: 140px; background: blue; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; }
Oval
Circle
#circle { width: 140px; height: 140px; background: blue; -moz-border-radius: 70px; -webkit-border-radius: 70px; border-radius: 70px; }
Oval
#oval {
width: 200px;
height: 100px;
background: blue;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
Up Triangle
Up Triangle
#up-triangle {
width: 0;
height: 0;
border-bottom: 120px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Down Triangle
Down Triangle
#down-triangle {
width: 0;
height: 0;
border-top: 120px solid blue;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Left Triangle
Left Triangle
#left-triangle {
width: 0;
height: 0;
border-right: 100px solid blue;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
Right Triangle
Right Triangle
#right-triangle {
width: 0;
height: 0;
border-left: 100px solid blue;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
Triangle Top Left
Triangle Top Left
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid blue;
border-right: 100px solid transparent;
}
Triangle Top Right
Triangle Top Right
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid blue;
border-left: 100px solid transparent;
}
Triangle Bottom Left
Triangle Bottom Left
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-right: 100px solid transparent;
}
Triangle Bottom Right
Triangle Bottom Right
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid blue;
border-left: 100px solid transparent;
}
Trapezium
#trapezium {
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
Diamond
#diamond {
width: 80px;
height: 80px;
background: blue;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
Rectangle
#rectangle {
width: 140px;
height: 80px;
background: blue;
}
Parallelogram
#parallelogram {
width: 130px;
height: 75px;
background: blue;
/* Skew */
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}
Twelve Point Star
#twelve-point-star {
height: 100px;
width: 100px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: blue;
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: blue;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
Six Point Star
#six-point-star {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid blue;
}
#six-point-star:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid blue;
margin: 30px 0 0 -50px;
}
Octagon
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
Speech Bubble
#speech-bubble {
width: 120px;
height: 80px;
background: blue;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid blue;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}
Egg
#egg {
display:block;
width:126px;
/* width has to be 70% of height */
/* could use width:70%; in a square container */
height:180px;
background-color:blue;
/* beware that Safari needs actual
px for border radius (bug) */
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
EQ Triangle
#eq-triangle {
width: 0;
height: 0;
border-bottom: 104px solid blue;
/* 104 = 120 * 0.866 */
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
Pacman
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid blue;
border-left: 60px solid blue;
border-bottom: 60px solid blue;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
Biohazard
#biohazard {
width: 0;
height: 0;
border-bottom: 60px solid black;
border-top: 60px solid black;
border-left: 60px solid yellow;
border-right: 60px solid yellow;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
Heart
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: blue;
-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%;
}
Infinity
#infinity {
position: relative;
width: 164px;
height: 80px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border: 20px solid blue;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg); y
transform: rotate(45deg);
}
Mình hy vọng là với những hình trên, sẽ tiết kiệm cho các bạn rất nhiều thời gian cũng như hiểu rõ hơn về các thuộc tính mới của CSS3. Có thể nhiều hình sẽ không hiển thị đúng như trong hình (do nhiều trình duyệt chưa hỗ trợ) nên các bạn nên test thử trên các phiên bản trình duyệt mới nhất của Firefox hay Chrome để có hiệu quả tốt nhất nhé.
Trapezium
#trapezium {
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}Diamond
#diamond {
width: 80px;
height: 80px;
background: blue;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}Rectangle
#rectangle {
width: 140px;
height: 80px;
background: blue;
}Parallelogram
#parallelogram {
width: 130px;
height: 75px;
background: blue;
/* Skew */
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}Twelve Point Star
#twelve-point-star {
height: 100px;
width: 100px;
background: blue;
position: absolute;
}
#twelve-point-star:before {
height: 100px;
width: 100px;
background: blue;
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: blue;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}Six Point Star
#six-point-star {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid blue;
}
#six-point-star:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid blue;
margin: 30px 0 0 -50px;
}Octagon
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}Speech Bubble
#speech-bubble {
width: 120px;
height: 80px;
background: blue;
position: absolute;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#speech-bubble:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid blue;
border-bottom: 13px solid transparent;
margin: 13px 0 0 -25px;
}Egg
#egg {
display:block;
width:126px;
/* width has to be 70% of height */
/* could use width:70%; in a square container */
height:180px;
background-color:blue;
/* beware that Safari needs actual
px for border radius (bug) */
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}EQ Triangle
#eq-triangle {
width: 0;
height: 0;
border-bottom: 104px solid blue;
/* 104 = 120 * 0.866 */
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}Pacman
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid blue;
border-left: 60px solid blue;
border-bottom: 60px solid blue;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}Biohazard
#biohazard {
width: 0;
height: 0;
border-bottom: 60px solid black;
border-top: 60px solid black;
border-left: 60px solid yellow;
border-right: 60px solid yellow;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}Heart
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: blue;
-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%;
}Infinity
#infinity {
position: relative;
width: 164px;
height: 80px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 40px;
border: 20px solid blue;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg); y
transform: rotate(45deg);
}Mình hy vọng là với những hình trên, sẽ tiết kiệm cho các bạn rất nhiều thời gian cũng như hiểu rõ hơn về các thuộc tính mới của CSS3. Có thể nhiều hình sẽ không hiển thị đúng như trong hình (do nhiều trình duyệt chưa hỗ trợ) nên các bạn nên test thử trên các phiên bản trình duyệt mới nhất của Firefox hay Chrome để có hiệu quả tốt nhất nhé.
NHÀ CUNG CẤP DỊCH VỤ CHUYÊN NGHIỆP PHÁT TRIỂN WEBDESIGN - HOSTING - DOMAIN Website: Phattrien.net - Phattrien.info - Trangvangdichvu.com - Trangvangmuaban.com Hotline: 0931 435 998 Zalo: @PhatTriennet CỬA HÀNG CAMERA Chuyên: Camera IP WiFi, Camera IP, Camera CVI, Camera AHD, Camera Analog, Đầu ghi Camera, Máy Bộ Đàm, Bộ camera quan sát Địa chỉ: 537 Đường Phan Văn Trị, P.Kim Dinh, Tp. Bà Rịa, BR-VT Hotline: 0931 435 998 Zalo: @WinTech Website: CuaHangCamera.com - CửaHàngCamera.vn - Nhaphanphoicamera.net - CareCam.Pro
0 nhận xét :
Đăng nhận xét