สร้างไอคอนรูปภาพโดยไม่ต้องใช้ภาพด้วย CSS แท้ๆ


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


โค้ด CSS ที่ใช้ในการกำหนดตำแหน่งต่างและสร้างออกมาเป็นรูปภาพที่เราต้องการนั้นเอง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.droid {
position: relative;
border-radius: 50% 50% 15% 15% /34% 34% 10% 10%;
font-size: 16px;
height: 2em;
width: 1.49em;
background: -webkit-linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), -webkit-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),-webkit-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background: -moz-linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), -moz-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),-moz-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background: -o-linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), -o-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),-o-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background: -ms-linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), -ms-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),-ms-radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background: linear-gradient(top, transparent 30%,#2C2C2C 30%, #2C2C2C 34%,transparent 34%,transparent 37.415%,#2C2C2C 37.415%), radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%),radial-gradient(center, ellipse cover, rgba(44, 44, 44, 0) 12%,#2C2C2C 14%);
background-repeat: no-repeat;
background-position: 0,2% 0,98% 0;
background-size: 100% 100%, 55% 31.927%, 55% 31.927%;
}


โค้ด HTML สำหรับการ link css เข้ามาใช้งานครับ

1
<link href="style.css" rel="stylesheet" type="text/css" />


เอาไปใส่แบบนี้

1
2
3
4
5
<link href="style.css" rel="stylesheet" type="text/css" />

<body>
<div class="droid"></div> <!--เวลาเรียกใช้งานก็เพียบเรียก <div class="droid">แบบนี้--->
</body>


ดาวน์โหลดโค้ด…..!!!



ขอบคุณข้อมูลจาก http://tympanus.net/

Comments

comments

Powered by Facebook Comments