Kumpulan Soal lengkap pramuka: Maret 2015

Rabu, 11 Maret 2015

Koleksi 7 Background Bermotif dengan Pure CSS Repeating Gradient

Iseng-iseng kali ini Saya membagikan 7 background bermotif yang barang kali bisa Sobat gunakan sebagai referensi atau latar belakang (Background) dari elemen atau halaman website Sobat. Background bermotif dibawah ini menggunakan pure / murni CSS, dan bisa Sobat kreasikan.

Berikut ini tampilan dari background-background murni CSS tersebut :

background:repeating-radial-gradient(
#6cf,#6cf 3px,
transparent 3px,transparent 6px,
#6cf 6px,#6cf 10px,
white 10px,white 14px,
#6cf 14px,#6cf 17px,
transparent 17px,transparent 25px
),
repeating-radial-gradient(
#6cf,#6cf 3px,
transparent 3px,transparent 6px,
#fff 6px,#fff 17px,
transparent 17px,transparent 25px
);
background-blend-mode: multiply;
background-size: 50px 50px,100px 100px;

background:repeating-radial-gradient(
#d65,#d65 3px,
transparent 3px,transparent 6px,
#b65 6px,#b65 10px,
white 10px,white 14px,
#f65 14px,#f65 17px,
transparent 17px,transparent 45px
), repeating-linear-gradient(
45deg,#b65,#b65 3px,
transparent 3px,transparent 50px
);
background-blend-mode: multiply;
background-size: 70px 70px;
background-position: 0,10px 43px;

background:repeating-radial-gradient(circle at left top,
transparent, transparent 40.5px,#292 40.5px,#292 43.5px,
transparent 43.5px,transparent 46.5px,
#999 46.5px,#999 49.5px,
transparent 49.5px,transparent 83px
),repeating-radial-gradient(circle at right bottom,
transparent, transparent 31px,#999 31px,#999 34px,
transparent 34px,transparent 37px,
#292 37px,#292 40px,
transparent 40px,transparent 83px
),repeating-radial-gradient(circle at left bottom,
transparent, transparent 40.5px,#55b 40.5px,#55b 43.5px,
transparent 43.5px,transparent 46.5px,
#fcb 46.5px,#fcb 49.5px,
transparent 49.5px,transparent 83px
),repeating-radial-gradient(circle at right top,
transparent, transparent 31px,#fcb 31px,#fcb 34px,
transparent 34px,transparent 37px,
#55b 37px,#55b 40px,
transparent 40px,transparent 83px
);
background-blend-mode: multiply;
background-size: 80px 80px;

