Membuat Background Unik Sarang Lebah Di Web/Blog dengan Css
Rabu, 14 Agustus 2019
Ini pure CSS dan penerapannya juga tidak sulit, sobat tinggal kopi paste saja kode sintak nya yang sudah saya berikan pada langkah-langkah dibawah.
Membuat Background Sarang Lebah di Blog
Untuk memulai tutorial ini, kita siapkan terlebih dahulu Css nya. Perhatikan contoh berikut ini:
Live Demo
* {
* box-sizing: border-box;
* padding: 0;
* margin: 0;
* }
* body {
* /* center in the viewport */
* min-height: 100vh;
* display: flex;
* justify-content: center;
* align-items: center;
* /* pattern creating a beehive out of hexagon shapes */
* background: url('data:image/svg+xml;utf8,'),
* #ffe345;
* }
* /* size the svg to cover a sizeable portion of the viewport */
* body > svg {
* width: 80vmin;
* height: auto;
* }
* /* animation to rotate the bees around the center */
* .rotate {
* animation: rotate 5s infinite reverse cubic-bezier(0.25, 0.45, 0.75, 0.55); /* timing function slightly different than linear to give a bit of a nod to each step */
* }
* /* rotate the bees around the center in multiple steps, this to have the timing function affect each step */
* @keyframes rotate {
* 0% {
* transform: rotate(0deg);
* }
* 33% {
* transform: rotate(120deg);
* }
* 67% {
* transform: rotate(240deg);
* }
* 100% {
* transform: rotate(360deg);
* }
* }
Sobat kopi dan salin Css di atas. Jika menggunakan blog, tinggal taruh di atas tag </head>. Apabila sobat memakai hosting tinggal buat file style.css dan tempel di dalamnya lalu simpan. Untuk langkah selanjutnya yaitu, kita buat kerangka nya atau file Html. Coba perhatikan sintak dibawah:
<svg viewBox="0 0 600 600">
<defs>
<symbol id="bee" viewBox="0 0 170 100">
<g transform="translate(5 5)">
<path
d="M 0 45 a 45 45 0 0 1 45 -45 h 80 a 25 25 0 0 1 25 25 q -45 65 -105 65 a 45 45 0 0 1 -45 -45"
fill="#ffcd12"
stroke="#000"
stroke-width="10"
stroke-linecap="round"
stroke-linecap="round">
</path>
<path
d="M 5 45 a 40 40 0 0 0 45 40 q 60 0 105 -65 q -45 45 -105 60 a 50 50 0 0 1 -45 -40"
fill="#c57a00"
opacity="0.5">
</path>
<path
d="M 5 45 a 40 40 0 0 1 40 -40 h 20 q -50 0 -60 40"
fill="#fff">
</path>
<path
d="M 60 2.5 a 82 82 0 0 1 0 82"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linecap="round">
</path>
<path
d="M 90 2.5 a 74 74 0 0 1 0 74"
fill="none"
stroke="#000"
stroke-width="15"
stroke-linecap="round"
stroke-linecap="round">
</path>
<path
d="M 70 0 h 60 a 30 30 0 0 1 0 60 q -30 0 -60 -60"
fill="#fff"
stroke="#000"
stroke-width="10"
stroke-linecap="round"
stroke-linecap="round">
</path>
<path
d="M 155 30 a 20 20 0 0 1 -20 20 q -30 0 -60 -45 q 25 45 60 55 a 20 20 0 0 0 20 -20"
fill="#000"
opacity="0.1">
</path>
<circle
cx="38"
cy="35"
r="12"
fill="#252222">
</circle>
<circle
cx="40"
cy="32"
r="4"
fill="#fff">
</circle>
</g>
</symbol>
</defs>
<g transform="translate(300 300)">
<g transform="rotate(0)" class="rotate">
<g transform="rotate(0)">
<g transform="translate(0 -70)" class="translate">
<use href="#bee" width="170" height="100" transform="translate(-85 -50)"></use>
</g>
</g>
</g>
<g transform="rotate(0)" class="rotate">
<g transform="rotate(120)">
<g transform="translate(0 -70)" class="translate">
<use href="#bee" width="170" height="100" transform="translate(-85 -50)"></use>
</g>
</g>
</g>
<g transform="rotate(0)" class="rotate">
<g transform="rotate(240)">
<g transform="translate(0 -70)" class="translate">
<use href="#bee" width="170" height="100" transform="translate(-85 -50)"></use>
</g>
</g>
</g>
</g>
</svg>
Sama seperti langkah pertama, tinggal kopi dan salin saja. Nah, jika sudah sobat tinggal lihat bagaimana hasilnya. Demikian sedikit pembahasan untuk hari ini semoga bermanfaat.
