CSS :Opacity

Assalamualaikum wr.wb

pada kesempatan pada hari ini saya akan membahas CSS Opcity atau transparansi elemen. properti Opacity dapat mengambil nilai yang lebih rendah atau lebih transparan
langsung ke penerapanya

nah diatas bisa dilihat contohnya sebakin kecil nilai dari Opacity maka akan semakin transparan juga gambarnya. jika niali nya 1 sama dengan defaultny
mungkin itu saja yang bisa saya bagi
referensi:www.w3schools.com

Wassalamualaikum wr.wb

Read More

CSS: Width dan Height

Assalamualaikum wr.wb

Selamat Sore masih bersama blog saya ,kali ini kita akan mempelajari tentang Width dan Height .
Pengertian Width adalah properti yang digunakan untuk mengatur lebar dan Height adalah properti yang digunakan untuk mengatur tinggi
contoh:

Menggunakan max-widthsebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil.

nah itu lah contohnya penggunaan width dan height
keterangan:

•  element p diatur lebar dan panjangnya dengan width dan height
• lebar elemen p 50%
• tinggi elemen p 400px

ada juga properti max-width dugunakan untuk mengatur lebar maksimum dari elemen
bisa kalian coba sendiri karena jika kita hanya membaca tidak mencoba belm tentu itu benar jika belum dicoba
maaf jika ada salah bisa ditanya di koment
referensi:www.w3schools.com
Menggunakan max-widthsebaliknya, dalam situasi ini, akan meningkatkan penanganan browser dari jendela kecil.

sekian Wassalamualaikum wr.wb

Read More

CSS: Hover

Assalamualaikum wr.wb

pada kesempatan pada hari ini saya akan membahas tentang CSS Hover adalah sebuah style yang digunakan untuk merubah style content apabila kursor diarahkan ke konten .biasanya warna content itu akan berubah jika diarahkan ke konten hover ini digunakan agar tampilan lebih menarik dan keren, langsung ke contohnya
:

 keterangan:

• pemanggilan menggunakan selector elemen html
• background awal bewarna merah dan text putih
• setelah kursor di arahkan ke content maka background berubah bewarnahijau dan text hitam

nah itu mungkin contoh sederhananya kalian bisa menggunkan hover disetiap elemen seperti :button,list,content dan lain lain
mungkin bisa langsung dipraktekan agar langsung paham kegunaanya
mungkin sekian dri saya
referensi:www.w3schools.com

Wassalamualaikum wr.wb

Read More

CSS: Menambah Icon

Assalamualaikum wr.wb
kali ini saya akan membahas cara menambah icon . icon disini berguna untuk mempercantik tampilan agar tampilan tidak menjadi sepi karena hanya berisi text saja.icon juga biasa digunkan untuk memperhemat tempat dibanding text. disini kita akan mempelajari cara menambah icon secara online dan offline

contoh penggunaan secara online
1.memkai font awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 taruh link diatas di dalam tag head untuk menghubungkan fontawesome ke html
 2.kalian download font awesomenya dan menaruhnya sefolder dan dopanggil
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
berarti font awesome berada di dalam folder css

pemanggilan icon:<i class="fa fa-car"
hasil:

itu dengan font aweome ada lagi menggunkan bootstrap:
hampir sama cuma berbeda pemanggilan dan linknya
1.bootstrap secara online:<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
2.secara offline sama seperti font awesome kalian download dan panggil dengan link
penggunaan:
<i class="glyphicon glyphicon-cloud"></i>
bedanya disini pemanggilan iconya menggunakan glyphicon
mungkin kalian bisa langsung mencobanya

referensi:www.w3schools.com
sekian Wassalamualaikum wr.wb

Read More

CSS: Style Table

Assalamualaikum wr.wb

hai pada hari ini saya akan membahas style table. biasanya table sering digunakan dalam sebuah tampilan web, disini saya akan membagikan cara agar tampilan table agar lebih menarik
lansung ke contoh

ini adalah contoh hanya dengan penggunaan border:

itu adalah contoh sengan border biasa
coba pakai yang ini

itu adalah contoh script HTML,CSS dan Hasilnya
keterangan:

• menetapkan apakah perbatasan harus runtuh kedalam perbatasan tunggal
• nth-child(even) berfungsi memberi background secara berseling
• hover didalam table itu berfungsi warna background akan berubah jika kursor diarahkan ke table sesuai dengan syntaknya 

kesimpulanya table jika dikasih CSS akan lebih menarik dan lebih bervariatif kalian juga bisa langsung mempraktekanya
referensi:www.w3schools.com

mungkin itu saja yang bisa saya bagikan sekian dari saya
Wassalamualaikum wr.wb

Read More

CSS: Style Link

Assalamualaikum wr.wb


haii..kali ini saya akan membahas tentang style link di CSS .
ya kegunaan CSS di style link yaitu untuk mengatur tampilan link agar lebih menarik dan tidak hanya sekedar link yang berupa text saja namun kita bisa hmembuatnya seperti button

contoh:

nah tampilanya akan lebih menarik jika diatur dalam css bisa kalian lihat contoh diatas tampilan link dengan CSS dan tanpa CSS lebih menarik mana
keterangan:

• link yang bawah dipanggil di CSS dengan class
• link mempunyai background merah dan warna putih
• mempunyai jarak konten ke luar sebesar 10pixel

nah mungkin itu saja dan ada tembahan mengenai text decoration digunakan untuk menghilangkan underline dalam text. dan supaya lebih menarik link bisa di beri hover
contoh:

keterangan:

• hover latarbelakang bewarna biru jika kursor diarahkan ke link

yah jadi intinya CSS dalam link digunakan agar membuat tampilan link menarik dan lebih berfariasi mungkin kalian bisa langsung mempraktekanya
referensi:www.w3schools.com

sekian dari saya
Wassalamualaikum wr.wb

Read More

CSS: Text

Assalamualaikum wr.wb

masih seputar CSS kali ini kita akan belajar Text di CSS. Text ditata dengan bebarapa format Text. di CSS Text pun bisa diatur agar semenarik mungkin untuk memberi kesan untuk orang mengunjungi web itu kagum dan tidak bosan mengunjungi lagi adapun materi berikut

1.Text Color(warna Text)
yaitu properti yang digunakan untuk mengatur warna Text
contoh:

keterangan:

• pemanggilan dengan selector h1
• text bewarna merah

2.Text Align (text keselarasan)
yaitu properti yang digunakan untuk mengatur keselarasn horisontal text
contoh:

keterangan:

• text-align center digunakan untuk membuat rata tengah

bisa kalian coba yang lain misalnya right dan left

3.Text Decoration (dekorasi text)
biasanya sering digunakan untuk menghilangkan underline(garis bawah) di text
penulisan: {
 text-decoration:none;
}

4.Tranformasi Text
yaitu proerti yang digunakan untuk mengatur huruf kecil dan huruf besar text
contoh:

5.Text Shadow
yaitu properti yang digunakan dalam menambah efek bayangan pada Text
contoh:

nah itulah beberapa properti Text CSS dan kalian yang bingung langsung saja dipraktekan jika ada yang salah bisa dibahas ,dan jika ada kesalahan saya minta maaf

Wassalamualaikum wr.wb

Read More

CSS : Text-Align

Assalamualaikum wr.wb

kali ini saya akan membagikan tentang align dalam CSS
yaitu adalah pengaturan posisi misalnya kanan, kiri, dan tengah dalam align untuk content biasanya menggunakan margin
untuk align biasanya digunakan untuk mengatur text,tapi kali ini saya akan membagikan tentang Text-Align

mungkin itu saja yang bisa saya bagikan , semoga bermanfaat
referensi:www.w3schools.com

Wassalamualaikum wr.wb

Read More

CSS: Out Line

Assalamualaikum wr.wb

Masih Seputar CSS Kali ini Saya akan membahas Out Line atau gari luar Perbatasan Out Line ini yang berfungsi menentukan gaya warna lebar garis
penjelasan pada gambar:

• dotted  :Mendefinisikan perbatasan putus-putus
• solid     :Mendefinisikan sebuah perbatasan solid
  
• double :Mendefinisikan perbatasan ganda
• grove   :Mendefinisikan perbatasan berlekuk 3d
• ridge    :Mendefinisikan sebuah perbatasan bergerigi 3d
• inset    :Mendefinisikan sebuah perbatasan inset 3d
• out-set :Mendefinisikan sebuah perbatasan awal 3d
• none    :Mendefinisikan ada batas
• hidden :Mendefinisikan perbatasan tersembunyi
  Out Line hampir sama dengan materi border tapi di materi ini akan dibahas juga garis warna
  
  Mungkin itu saja dari saya
  
  Wassalamualaikum wr.wb

Read More

CSS: Box Model

Assalamualaikum wr.wb

Masih bersama saya ,Kali ini kita akan belajar Box Model di dalam CSS, semua elemen dalam HTML di anggap sebagai kotak
model kotak atau Box Model dalam CSS pada dasarnya adalah sebuah kotak yang membungkus di setiap elemen HTML
Terdiri Dari:

• Margin
• Border
• padding
• content
  
  penjelasan:
• content :dimana text atau gambar muncul
• padding:menghapus sebuah daerah di sebuah content
• border  :sebuah perbatasan yang berada di sekitar content dan padding
• margin :menghapus sebuah daerah di luar perbatasan

ya mungkin itu saja penjelasan dari saya kurang lebih mohon maaf
Wassalamualaikum wr.wb

