Langsung ke konten utama

belajar CSS dasar bersama part 16 : mengenal properti visibility css

 


setelah sekian banyak yang sudah kita kenal dan kita coba sekarang kita akan mencoba apa yang namanya properti visibilty di css, apa fungsi visibility ini sehingga
harus butuh juga dikenalkan dan dicoba, dan bagaimana penerapan dan hasil output dari visibility ini, namun sebelum kita mulai, izinkan saya dulu untuk mengucapkan

salam sobat semua
Alhamdulillahi robbil 'alamiiin atas segala nikmat yang telah Allah berikan pada diri ini sehingganya diri ini masih bisa berkesempatan untuk menulis dan berbagi
dalam tulisan ini dengan kalian dan mudah-mudahan tulisan ini bisa memberikan dan membawa manfaat bagi kita semua sehinnga diri ini bisa mensyukuri dan menggunakan
nikmat yang telah di berikan kepada diri ini. sholawat serta salamku akan selalu tetap tercurahkan untuk baginda sayyidina Muhammad ibni abdillah S.A.W. beserta
kepada keluarga dan para sahabatnya.
Bismillah untuk kali ini kita akan mencoba apa yang namanya properti visibility. dan kalau menurut google translate visibility adalah visibilitas atau sesuatu yang
terlihat dan kalau menurut saya sih visibility itu adalah suatu kode css yang berfungsi untuk merubah suatu selektor dari yang terlihat menjadi tak terlihat dan dari 
yang tak terlihat menjadi terlihat atau dengan kata lain properti visibilty ini berfungsi untuk menyembunyikan suatu selektor dan kemudian bisa menampilkannya lagi.
dan setelah kita mengetahui apa itu visibility waktunya kita sekarang untuk mencoba menerapkan properti visibility ini dalam kode css dan nanti kita bisa melihat
hasil dari output visibility ini. sekarang kita buka kode css dan html yang telah kita buat kemaren dan jangan lupa untuk di duplikat atau di copy dulu sehingga
data yang kemaren sudah aman dan terbackup. bagi yang masih baru mengikut tulisan ini silahkan ketik atau copy paste kode css berikut dalam text editor kesayangan
kalian, kalau saya lebih suka pakai notepad++. dan untuk kode css nya seperti berikut
body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
position:fixed;
width:100%;
}
#isi{
background:#e8e8e8;
color:#000;
padding:83px 7px 7px 7px;
width:71%;
margin-right:17px;
float:left;
min-width:425px;
}
#sidekanan{
float:left;
width:23%;
padding:83px 7px 7px 7px;
background:#e8e8e8;
min-width:345px;
}
.letakgambar{
float:left;
visibility:visible;
}
.clear{
clear:both;
}

nah dalam kode diatas saya meletakkan kode visibility dalam selektor letakgambar yang sudah ada gambar dan penulisannya seperti berikut

visibility:visible;

dan untuk kode html nya silahkan di ketik atau di copy paste seperti berikut

<html>

<head>

<title>My Web</title>

<link href="style/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="main">

<div id="kepala">

<h1>Websiteku</h1>

</div>

<div id="isi">

<p>Ini adala isi dari main content yang akan saya buat 

sebagai website pertama saya

</p>

<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat 

website prtama saya

<div>Sekarang kita lagi mencoba properti display

<p class="terlihat">

<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>

</p>

dan dalam ini kita butuh beberapa langkah.

</div>

<p>Macam-macam nama kota di jawa timur:

<ul class="lis">

<li>Probolinggo</li>

<li>Surabaya</li>

<li>Jember</li>

<li>Pasuruan</li>

<li>Malang</li>

</ul>

</p>

<p>

<h1>Probolinggo</h1>

<br>

Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga

untuk kabupatennya

<br>

Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia

<ul class="lis">

<li>Luas: 56,67 km²</li>

<li>Peringkat luas wilayah: 75</li>

<li>Provinsi: Jawa Timur</li>

<li>Populasi: 223.159 (2014)</li>

<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>

<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>

<li>Waktu setempat: Sabtu 13.26</li>

</ul>

<div class="letakgambar">

<img src="gambar/back1.jpg">

</div>

<div class="clear"></div>

<p>

<ul class="lis">

<li>Luas: 56,67 km²</li>

<li>Peringkat luas wilayah: 75</li>

<li>Provinsi: Jawa Timur</li>

<li>Populasi: 223.159 (2014)</li>

<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>

<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>

<li>Waktu setempat: Sabtu 13.26</li>

</ul>

</p>

</p>

</p>

</div>

<div id="sidekanan">

<p>

<h3>Informasi tentangku</h3>

<table>

<tr>

<td valign="top">Alamat</td>

<td>Probolinggo Indonesia</td>

</tr>

<tr>

<td valign="top">Status</td>

<td>Menikah, dan ingin menikah lagi hehehe</td>

</tr>

</table>

</p>

</div>

<div class="clear"></div>

</div>

</body>

</html>

dan dari kode diatas maka akan didapatkan hasil output seperti berikut.


dan dari hasil diatas gambar tampak tidak ada perubahan, dan sekarang kita ganti nilai atau value properti visibility dengan nilai atau value hidden seperti berikut

visibility:hidden;

 sehingga untuk kode css yang lengkapnya seperti berikut ini

body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
position:fixed;
width:100%;
}
#isi{
background:#e8e8e8;
color:#000;
padding:83px 7px 7px 7px;
width:71%;
margin-right:17px;
float:left;
min-width:425px;
}
#sidekanan{
float:left;
width:23%;
padding:83px 7px 7px 7px;
background:#e8e8e8;
min-width:345px;
}
.letakgambar{
float:left;
visibility:hidden;
}
.clear{
clear:both;
}

dan jika kita buka atau kita refresh browsernya maka kode diatas akan menghasilkan output seperti berikut


kita bisa lihat diatas gambar pada selektor letakgambar sudah menghilang atau tersembunyi.

jadi untuk properti visibility ini nilai atau valuenya hanya ada dua yaitu visible (tampak atau terlihat) dan hidden (tersembunyi atau hilang).

visibility:visible;
visibility:hidden;

untuk tulisan visibility ini saya rasa cukup sekian dulu. dan kita lanjut di next tulisan, mudah-mudahan tulisan ini bisa membawa dan memberikan manfaat bagi kita

semua. Aamiiin.


untuk file kode diatas bisa kalian download disini 

 Salam sobat semua.


#css #html #free #share #gratis #berbagi #web #website #websites #visibility #visible #hidden #code #programing #pemrograman

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya