Halo sobat blogger semua, untuk tutorial kali ini saya akan mencoba membuat background unik sarang lebah dan ini bisa sobat pasang di web atau blog. Ini pure Css dan penerapannya juga tidak sulit, sobat tinggal kopi paste saja kode sintak nya yang sudah saya berikan pada langkah-langkah dibawah.
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.