Read More

CSS: Belajar padding

Assalamualaikum wr.wb

Masih belajar seputar CSS pada Post kali ini saya akan membahas tentang padding pertama pengertian padding. padding adalah sebuah properti dalam CSS yang digunakan untuk membuat ruang di sekitar content

nah itu salah satu contoh penggunaan padding.
penggunaan padding sama halnya border begitupun penulisanya
contoh

padding: 50px;
keterangan:

• semua ruang di sisi content berjarak 50px

 padding:10px 30px 40px 60px;
keterangan:

• jarak ruang content sisi atas 10px
• jarak ruang content sisi kanan 30px
• jarak ruang content sisi bawah 40px
• jarak ruang content sisi kiri 60px

padding:30px 70px;
keterangan:

• jarak ruang content sisi atas bawah 30px
• jarak ruang content sisi kanan kiri 70px

atau juga penulisan menggunakan
padding-top:10px;
padding-right:30px;
padding-bottom:40px;
padding-left:60px;
  keterangan:

• jarak ruang content sisi atas 10px
• jarak ruang content sisi kanan 30px
• jarak ruang content sisi bawah 40px
• jarak ruang content sisi kiri 60px

ya mungkin itu saja yang bisa saya sampaikan, kalau masih belum paham bisa langsung di cob
referensi:www.w3schools.com

sekian Wassalamualaikum wr.wb

Read More

CSS: Belajar Margin

Assalamualaikum wr.wb

Masih seputar bahasa pemrograman yaitu CSS
kali ini kita akan belajar tentang Margin

1.Pengertian
 Margin adalah proprti yang digunakan untuk membuat ruang disekitar elemen

properti Margin mempengaruhi sisi elemen
margin-top    :mempengaruhi sisi elemen atas
margin-right :mempengaruhi sisi elemen sebelah kanan
margin-left    :mempengaruhi sisi elemen sebelah kiri
margin-bottom:mempengaruhi sisi elemen bawah

contoh:

dan itulah hasilnya

dan ada lagi penulisan:

penulisanya beda tetapi hasilnya sama
keterangan:
margin:50px 140px 160px 180px;

• 50px margin atas
• 140px margin kanan
• 160px margin bawah
• 180px margin kiri

contoh lain
margin:50px 140px 160px;

• 50px atas
• 140px kanan
• 160px bawah

margin:50px 140px;

• 50px atas dan bawah
• 140px kanan dan kiri

margin:100px;

• ke4 sisinya marginya 100px;

 margin:auto;

• mengambil pusat dari horisontal

nah itu penjelasan yang lain tentang cara penulisan margin
sekian dari saya, semoga bermanfaat
referensi:www.w3schools.com

Wassalamualaikum wr.wb

Read More

CSS: Bordrer Radius

Assalamualaikum wr.wb

hai sahabat bloger masih seputar dunia web kali ini kita akan belajar tentang border radius

1.Pengertian
Border Radius adalah sebuah tag yang membuat agar sudut membulat
di dalam CSS semakin besar nilai dari  border radius maka semakin besar lengkunganya

langsung saja ke penerapan border radius pada table ini:

 ya inilah hasilnya bisa kalian lihat sendiri dan mungkin bisa langsung dipraktekan , oh ya saya penggunaan CSSnya melalui Internal
ya itu saja mungkin yang bisa saya bagikan semoga bermanfaat
referensi:www.w3schools.com

Wassalamualaikum wr.wb

Read More

CSS: Belajar Border

Assalamualaikum wr.wb

masih belajar tentang CSS kali ini kita akan belajar border 

A.Pengertian 
 border adalah perbatasan antar content biasanya didefinisikan sebagai garis samping

B.materi
  tag-tag border

• dotted  :Mendefinisikan perbatasan putus-putus
• solid     :Mendefinisikan sebuah perbatasan solid
  
• double :Mendefinisikan perbatasan ganda
• grove   :Mendefinisikan perbatasan berlekuk 3d
• ridge    :Mendefinisikan sebuah perbatasan bergerigi 3d
• inset    :Mendefinisikan sebuah perbatasan inset 3d
• out-set :Mendefinisikan sebuah perbatasan awal 3d
• none    :Mendefinisikan ada batas
• hidden :Mendefinisikan perbatasan tersembunyi
  
  
  
  
  contoh:
  

  

  
  

  

  
  

  

  
  

  
  

   itulah contoh dari tag border kalian pun bisa menambahkan ketebalan border dan warna border contoh:
  id{
  

  border:1px solid red;

  }

  
  

  keterangan:

  maka border mempunyai ketebalan 1px dan solid bewarna merah

  
  

  itu saja yang bisa saya sampaikan bisa langsung dipraktekan 
  referensi:www.w3schools.com
  

  Wassalamualaikum wr.wb

Read More