background:
repeating-radial-gradient(#999,#fff,#bbb 7px, #bbb 10px,transparent 10px, transparent 30px),
repeating-linear-gradient(-45deg,#555, #555 5px, transparent 5px, transparent 50px),
repeating-linear-gradient(45deg, #944, #944 5px, transparent 5px, transparent 50px),
repeating-linear-gradient(-135deg,#222, #222 5px, transparent 5px, transparent 50px),
repeating-linear-gradient(135deg, #9df, #9df 5px, transparent 5px, transparent 50px);
background-blend-mode: multiply;
background-size: 50px 50px;

background:
repeating-radial-gradient(#999,#fff 5px,#bbb 7px, #bbb 10px,transparent 10px, transparent 66px),
repeating-radial-gradient(circle at left top, #ddd, #ddd 6px, transparent),
repeating-radial-gradient(circle at right top, #6cf, #6cf 6px, transparent 6px, transparent 67px),
repeating-radial-gradient(circle at right bottom, #6cf, #6cf 6px, transparent 6px, transparent 67px),
repeating-radial-gradient(circle at left top, #8cb, #8cb 6px, transparent 6px, transparent 67px),
repeating-radial-gradient(circle at left bottom, #8cb, #8cb 6px, transparent 6px, transparent 67px)
;
background-blend-mode: multiply;
background-size: 100px 100px;

background:
repeating-radial-gradient(circle at right top, #922, #922 6px, transparent 6px, rgba(0,0,105,0.1) 67px),
repeating-radial-gradient(circle at right bottom, #fd8, #fd8 6px, transparent 6px, rgba(0,0,105,0.1) 67px),
repeating-radial-gradient(circle at left top, #da8, #da8 6px, transparent 6px, rgba(0,0,105,0.1) 67px),
repeating-radial-gradient(circle at left bottom, #fbb, #fbb 6px, transparent 6px, rgba(0,0,105,0.1) 67px)
;
background-blend-mode: multipy;
background-size: 60px 130px;

background:repeating-linear-gradient(90deg,white, white 35px,transparent 50px, transparent 100px),
repeating-linear-gradient(70deg,transparent, transparent 30px,#fff 10px, #052 40px),
repeating-linear-gradient(90deg,transparent, transparent 50px,#555 50px, #222 100px)
;

Untuk mengganti warna dari contoh-contoh background diatas gunakan Color Generator. Untuk mempelajari atau memahami cara membuat nya selengkapnya pada artikel Tutorial Membuat Background bermotif. Silahkan Sobat berkreatifitas.

Demikianlah artikel ini Saya buat, semoga dapat bermanfaat. Terima Kasih.

Widget Label / Kategori Hitam Keren Dengan Jumlah Postingan Per Label dan Hover Effect

Dikesempatan kali ini Saya membagikan CSS dari widget label blogger, yang barangkali diantara Sobat sekalian ingin mengganti atau memberi gaya dari widget Kategori (Label) blognya. Kira-kira tampilan dari widget tersebut seperti dibawah ini

Caranya cukup mudah, simak tuturial berikut.

Login ke akun Blogger, pilih blog, kemudian pilih Tata Letak pada menu sebelah kiri Blogger.
Tambahkan gadget di tempat yang Sobat inginkan, bisa difooter atau disidebar, pilih Label.
Selelah itu atur widget, pilih Tampilkan Daftar, dan centang Tampilkan jumlah entri per label. Lalu simpan.
Kemudian pilih menu Template pada menu sebelah kiri Blogger, kemudian klik Edit HTML.
Lalu copy kode CSS tersebut diatas </head> , gunakan CTRL+F untuk mempercepat pencarian.


<style>
.Label{background: #234;}
.Label a{margin: 5px;color : #fff;font-size: 18px;padding: 5px;transition: all 0.3s ease;}
.Label a:hover{color:#397!important;}
.Label li:hover{transition: all 0.5s ease;background: #fff; }
.Label li:hover a,.sidebar-wrapper .Label li:hover .countpostlabel{color : #000;}
.Label li:hover .countpostlabel:after{font-size: 100%;} 
.Label .countpostlabel{color: #fff;background: transparent;border:5px double;float: right;padding: 0 5px;margin-top: -3px;transition: all 0.3s ease;}
.Label .countpostlabel:after{content:'POST';margin-left: 3px;font-size: 0%;transition: all 0.5s ease;}
</style>

Untuk lebih memvariasi kan warna pada widget sesuai keinginan Sobat, gantilah value kode CSS color dan background, contoh : color: #fff diganti menjadi color: #000. Gunakan tool Color Generator untuk mengetahui kode warna.

Sekian pada tutorial kali ini, semoga ini dapat bermanfaat. Terima Kasih.

Rabu, 04 Maret 2015

Perbedaan Margin Dengan Padding Pada CSS

Apa itu Margin?

Margin adalah suatu jarak atau space antara suatu elemen dengan elemen yang ada diluar atau lainnya, jarak yang dibuat dimulai setelah border.

Lalu apa itu Padding?

Padding adalah suatu jarak atau space antara inti elemen / konten terhadap border elemen.

Untuk lebih jelas memahami perbedaan keduanya. Silahkan buka browser Google Chrome, kemudian klik kanan > Inspect Element / Periksa Elemen di random tempat pada blog atau website, lihat bagian CSS di sebelah kanan, jika tidak terlihat coba scroll kebawah. Maka akan muncul hal seperti contoh dibawah ini.

Perbedaan Margin Dengan Padding Pada CSS

Pada gambar diatas, warna biru menunjukkan ukuran konten dari elemen (Text, gambar, dll).
Warna hijau menunjukkan ukuran padding.
Warna kuning ukuran border.
Dan warna cream atau orange untuk ukuran margin

Nah, Saya kira cukup sekian pada artikel kali ini, Terima Kasih.

Beberapa Tag / Kode HTML Yang Paling Sering Digunakan Berikut Penjelasan atau Fungsinya

Halo Sobat!, pada kesempatan ini kembali Saya akan membahas dasar HTML lagi, dengan artikel yang berisi beberapa script / tag HTML yang paling sering digunakan berikut penjelasan dan fungsinya. Sebenarnya penjelasan mengenai kode HTML dasar ini sudah banyak tersedia di google, namun demi melengkapi artikel tutorial blog ini dan juga barangkali dapat memudahkan Sobat yang berminat belajar webdesign.

Setelah membahas Cara mudah memahami perintah HTML dan CSS pada artikel sebelumnya, kali ini kita akan berfokus kepada kode / perintah HTML saja. Baiklah berikut ini beberapa kode HTML tersebut :

<html> = Tempatnya seluruh elemen HTML atau mendefinisikan dokumen HTML.
<head> = Tempat diletakkannya sumber daya website seperti CSS, Javacript, Title.
<title> = Elemen text dari judul halaman HTML, yang akan ditampilkan pada tab browser.
<style> = Tempat diletakkannya gaya atau style (CSS) untuk memperindah tampilan halaman HTML / website.
<script> = Tempat diletakkanya Javascript.
<body> = Tempat seluruh elemen HTML yang akan ditampilkan pada browser.
 = Sebagai elemen pembungkus keterangan yang ada pada dokumen HTML, elemen ini tidak berpengaruh pada tampilan website. Contoh : "".
<p> = Elemen yang mendefenisikan suatu paragraf/ alinea.
<div> = Suatu elemen pembungkus elemen HTML yang lain, yang tidak memiliki arti khusus, namun sering digunakan sebagai elemen yang berdiri sendiri, karena elemen tersebut akan membuat garis baru dari elemen sebelumnya, dan sesudahnya yang didapatkan dari style bawaan <div> yakni "display:block". Sama halnya dengan <p> , namun pada <p> terdapat margin, sedangkan pada <div> tidak.
<span> = Suatu elemen pembungkus elemen HTML yang lain, sama fungsinya dengan <div> namun tidak memberikan pengaruh apapun pada elemen yang ada didalamnya, karena tidak memiliki style bawaan.
<img> = Elemen pemanggil atau penampil gambar. Contoh : "<img src="Alamatgambar" />" . Elemen <img> tidak memerlukan tag penutup, melainkan langsung ditutup pada akhir tag pembukanya saja />. src=" " disini mendefinisikan source atau sumber gambar (Alamat Gambar).
<input> = Mendefinisikan elemen input
<i> atau <em> = Membuat text / huruf miring (Italic)
<b> = Membuat text / huruf tebal (Bold)
<u> = Membuat text / huruf bergaris bawah (Underline)
<h1> s/d <h6> = Header text atau text kepala untuk judul ataupun sub judul.
<br /> = Sebagai baris baru/ enter.
<ul> = Untuk membuat list tidak berurutan atau list dengan bullet hitam (Unordered List). Penggunaan <ul> diperuntukkan sebagai parent (Induk elemen) dari elemen <li>. Contoh : "<ul><li>List ke-1</li></ul>"
<ol> = Untuk membuat list berurutan dengan angka (Ordered List). Sama fungsinya dengan <ul>
<li> = Elemen list atau daftar.
<a> = Elemen untuk diletakkannya suatu link/ alamat website diluar dari halaman HTML itu sendiri. Contoh : "<a href="https://www.google.co.id/" > Google </a>". Contoh tersebut akan menampilkan text "Google" saja namun terdapat link/ alamat yang dapat di klik pada text tersebut, yakni yang ada pada property <a href="Tempatlink">.
<table> = Elemen tabel.
<th> = Table header, baris kepala tabel.
<tr> = Table row atau baris tabel.
<td> = Table data atau kolom tabel.
<marquee> = Membuat text / huruf berjalan.

Saya pikir beberapa Tag HTML diatas adalah yang sering digunakan pada umumnya. Semoga artikel ini dapat bermanfaat. Lebih dan kurang Saya mohon maaf, Terima Kasih.

Selasa, 03 Maret 2015

Memahami Satuan Ukuran Pada CSS (Px, Em, % (Persen))

Pada artikel ini, Kita membahas satuan ukuran pada CSS, yang diantaranya adalah Px, Em, & % (Persen). Satuan - satuan tersebut berguna untuk mengatur besar font, lebar, tinggi, margin, dan padding dari suatu elemen yang ada pada halaman website.

PX (Pixel)

Piksel adalah unsur gambar atau representasi sebuah titik terkecil dalam sebuah gambar grafis yang dihitung per inci (Wikipedia). Pada web design / CSS merupakan satuan ukuran utama dan paling umum digunakan. 1Px = 0.01 Inch.

Contoh :
"body{font-size: 16px; width: 1000px;}"

EM

Apa itu EM pada CSS? Em juga merupakan satuan ukuran, yang tujuan penggunaannya untuk mempermudah responsive font ataupun elemen, atau bisa juga menyingkat ukuran satuan px. Nilai 1em = font-size dalam ukuran Px elemen yang membungkusnya, misalnya pada elemen Konten font-size: 20px, maka 1em pada elemen tersebut adalah 20px, begitu pula kelipatan em selanjutnya. Contoh :

HTML

CSS

TAMPILAN

Pada contoh diatas, perhatikan CSS nya, elemen dengan Class em1 menggunakan font-size: 20px, width:10em, dan height: 5em, yang artinya width dari elemen tersebut sebesar 200px, didapat dari (1em = 20px , 10em = 200px).
Perhatikan pula pada elemen Class px1 tetapi ukuran lebar dan tingginya menggunakan satuan px, bukankah kedua elemen tersebut (em1 dan px1) memiliki ukuran lebar dan tinggi yang sama?.

Percentage / Persen / %

Persen (%) juga merupakan salah satu satuan ukuran pada CSS, yang sangat berguna untuk meresposive kan suatu elemen atau halaman website. Nilai dari 100% = maksimal ukuran suatu elemen atau besar font pada elemen induk atau elemen pembungkus. Contoh :

Width / lebar suatu elemen outer-wrapper 1000px, maka lebar 100% dari elemen-elemen yang ada didalam outer-wrapper tersebut adalah 1000px, 80% = 800px, begitu pula selanjutnya.
Pada font juga hampir sama, jika misalnya font size body diatur sebesar 16px, dan kita menerapkan font size pada content-wrapper 80% maka font tersebut sama halnya berukuran 12.8px.

Nah, demikianlah artikel ini Saya buat. Mohon maaf jika ada kesalahan penulisan atau penjelasan. Semoga dapat bermanfaat, Terima Kasih.

Senin, 02 Maret 2015

Cara Mudah Merombak / Mengedit / Memodifikasi Template Blog / Website

Mengedit atau memodifikasi tampilan blog itu menyenangkan dan sebenarnya tidak sulit jika kita mengetahui sedikit banyak tentang script CSS (Cascading Style Sheets), HTML, dan Javascript. Hal tersebut ingin kita lakukan biasanya karena ingin membuat tampilan blog agar lebih keren, memberi warna dan suasana baru, atau mungkin kita bosan dengan tampilan blog yang itu-itu saja.

Membaca script / kode tentu adalah hal yang menyebalkan terkhusus untuk blogger pemula termasuk Saya dulunya. Namun bila kita mengerti sedikit banyak tentang kode itu, hal yang tadinya menyebalkan bisa menjadi menyenangkan loh. Langsung saja simak cara / tutorialnya berikut ini.

Pertama-tama login ke akun blogger.com > Buka blog yang akan diedit > Pada menu bar blogger sebelah kiri, klik Template > Pada menu Template klik Edit HTML
Jika sudah membuka Edit HTML biarkan dahulu, sekarang buka blog Sobat, kita akan melakukan pengeditan tampilan blog dari Inspect Elemen terlebih dahulu.
Inspect Elemen/ Periksa Elemen yang akan kita edit gaya, warna, ukuran dan lain sebagainya. Klik kanan pada bagian yang akan di edit, pilih Periksa Elemen / Inspect Element.

Cara Mudah Merombak / Mengedit / Memodifikasi Template Blog / Website

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

Untuk pengeditan Saya sarankan menggunakan browser Mozilla Firefox, download disini, karena untuk memodifikasi CSS lebih mudah dan leluasa, atau Chrome juga tidak masalah.
Kode HTML yang sebelah kiri, dan kode CSS yang disebelah kanan Inspect Element.
Mengedit kode HTML dengan klik kanan kode HTML yang diinginkan, kemudian Edit As HTML, atau tekan F2 saja pada kode tersebut. Maka tampilannya seperti pada Gambar 1 (Lihat di bawah postingan).
Mengedit kode CSS yaitu klik Property / Value CSS yang ada disebelah kanan Inspect Elemen, kemudian ganti atau modifikasi sesuai keinginan. Pada contoh dibawah ini, Saya mengganti value / nilai dari warna background elemen .menu. Contoh pada Gambar 2 (Lihat di bawah postingan).
Pengguna Firefox, pada bagian inspect element, pilih Style Editor/ Editor Gaya, untuk fokus ke pengeditan CSS. Editing HTML nya pada Inspector / Inspektur tab Inspect Element. Contoh pada Gambar 3 (Lihat di bawah postingan).
Pilih style utama blog Sobat yang hendak diedit, atau periksa satu persatu kumpulan CSS yang ada disebelah kiri gambar berikut. Silahkan Sobat, mengotak atik CSS yang ada pada kolom tengah. Contoh pada Gambar 4 (Lihat di bawah postingan).
Jangan sungkan untuk menghapus atau menambahkan kode pada CSS maupun HTML, karena pengeditan ini sifatnya sementara saja, dan hanya terjadi pada komputer Sobat.
Tetap lanjutkan saja pengeditan, jika sudah menemukan atau menyelesaikan desain yang diinginkan, save atau salin kode HTML dan CSS yang baru tersebut, ke Edit HTML yang ada pada Blog sobat, search saja di blog dengan CTRL+F agar memudahkan menemukan kode yang akan diganti.
Dan lagi lagi, jangan berhenti berusaha mencoba terus menerus, jika belum berhasil coba dan coba lagi, karena semakin sering kita menemukan masalah dan memecahkannya, semakin banyak pula pengalaman kita dalam mendesain web.
Gunakan juga tool color generator dan editor HTML CSS blog ini, yang mungkin memudahkan Sobat dalam pengeditan.

Semoga tutorial atau penjelasan yang Saya tuliskan pada artikel ini dapat membantu Sobat blogger sekalian untuk memodifikasi tampilan blog atau websitenya. Lebih dan kurangnya Saya mohon maaf, Terima Kasih.

Belajar Dasar Web Design (Cara mudah memahami perintah HTML dan CSS)

Halo Sobat!, salam designer pemula :D.

Pada kesempatan ini, Saya ingin membagikan pengalaman Saya dalam mempelajari HTML dan CSS, barangkali dapat membantu sobat lebih mudah memahami ke-2 kode pokok untuk membangun atau mendesain web ini. Baiklah simak secara perlahan kelanjutan dari artikel ini.

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

HTML

Apa itu HTML?

Yaitu salah satu dari bahasa pemrograman yang berbasis Web yang digunakan untuk membuat sebuah halaman web, didalam HTML inilah kita membuat kepala / header website, badan / body, footer, dan lain sebagainya, intinya struktur utama dari website ada pada HTML, bila dianalogikan dalam tubuh manusia seperti tulang yang membentuk kerangka tubuh manusia.

Ciri-ciri script / perintah HTML

Selalu diawali oleh tag <awal elemen> dan diakhiri oleh </akhir elemen>.
Perbedaan awal dan akhir hanya pada bentuk tag nya perhatikan untuk awal (Pembuka tag) "< >" dan untuk akhir (Penutup tag) "</ >".
Bila menemukan kode yang seperti ini berarti adalah kode HTML. Contoh : <html> dan </html> , <div> dan </div>

Contoh perintah atau tag HTML

<html> : Sebagai tempat / tubuh utama dari sebuah halaman website
<head> :

Sebagai kontainer/ tempat diletakkannya gaya atau style (CSS) untuk memperindah tampilan halaman HTML / website <style>.
Sebagai tempat meletakkan javascript <script>.
Meletakkan judul halaman website <title>.
Meletakkan meta yaitu tag untuk membungkus keperluan SEO seperti deskripsi/ keterangan website, keyword/ kata kunci, dan lain sebagainya <meta>.
Meletakkan css external/ css dari luar halaman HTML <link>. Contohnya : <link rel="stylesheet" href="style.css"/>.

<body> : Sebagai kontainer/ tempat dari elemen-elemen yang akan ditampilkan pada halaman HTML. Seperti <div>, <span>, <nav>, <ul>, <img> dan lain sebagainya.

Struktur dasar halaman HTML

Berikut ini kode untuk struktur dasar halaman HTML pada umumnya.

<html>

<head>

</head>

<body>

</body>

</html>

CSS

Lalu apa itu CSS?

Yaitu bahasa pemrograman yang digunakan untuk mengatur tampilan suatu halaman HTML. Dalam konteks sebuah website, CSS dapat diartikan sebagai bahasa yang digunakan untuk mengatur, mentata rapi, dan mempercantik tampilan / desain suatu halaman HTML.

Ciri-ciri script / perintah CSS

Bila digabungkan bersama dengan file HTML, diletakkan pada tag <head>, dan diletakkan didalam tag <style>.

Contoh:

<head>

<style>

</style>

<head>

Bila tidak tergabung pada file HTML, atau file berdiri sendiri, biasanya menggunakan perintah / kode <link rel="stylesheet" href="alamat_file_css">, untuk me-load atau memanggilnya ke halaman HTML.
Penulisannya seperti ini, elemen_atau_selector{property: value;} , artinya elemen atau selector (ID / Class) yang akan kita berikan gaya/ css kita buat terlebih dahulu kemudian properti css diletakkan pada kurung kurawal "{ }", dan sebagai pemisah antar CSS menggunakan semi kolon (Titik Koma)";". Contoh: #menu{background: blue; width: 100%;}
Kode CSS juga dapat terletak dibagian elemen terkait / yang membutuhkan itu sendiri, contohnya : <div id="header-wrapper" style="height: 200px; background: red;>. Disini elemen header-wrapper menggunakan tinggi 200 pixel dan background berwarna merah, dan yang mendapatkan pengaruh dari CSS tersebut hanya elemen "header-wrapper".

Contoh kode CSS

Background

CSS yang mengatur warna dari suatu elemen, contoh :#footer{background:brown;}
Dapat juga digunakan untuk menjadikan gambar sebagai background suatu elemen.
Agar lebih detail bisa menggunakan background-color untuk warna, dan background-image untuk gambar. Selengkapnya tentang Background pada artikel ini

Color

CSS yang mengatur warna huruf atau kata-kata yang ada pada halaman website atau suatu elemen, contoh: #article{color: #000;}

Width

CSS yang mengatur lebar suatu elemen, contoh: body{width: 1200px;};

Height

CSS yang mengatur tinggi suatu elemen, contoh: header{height: 200px;}

Border

CSS yang mengatur bingkai suatu elemen, contoh: .sidebar{border: 2px solid #000}

Dan lain sebagainya

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

Saya rasa sekian saja artikel Belajar Dasar Web Design Memahami Perintah HTML & CSS ini Saya buat. Mohon maaf bila ada kesalahan penulisan, kata-kata atau penjelasan. Semoga bermanfaat, Terima Kasih, dan salam Newbie.

Minggu, 01 Maret 2015

Perbedaan dan Cara Menggunakan Selector ID dan Class Pada HTML dan CSS

Bagi sobat yang belum mengerti perbedaan antara Selector ID dan Class maka tidak ada salahnya untuk membaca artikel ini, karena hal tersebut merupakan salah satu pengetahuan basic atau dasar dalam membangun sebuah website.

ID dan Class yang sering kita temui dalam setiap elemen website sebenarnya dapat diartikan sebagai variabel, yaitu sebuah nama yang mempunyai isi atau nilai, atau bisa juga diartikan sebagai nama dari elemen, ya walaupun ada sendiri property "Name" yang khusus mengatur nama dari elemen tersebut.

Mau tau cara mudah research keyword? pakai Tool Pencari Keyword Blog Ini

ID

Selector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada halaman website, sama halnya seperti National ID, atau nomor KTP yang hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan selector ID.

Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja
Tidak boleh ada ID lebih dari satu
Tidak boleh diawali oleh angka
Tidak boleh mengandung special characters (~ ! @ # $ %)

Penulisan pada HTML contohnya seperti :

<div id="header">

Pada contoh diatas menggunakan id "header".

Penulisan style atau CSS contohnya seperti :

#header{propertycss: valuecss;}

Yaitu diawali dengan karakter "#" pagar kemudian diikuti ID nya.

CLASS

Selector Class adalah selector yang digunakan untuk grup elemen, atau penamaan yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan selector Class.

Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja
Class bisa digunakan dilebih dari satu elemen
Bisa menggunakan lebih dari satu nama Class pada satu elemen
Tidak boleh diawali oleh angka
Tidak boleh mengandung special characters

Penulisan pada HTML contohnya seperti :

<div class="sidebar sidebar1">Sidebar ke-1</div>

<div class="sidebar sidebar2">Sidebar ke-2</div>

Yaitu dapat menggunakan lebih dari satu nama Class sekaligus dalam satu elemen, pada contoh class="sidebar sidebar1".

Penulisan pada CSS contohnya seperti :

.sidebar{float: left; background: white;}

.sidebar1{width: 100px}

.sidebar2{width: 200px}

Pada contoh kode CSS diatas, elemen dengan selector Class "sidebar" menggunakan float left; dan background: white;. Kode CSS tersebut diterapkan pada selector "sidebar1" dan "sidebar2" karena kedua nya termasuk dalam grup class "sidebar". Sedangkan properti CSS width:100px; hanya dikhususkan untuk Class "sidebar1" saja, begitu juga dengan properti CSS width: 200px; hanya dikhususkan untuk Class "sidebar2".

Penulisan Class pada CSS diawali oleh "." titik diikuti oleh selector Class nya.

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

Demikianlah artikel ini Saya buat, bila ada kesalahan penulisan atau penjelasan yang ada Saya mohon maaf. Semoga sedikit penjelasan ini dapat berguna, Terima Kasih.

Tutorial Membuat Background Bermotif Dengan Repeating Linear dan Radial Gradient

Halo Sobat, Dikesempatan kali ini Saya mencoba menuliskan tutorial membuat background bermotif pure atau murni CSS, dengan menggunakan CSS Repeating Linear & Radial Gradient.

Setelah pada postingan sebelumnya membahas tentang "Memahami Properti CSS Background" disini Saya masih membahas seputar background tetapi di pembahasan yang lebih mendalam tentunya.

Sebelum nya sediakan terlebih dahulu tool yang biasa Anda gunakan untuk mengedit web atau gunakan tool HTML & CSS Editor blog ini.

Menggunakan background repeating gradient berfungsi untuk menampilkan warna background secara berulang-ulang mengikuti ukuran warna yang ada sampai ukuran maksimal dari background atau elemen nya.

Repeating Linear Gradient

Yaitu pengulangan warna gradient secara garis lurus.

Membuat motif zebra cross

Copy / salin kode HTML ini :

<div class="bg"></div><!--Menggunakan elemen untuk contoh background dengan class selector "bg"-->

Kemudian kode CSS ini :

.bg{
width: 300px;/* Lebar dari elemen bg */
height: 250px;/* Tinggi dari elemen bg */
background: repeating-linear-gradient(
black, 
black 25px, 
transparent 25px, 
transparent 50px
)}

Pada Kode CSS black yang pertama adalah untuk mendeklarasikan warna yang pertama dibuat.
Kemudian diikuti oleh kode black 25px, yaitu ukuran dari warna pertama tersebut 25px.
Kode transparent 25px, yaitu sebagai warna penghubung setelah warna black ke warna selanjutnya (Warna penghubung menggunakan warna yang sama seperti warna selanjutnya).
Jika tidak menggunakan warna penghubung, maka perpindahan warna tidak rapi atau blur(Memudar).
Gunakan nilai yang sama besar atau lebih kecil dari warna sebelumnya, jika lebih besar akan menampilkan efek blur setelah warna sebelumnya (Silahkan dicoba).
Kode transparent 50px, adalah warna setelah warna black dengan ukuran warna yang ditampilkan 25px, tetapi dituliskan 50px karena warna sebelumnya yaitu black, menggunakan ukuran 25px (Jadi 25 + 25 = 50).
Linear-gradient atau repeating-linear-gradient menampilkan warna dari atas kebawah, pada contoh dari hitam ke transparan, karena secara defaultnya menggunakan (To Bottom).

Membuat motif kotak-kotak diagonal

Ganti kode CSS sebelumnya dengan kode ini

.bg{
width: 300px; height: 250px;
background:repeating-linear-gradient(
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 31px,
transparent 31px,
transparent 34px,
#6cf 34px,
#6cf 37px,
transparent 37px,
transparent 62px
)}

Maka tampilannya kurang lebih seperti ini.

Membuat motif kotak-kotak diagonal Step 1

Selanjutnya kita tambahkan satu repeating linear gradient lagi untuk membuat background menjadi kotak-kotak. Salin dan gantikan kode CSS sebelumnya dengan kode ini.

.bg{
width: 300px; height: 250px;
background:repeating-linear-gradient(
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 31px,
transparent 31px,
transparent 34px,
#6cf 34px,
#6cf 37px,
transparent 37px,
transparent 62px
),repeating-linear-gradient(
to left,
#abf, 
#abf 25px,
transparent 25px, transparent 50px
);
}

Untuk menambahkan repeating-linear-gradient lagi pada background gunakan "," koma setelah ")" tutup kurung gradient sebelumnya.
Pada gradient ke-2 kode diatas ada kode to left, yang berarti warna dideklarasikan dari kanan ke kiri. Klik link Gambar ini untuk melihat tampilannya.
Pada output diatas, kita melihat background gradient ke-2 dimulai dari sebelah kanan ke kiri, karena menggunakan kode to left tadi.
Kita lihat juga pada output, warna biru menimpa warna ungu, untuk menggabungkan kedua warna tersebut, tambahkan kode CSS background-blend-mode: multiply; sebelum kode penutup CSS "}" tutup kurung kurawal. Maka tampilan background berubah menjadi seperti ini. Klik link Gambar ini untuk melihat tampilannya.
Nah untuk menjadikan background sesuai judul contoh, membuat kotak-kotak diagonal, maka ganti saja semua kode CSS sebelumnya dengan ini agar lebih mudah.

.bg{
width: 300px; height: 250px;
background:repeating-linear-gradient(45deg,
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 31px,
transparent 31px,
transparent 34px,
#6cf 34px,
#6cf 37px,
transparent 37px,
transparent 62px
),repeating-linear-gradient(
-45deg,
#abf, 
#abf 25px,
transparent 25px, transparent 50px
);
background-blend-mode: multiply;
}

Kode yang ditambahkan pada CSS diatas adalah 45deg pada gradient pertama, yang artinya, gradient diputar 45 derajat, -45deg pada gradient kedua, yaitu diputar minus 45 derajat. Maka tampilannya seperti Gambar ini.

Repeating Radial Gradient

Yaitu pengulangan gradient berbentuk lingkaran. Langsung saja berikut ini sample / contoh dari repeating radial gradient, atau background bermotif lingkaran-lingkaran.

Kode HTML masih menggunakan yang lama saja.
Ganti Kode CSS yang lama dengan yang ini.

.bg{
width: 250px; height: 250px;
background:repeating-radial-gradient(
#6cf,
#6cf 3px,
transparent 3px,
transparent 6px,
#6cf 6px,
#6cf 10px,
white 10px,
white 14px,
#6cf 14px,
#6cf 17px,
transparent 17px,
transparent 25px
);

background-size: 50px 50px;
}

Pada CSS diatas, background-size; 50px 50px berarti setiap lingkaran berukuran lebar dan tinggi 50px. Dan lingkaran akan diulang-ulang juga hingga memenuhi lebar maksimal elemen. Tampilan dari repeating radial gradient contoh ini adalah seperti Gambar berikut.

Gunakan kreatifitas Sobat sekalian untuk membuat background lebih bervariasi atau lebih menarik, bahkan bisa membuat motif batik barangkali. Silahkan di otak atik kode tersebut agar lebih memahami CSS nya.

Nah, Saya kira cukup sekian pada tutorial kali ini, semoga ini dapat bermanfaat bagi Sobat sekalian yang mungkin belum tahu sebelumnya cara membuat background bermotif dengan CSS murni. Mohon maaf bila ada kesalahan pengertian atau kata-kata pada artikel ini. Terima Kasih.