30+ Bentuk / Gambar Dengan CSS3

 Author : hadinug, 04 May, 2014, Komentar

space invader


Membuat gambar dengan css bukan hal yang tidak mungkin lagi, dengan dukungan CSS3 , psuedo-class dan psuedo-elemen dari css, sangat memungkinkan kita untuk membuat berbagai bentuk dengan CSS3. Sedikit referensi css yang mungkin bisa membatu anda.



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. Mari kita mulai.


Yin-Yang


<!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>


Space Invader


<!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>

Dan dibawah ini bentuk lain yang bisa dibuat dengan css dan single HTML elemen. Ubah dan jalankan source nya di live editor kami!.

 

 
Bagikan halaman ke sosial media
 
Tags :   css       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda