Nah pada postingan kali ini, kami akan menampilkan beberapa bentuk yang dibuat dengan CSS3 yang hanya menggunakan satu elemen HTML saja. Menarik bukan!, hanya dengan satu elemen HTML kita bisa membuat berbagai bentuk dengan css. Untuk melihat hasilnya silahkan
KOPI salah satu KODE dibawah. <!DOCTYPE html><html> <head> <title>CSS Yin-Yang</title> <style> body{ margin:10px auto; padding:10px; } #yin-yang { width: 96px; height: 48px; background: #eee; border-color: black; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; } #yin-yang:before { content: ""; position: absolute; top: 50%; left: 0; background: #eee; border: 18px solid black; border-radius: 100%; width: 12px; height: 12px; } #yin-yang:after { content: ""; position: absolute; top: 50%; left: 50%; background: black; border: 18px solid #eee; border-radius:100%; width: 12px; height: 12px; } </style> </head> <body> <div id="yin-yang"></div> </body></html><!DOCTYPE html><html> <head> <style> body{ margin:10px auto; padding:10px; } #space-invader{ box-shadow: 0 0 0 1em blue, 0 1em 0 1em blue, -2.5em 1.5em 0 .5em blue, 2.5em 1.5em 0 .5em blue, -3em -3em 0 0 blue, 3em -3em 0 0 blue, -2em -2em 0 0 blue, 2em -2em 0 0 blue, -3em -1em 0 0 blue, -2em -1em 0 0 blue, 2em -1em 0 0 blue, 3em -1em 0 0 blue, -4em 0 0 0 blue, -3em 0 0 0 blue, 3em 0 0 0 blue, 4em 0 0 0 blue, -5em 1em 0 0 blue, -4em 1em 0 0 blue, 4em 1em 0 0 blue, 5em 1em 0 0 blue, -5em 2em 0 0 blue, 5em 2em 0 0 blue, -5em 3em 0 0 blue, -3em 3em 0 0 blue, 3em 3em 0 0 blue, 5em 3em 0 0 blue, -2em 4em 0 0 blue, -1em 4em 0 0 blue, 1em 4em 0 0 blue, 2em 4em 0 0 blue; background: blue; width: 1em; height: 1em; overflow: hidden; margin: 50px 0 70px 65px; } </style> </head> <body> <div id="space-invader"></div> </body></html><!DOCTYPE html><html> <head> <title>Facebook icon</title> <style> body{ margin:10px auto; padding:10px; } #facebook-icon { background: red; text-indent: -999em; width: 100px; height: 110px; border-radius: 5px; position: relative; overflow: hidden; border: 15px solid red; border-bottom: 0; } #facebook-icon::before { content: "/20"; position: absolute; background: red; width: 40px; height: 90px; bottom: -30px; right: -37px; border: 20px solid #eee; border-radius: 25px; } #facebook-icon::after { content: "/20"; position: absolute; width: 55px; top: 50px; height: 20px; background: #eee; right: 5px; } </style> </head> <body> <div id="facebook-icon"></div> </body></html><!DOCTYPE html><html> <head> <title>CSS Heart</title> <style> body{ margin:10px auto; padding:10px; } #heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; 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%; } </style> </head> <body> <div id="heart"></div> </body></html><!DOCTYPE html><html> <head> <title>CSS Stars 5</title> <style> body{ margin:10px auto; padding:10px; }#magnifying-glass{ font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em;}#magnifying-glass::before{ content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);} </style> </head> <body> <div id="magnifying-glass"></div> </body></html>
(Sumber : Ibacor)
2 Komentar untuk "Membuat Gambar Menggunakan CSS3"
makasaih infonya ya mas
Sama-sama gan