รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

การสร้างรูปทรงเรขาคณิตด้วย CSS3

     การนำ CSS3 เข้ามาใช้งานสำหรับผู้พัฒนาเว็บนั้น จะช่วยในเรื่องของการกินทรัพยากรของเว็บได้พอสมควร เพราะแทนที่จะใช้ไฟล์รูปภาพ แต่เมื่อนำเอาเทคนิค การสร้างรูปด้วย CSS3 ไปใช้แล้ว จะเห็นความแตกต่างได้อย่างชัดเจนในเรื่องของการประหยัดพื้นที่และการโหลดข้อมูล อีกทั้งยังสะดวกสำหรับงานที่ไม่จำเป็นต้องใช้ภาพ มาดูตัวอย่างของการสร้างรูปภาพด้วย CSS3 กันเลย

     

    รูปวงกลม

    CSS:

    #circle { 

    width: 140px; /* ความกว้าง */

    height: 140px; /* ความสูง */

    background: red; /* สี */

    -moz-border-radius: 70px; 

    -webkit-border-radius: 70px; 

    border-radius: 70px;

    }

    HTML :

    <div id="circle"></div>

     

    รูปสีเหลี่ยม

    CSS:

    #square {

    width: 140px; 

    height: 140px; 

    background: blue; 

    }

    HTML :

    <div id="square "></div>

     

    รูปวงรี

    CSS:

    #oval {

    width: 200px; 

    height: 100px; 

    background: purple; 

    -moz-border-radius: 100px / 50px; 

    -webkit-border-radius: 100px / 50px; 

    border-radius: 100px / 50px;

    }

    HTML :

    <div id="oval"></div>

     

    รูปสามเหลี่ยม

    CSS:

    #up-triangle {

    width: 0; 

    height: 0; 

    border-bottom: 120px solid green; 

    border-left: 60px solid transparent; 

    border-right: 60px solid transparent; 

    }

    HTML :

    <div id="up-triangle"></div>

     

    รูปสี่เหลี่ยมผืนผ้า

    CSS:

    #rectangle {

    width: 140px; 

    height: 80px;

    background: green;

    }

    HTML :

    <div id="rectangle"></div>

     

    รูปสี่เหลี่ยมด้านขนาน

    CSS:

    #parallelogram {

    width: 130px; 

    height: 75px;

    background: pink;

    /* Skew */

    -webkit-transform: skew(20deg); 

    -moz-transform: skew(20deg); 

    -o-transform: skew(20deg);

    transform: skew(20deg);

    }

    HTML :

    <div id="parallelogram"></div>

     

    รูปดาว 6 แฉก

    CSS:

    #six-point-star {

    position: absolute;

    width: 0; 

    height: 0; 

    border-left: 50px solid transparent; 

    border-right: 50px solid transparent; 

    border-bottom: 80px solid red;

    }

    #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 red;

    margin: 30px 0 0 -50px;

    }

    HTML :

    <div id="six-point-star"></div>

     

    รูปทรง 8 เหลี่ยม

    CSS:

    #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;

    }

    HTML :

    <div id="octagon"></div>

     

    รูปทรงไข่

    CSS:

    #egg {

    display:block;

    width:126px; 

    /* width has to be 70% of height */

    /* could use width:70%; in a square container */

    height:180px;

    background-color:green;

     

    /* 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%;

    }

    HTML :

    <div id="egg"></div>

     

    รูปหัวใจ

    CSS:

    #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%;

    }

    HTML :

    <div id="heart"></div>

     

     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com