Tips belajar agar cepat masuk ke otak

Tips Belajar - Sebagai seorang siswa atau mahasiswa maupun pembelajar lainnya tentunya terkadang mengalami kesulitan belajar. Tidak semua orang memiliki kesamaan dalam kemampuan menyerap materi ajar apalagi saat belajar secara mandiri. Kali ini akan diberikan beberapa tips belajar agar materi ajar cepat masuk ke otak

Tag : Inforik

CSS border - Membuat garis pembatas

Border adalah properti dari CSS untuk menciptakan garis tepi /garis pembatas pada suatu elemen blog.

Border termasuk properti CSS shorthan seperti margin dan padding.Shorthan adalah perintah yang ditulis lebih pendek/singkat.
Perintah panjang penulisan CSS border adalah seperti contoh;

.div{
border-right:1 px solid red;
border-left:1 px solid red;
border-bottom:1 px solid red;
border-top:1 px solid red;
}

Perintah CSS border Shorthan dipakai,jika border pada seluruh sisi elemen dibikin sama.Agar tidak terlalu panjang menuliskannya,Like this;

.div{
border:2 px solid red;
}



Contoh jika border hanya disebelah kanan saja;

.div{border-right: 1px solid blue}


Atau kiri saja;

.div{border-left: 1px solid blue}


Atau hanya kanan dan kiri saja;

.div{border-right: 1px solid blue;
border-left: 1px solid blue
}



Macam macam type border / value

1.Border style types

• solid
• double
• groove
• dotted
• dashed
• inset
• outset
• ridge

Ketebalan border

Umumnya dipakai dalam px (pixel)

Warna border

Berdasarkan tabel warna dalam HEX,RGB atau HURUF

Contoh penulisan perintah CSS untuk border secara keseluruhan;

CSS border Shorthan

#div{border: 1px solid red; }


CSS border Panjang

#div{border-top: 1px solid red;
border-bottom: 1px solid red;
}


Atau

#div{border: 1px dashed red; }

Dst...dst

Untuk lebih jelasnya,berikut contoh penulisan perintah CSS macam macam style dari   border;

.ex1{border:3px double red; padding: 10px }
.ex2{border:3px groove blue; padding: 10px }
.ex3{border:3px dotted yellow; padding: 10px }
.ex4{border:3px inset darkred; padding: 10px }
.ex5{border:3px dashed orange; padding: 10px}
.ex6{border:3px outset purple; padding: 10px }
.ex7{border:3px ridge black; padding: 10px }
.ex8{border:3px solid aqua; padding: 10px }


Catatan: Jika menggunakan Value double,outset,inset ,groove dan ridge minimal nilainya adalah 3px supaya kelihatan efeknya.

Dan ini Demo penampakannya;

Ini adalah style double border

Ini adalah style groove border

Ini adalah style dotted border

This is a inset border

Ini adalah style dashed border

Ini adalah style outset border

Ini adalah style ridge border

Ini adalah style solid border

Segini saja tutorial dasar penggunaan CSS border,silahkan berimporvisasi sendiri.

Tag : Bloging

Properti CSS (background)

Properti CSS adalah syntax yang diperlukan untuk memanipulasi selector yang kita inginkan.

Nah berikut  properti CSS yang umum dipakai (dasar) dalam penggunaan properti "background"

background

background-color
background-image
background-repeat
background-position
background-attachment

Contoh penerapan

body{
background-color: white;
background-image: url(http://gambarku.com/image.jpg);
background-position: center;
background-repeat: repeat-x;
background-attachment: fixed;
}

Maksudnya  kita memakai warna latar belakang seluruh bagian blog kita (body) dengan warna putih dan menggunakan latar berupa gambar juga .Gambar tersebut  diulang menyamping (horisontal) dan berada ditengah,sekaligus  bersifat tetap (fixed) ketika halaman blog di scrool keatas atau bawah.

Karena penulisan syntax diatas terlalu banyak dan menyita waktu,maka bisa juga dipersingkat menjadi seperti berikut.

body{
background: white url(http://gambarku.com/image.jpg) repeat-x  center 30%;
background-attachment: fixed;
}

Kita bisa mengatur value dari properti background-repeat dan background-position untuk menentukan posisi background image sesuai yang kita inginkan.

background-repeat:
repeat : mengulang background gambar  kekanan sekaligus bawah
no-repeat: tidak mengulang background gambar
repeat-x: mengulang background gambar secara horizontal
repeat-y: mengulang background gambar secara vertical

background-position:
center : background gambar ditengah
top      : background gambar berada diatas
bottom:background gambar  berada dibawah
%(persen):background gambar berada berapa persen dari lebar selector

Contoh lain dengan background position
body{
background: white url(http://gambarku.com/image.jpg) no-repeat  center top;
}
Maksudnya,backgaround image tersebut  tidak diulang dan akan berada di paling atas dan  posisinya berada ditengah.

body{
background: white url(http://gambarku.com/image.jpg) no-repeat  center;
}
Maksudnya,backgaround image tersebut tidak diulang dan berada ditengah tengah.

Itulah dasar dari penggunaan syntax CSS untuk properti background,silahkan bereksplorasi untuk mengembangkannya.

Tag : Bloging

CSS Margin dan padding

Mengenai apa dan bagaimana CSS Margin dan padding ini, akan saya bahas secara singkat saja asalkan gampang dimengerti.Saya akan coba terangkan dengan gaya bahasa embongan saya semoga lebih mudah dimengerti.Wkwkwk...


Margin
Dalam CSS istilah margin adalah memberi jarak atau spasi ke arah luar sebuah  elemen/komponen.

Padding
Padding adalah memberi jarak atau spasi ke arah dalam  sebuah elemen/komponen.

Masih bingung maksudnya?.....coba lihat gambar berikut saja,barangkali lebih mudah untuk dipahami.

Perhatikan ,disana ada warna kuning,merah,silver,biru dan hijau.
Yang warna biru dan merah kita ibaratkan sebagai border,Baca: Border atau garis pembatas.
Yang warna kuning adalah sebuah ID atau elemen yang ada ditengah halaman blog/web.

Yang warna hijau itu merupakan margin dari ID yang berwarna silver dengan border warna biru.
Selanjutnya Jarak antara border warna biru kepada  border warna merah milik dari elemen kuning itu adalah padding.

Tapi Jarak antara  border warna merah dan border warna biru bagi elemen yang berwarna kuning adalah margin.

Masih bingung?....saya juga bingung,bagaimana mesti menerangkan ini,,, :D :D
Semoga saja paham ya?...

Apa gunanya margin dan padding?...
Agar tata letak antar elemen kelihatan lebih seragam dan rapi sehingga lebih enak untuk dipandang mata.

Sekarang saya terangkan mengenai penulisan syntax atau code CSS nya yang mengatur padding dan margin ini.

Penulisan syntaxnya,
Seperti pada CSS border,CSS margin dan padding  ini juga termasuk properti CSS shorthan atau penulisan kode yang singkat/pendek.
Misalnya kita menuliskan syntaxnya;

#elemen1{padding: 5px;margin: 5px}

Maksudnya kita menginginkan disemua sisi dari ID elemen1 memiliki margin dan padding sebesar 5 pixel(px).Disini yang kita atur lebarnya sesuai selera dengan memasukkan satuan lebar yaitu pixel,semakin tinggi nilainya tentu semakin lebar.

Bagaimana jika kita menginginkan padding atau margin disetiap sisi dari suatu ID elemen berbeda?...
Lain katanya  bagaimana kita memberi spasi luar atau dalam yang berbeda ukuran lebarnya dari sebuah elemen ?...

Kita beri saja nilai yang berbeda beda margin atau padding baik disebelah kanan,kiri,atas ataupun bawahnya.

Contoh syntax

#elemen1{padding-left:5px;
padding-right:5px;
padding-top: 10px;
padding-bottom10px
margin-left:5px;
margin-right:5px;
margin-top:10px;
margin-bottom:10px
}

Sehingga hasilnya nanti adalah bagian kiri dan kanan elemen memiliki padding dan margin selebar 5 pixel.
Akan tetapi  bagian sisi atas dan bawah elemen memiliki padding dan margin selebar 10 pixel.

Bisa juga kita singkat penulisan syntaxnya menjadi;

#elemen{padding: 10px  5px  10px 5px;
margin:10px  5px  10px 5px;
}


Contoh pemakaian margin atau padding pada suatu elemen/komponen.

Penulisan code CSSnya;


/*Dengan padding dan margin*/
.elemen{
border: 2px solid red;
}
.elemen2{
border: 2px solid darkblue;
padding: 10px;
margin: 20px
background: #ccc;
color: blue;
text-align:justify
}
/*Tanpa padding dan margin*/
.elemenb{
border: 2px solid red;
}
.elemen2b{
border: 2px solid darkblue;
background: #ccc;
color: blue;
text-align:justify
}


Penampakan jika pakai margin dan padding;

Ini adalah demo komponen dengan menggunakan margin dan padding.Coba bereksplorasi lebih jauh dengan menambahkan properti lain yang sudah dibahas di sesi CSS sebelumnya.

Penampakan jika tidak pakai margin dan padding;

Ini adalah demo komponen yang tidak menggunakan margin dan padding.Coba bereksplorasi lebih jauh dengan menambahkan properti lain yang sudah dibahas di sesi CSS sebelumnya.

Ternyata yang menggunakan padding dan margin tampak lebih bagus dan rapi.Nah sekarang sudah tahu kan apa itu margin dan padding sekaligus kegunaannya. :D

Sekian saja penjelasan dasar yang singkat ini,semoga gampang dipahami.Bagian terpenting dari sebuah belajar adalah praktek.Silahkan dipraktekkan sehingga nanti akan cepat bisa mengembangkan sendiri.Dan guru yang paling baik adalah pengalaman.
Selamat mencoba ^_^

Tag : Bloging

Efek Hover Gambar Dengan CSS

Di sini saya menggunakan dua buah gambar yang berbeda. Gambar pertama nantinya akan digunakan sebagai gambar link sedangkan gambar kedua adalah gambar hover (ketika mouse mendekat).

Langkah pertama untuk membuat effect hover gambar dengan CSS adalah mempersiapkan dua buah gambar yang berbeda. Misalnya di sini saya membuat gambar 1 (LINK) dan gambar 2 (SUKSES). Keduanya bukan huruf tetapi gambar. Upload kedua gambar tersebut kemudian copy kedua URL gambar tersebut untuk ditempatkan pada kode CSS.

Di bawah ini saya coba memberi dua buah contoh kode CSS dan HTML yang berbeda untuk membuat effect hover gambar dengan CSS. Kedua cara tersebut akan menghasilkan tampilan yang sama.

Gambar-link :

Gambar-hover :

Kode CSS 1 <style type="text/css"> .gambar a { float:left; display:block; width:260px; height:93px; background:transparent url(URL gambar-link) 0 0 no-repeat; } .gambar a:hover{ border-bottom:none; outline:none; background:transparent url(URL gambar-hover) 0 0 no-repeat; } </style>  
Kode HTML 1 <div class="gambar"> <a href='Link URL'></a> </div>


Kode CSS 2 <style type="text/css"> a.gambar { float:left; display:block; width:260px;height:93px; background:transparent url(URL gambar-link) 0 0 no-repeat; } a.gambar:hover{ border-bottom:none; outline:none; background:transparent url(URL gambar-hover) 0 0 no-repeat; } </style>  
Kode HTML 2 <a class="gambar" href="Link URL"></a>

Tampilan setelah di-publish akan sepertidi bawah (coba Anda dekatkan mouse pada gambar tersebut!)

Pada Kode CSS di atas, Anda bisa merubah posisi, border, ukuran, dan outline image sesuai kebutuhan, namun pada intinya adalah seperti itu dimana gambar-link disimpan pada kode "a" dan gambar-hover disimpan pada kode "a:hover".

Selamat Mencoba ^_^

Tag : Bloging

Tentang Link CSS

Semua pelajari dalam pelajaran sebelumnya Anda dapat mengajukan permohonan untuk referensi / link (seperti mengubah font, warna, garis bawah dan sebagainya). Baru adalah bahwa dalam CSS, sifat ini dapat didefinisikan secara berbeda, tergantung pada sudah mengunjungi link, apakah itu aktif, apakah pointer mouse di atas link. Hal ini memungkinkan Anda untuk menambahkan efek menarik pada situs Anda. Untuk tujuan ini, pseudo disebut-kelas.

Apakah semu?

Pseudo-class memungkinkan Anda untuk mengambil berbagai mempertimbangkan kondisi atau peristiwa dalam menentukan sifat-sifat dari tag-HTM.

Pertimbangkan contoh. Seperti yang Anda ketahui, link yang ditentukan dalam <a> tag HTML. Pada CSS, kita juga dapat menggunakan 'a' sebagai selector:

a {
color: blue;
}

Link dapat memiliki negara bagian yang berbeda. Sebagai contoh, ia telah mengunjungi / visited atau tidak. Anda dapat menggunakan pseudo-kelas untuk memungkinkan gaya yang berbeda dari link dikunjungi dan belum dikunjungi.

a: link {
color: blue;
}

a: visited {
color: red;
}

Gunakan :
a: link dan a: visited untuk dan link yang belum dikunjungi, masing-masing. Link Aktif memiliki pseudo a: active, dan a: hover, saat pointer -pada link.

Kami menganggap masing-masing empat pseudo-on contoh dan penjelasan.

Pseudo-class: link

Pseudo-class : link yang digunakan untuk merujuk pada halaman yang pengguna tidak dikunjungi.

Dalam kode contoh link yang belum dikunjungi - biru.

a: link {
color: # 6699CC;
}

Pseudo: visited

Pseudo : visited digunakan untuk merujuk pada halaman yang telah dikunjungi pengguna. Dalam kode contoh mengunjungi link - ungu.

a: visited {
color: # 660099;
}

Pseudo-class: active

Pseudo-class : active digunakan untuk link aktif.

Dalam contoh tersebut, link aktif memiliki latar belakang kuning.

a: active {
background-color: # FFFF00;
}

Pseudo: hover

Pseudo-class : hover digunakan untuk menghubungkan dimana pointer mouse.

Hal ini dapat digunakan untuk menciptakan efek menarik. Sebagai contoh, jika kita ingin menghubungkan berubah oranye dan miring ketika melewati pointer atas mereka, kami CSS akan terlihat seperti:

a: hover {
color: orange;
font-style: italic;
}

Contoh 1: Pengaruh dalam mencari pointer di atas link

Pengaruh pointer mouse di atas link sudah menjadi tempat umum. Kami mempertimbangkan beberapa tambahan contoh untuk pseudo : hover.

Contoh 1a: Jarak antara huruf

Seperti yang Anda ingat dari Pelajaran 5, jarak antara karakter dapat mengatur properti letter-spacing. Hal ini dapat berlaku untuk link:

a: hover {
letter-spacing: 10px;
font-weight: bold;
color: red;
}

Contoh 1b: UPPERCASE dan lowercase
Dalam Bab 5 kita dianggap sebagai milik text-transform, yang dapat menghidupkan karakter dengan huruf besar untuk huruf kecil.

Hal ini juga dapat digunakan untuk menciptakan efek pada link di bawah ini:

a: hover {
text-transform: uppercase;
font-weight: bold;
color: blue;
background-color: yellow;
}

Kedua contoh ini menunjukkan kemungkinan hampir tak terbatas menggabungkan sifat yang berbeda. Anda dapat membuat sendiri efek sendiri - mencobanya!

Contoh 2: Menghapus menggarisbawahi links

Pertanyaan umum adalah - cara menghapus garis bawah dari link?

Anda harus menentukan apakah Anda ingin menghapus menggarisbawahi, karena dapat secara signifikan mengurangi penggunaan situs Anda. Orang-orang digunakan untuk melihat pada halaman link biru bergaris bawah dan tahu bahwa ia perlu untuk mengklik. Bahkan ibu saya tahu itu! Jika Anda menghapus bagian bawah dan mengubah warna link, kemungkinan bahwa hal ini akan membingungkan pengguna dan mereka tidak memiliki akses ke seluruh isi situs Anda.

Sebenarnya menghapus garis bawah dari link sangat sederhana. Seperti yang Anda ingat dari pelajaran 5, property text-decoration dapat digunakan untuk menentukan teks garis bawah. Untuk menghapus garis bawah hanya mengatur text-decoration - none.

a {
text-decoration: none;
}

Atau, Anda juga dapat mengatur text-decoration, bersama dengan sifat lain, untuk semua empat kelas pseudo.

a: link {
color: blue;
text-decoration: none;
}

a: visited {
color: purple;
text-decoration: none;
}

a: active {
background-color: kuning;
text-decoration: none;
}

a: hover {
color: merah;
text-decoration: none;
}

Pengenalan CSS (Apa itu CSS)

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan.

Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.
Keuntungan Penggunaan CSS

Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet.

Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet.

Jadi, keuntungan menggunakan CSS, lebih praktis!
Kekurangan Penggunaan CSS

Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.

Tag : Bloging

Pure CSS Corner Ribbon

Kali ini saya akan mencoba menjelaskan cara membuat CSS Corner Ribbonyang pada dasarnya untuk memberikan tanda pada sebuah content atau widget tertentu. dalam hal ini saya hanya akan mempergunakan CSS3 sebagai basicnya tanpa menggunakan Image(gambar).

HTML

Banyak penyimpanan markup yang bisa di lakukan

<div class="wrapper">
  <div class="ribbon-wrapper-green">
     <div class="ribbon-green">UNDER</div>
  </div>
</div>​

CSS Wrapper

Style warna hijau yang mungkin bisa anda kembangkan sendiri sesuai selera.

.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 90;
}

Content yang mencangkup keseluruhan isi. dengan penempatan ini bisa di lakukan di berbagai tempat seperti .post , .content-wrapper , #main-wrapper dan lain-lain . Yang perlu di perhatikan adalan position: relative;. Saya sarankan itu tidak perlu ada perubahan position. karena bila di ganti maka posisi bukan lagi di tempat yang sesuai. mungkin akan muncul di atas header atau di samping. tingkat lanjut tulis komentar.

CSS Corner-Ribbon Style

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45);
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45);
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}​

ket : tanpa harus ada perubahan .. kecuali background ,border dan box shadow yang bisa di kreasikan dengan tampilan yang anda inginkan.

Tag : Bloging