300x250 AD TOP

Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Kamis, 17 Juli 2014

Tagged under:

Padding dan Margin



Kemampuan CSS bukan hanya untuk mewarnai suatu object tapi CSS juga bisa mengatur posisi suatu object. untuk mengatur posisi dari sebuah object properti yang kita gunakan adalah margin dan padding. Margin adalah jarak yang dibuat diluar object dan padding adalah kebalikannya yaitu jarak yang dibuat didalam object. jika kalian masih bingung berikut adalah illustrasinya


kita bisa lihat disitu margin adalah spasi di luar object dan padding adalah spasi didalam object. 
sekian post tentang margin dan padding
terima kasih
Read More
Zack-Z 05.27  No comment
Tagged under:

ID dan Class



setiap orang di dunia ini pasti memiliki nama begitu juga dengan setiap tag codingan, dalam bahasa CSS pemberian nama dapat dilakukan dengan 2 cara yang pertama dengan menggunakan ID dan yang kedua menggunakan class. Pemeberian nama ini sangat berguna untuk menghindari error yang mungkin terjadi karena persamaan tag. saya akan beri contoh tag yang bernama dan yang tak punya nama

<p>Zackcode</p> >> tag <p> disamping tidak memiliki nama

<p id="judul">Zackcode</p> >> tag <p> disamping memiliki nama judul

<p class="deskripsi">Zackcode</p> >> tag <p> disamping memiliki nama deskripsi

fungsi ID dan Class sama saja, lalu apa bedanya ID dan Class ?

bedanya adalah saat penulisan di CSSnya,, berikut contohnya

bagi yang penamaannya menggunakan ID maka penulisan di CSSnya adalah #nama
contoh >> #judul{ color:red; }

nah bagi yang menggunakan Class maka penulisannya adalah .nama
contoh  >> .deskripsi{ color:red; }

sekian post tentang ID dan Class
Terima kasih
Read More
Zack-Z 05.10  No comment

Senin, 14 Juli 2014

Tagged under:

Membuat efek Shadow


Masih membahas seputar CSS, kali ini gua pengen ngasih tau caranya bikin efek shadow.. efek shadow ini digunakan seperlunya aja dan biasanya hanya dipakai untuk menghias tulisan. untuk membuat efek shadow properti yang kita gunakan adalah "text-shadow". nah biar mengerti langsung gua buat contohnya dibawah :

<html>
<head></head>
<body>
<p>Zackcode</p>
</body>
</html>

hasilnya >>> Zackcode

nah sekarang gua akan menambahkan efek shadow warna merah pada tulisan tersebut

<html>
<head>
<style type="css">
p{ text-shadow:2px 2px 5px red;}
</style>
</head>
<body>
<p>Zackcode</p>
</body>
</html>

maka hasilnya setelah ditambahkan efek :

Zackcode

sekian post gua tentang cara bikin efek shadow
semoga mengerti terima kasih
Read More
Zack-Z 11.27  No comment
Tagged under:

Membuat efek Glow


Efek glow digunakan untuk memberikan efek seperti cahaya di sekitar gambar. untuk menambahkan efek glow properti yang digunakan di dalam css adalah "box-shadow" tanpa basa basi sekarang kita akan langsung ke contoh

<html>
<head></head>
<body>
<img url="defaul.jpg">
</body>
</html>


gambar tersebut akan saya tambahkan efek glow dengan menambahkan css ke dalam codingan.

<html>
<head>
<style type="css">
img{box-shadow:0px 0px 5px 10px yellow;}
</style>
</head>
<body>
<img url="defaul.jpg">
</body>
</html>

maka hasilnya :


pada property box-shadow nilainya kan 0px 0px 5px 10px yellow
maksudnya adalah

0px = untuk glow di bagian kanan saja
0px = untuk glow di bagian bawah saja
5px = untuk seberapa ngeblur warna yang di inginkan
10px = untuk glow di seluruh bagian
yellow = warna glow

sekian post tentang membuat efek glow
semoga mengerti terima kasih
Read More
Zack-Z 02.35  No comment
Tagged under:

Membuat efek Radius



kemarin kan sudah berkenalan dengan css dan kita juga sudah tau bentuk struktur dasar penulisan css, nah sekarang saya akan menshare cara membuat efek radius dengan css. Pertama apa sih efek radius itu ? efek radius adalah efek untuk menumpulkan sudut sudut yang tajam. bingung ? langsung ke contoh deh

disini saya punya gambar default


dengan coding seperti ini:

<html>
<head></head>
<body>
<img url="defaul.jpg">
</body>
</html>

perhatikan,, di gambar tersebut ada 4 sudut yang tajam atau lancip sekarang saya akan mengubahnya menjadi sedikit tumpul. untuk mengubahnya kita akan menambahkan efek radius dengan css. ingat selektornya adalah "img" dan propertinya adalah "border-radius" untuk nilainya kita bisa atur sendiri dengan satuan px

<html>
<head>
<style type="css">
img{border-radius:10px;}
</style>
</head>
<body>
<img url="defaul.jpg">
</body>
</html>

maka hasilnya :


lihat perubahannya ke 4 sudut tersebut terlihat menjadi lebih tumpul
nah sekitan postingan tentang cara membuat efek radius
terima kasih
Read More
Zack-Z 02.13  No comment

Minggu, 13 Juli 2014

Tagged under:

Berkenalan dengan CSS



Kali ini gua akan bahas tentang CSS. Apa itu CSS ? CSS adalah bahasa pemrograman berbasis web sama seperti html. lalu apakah HTML dan CSS saling berkaitan ? Tentu !! ibarat orang pacaran HTML adalah cowoknya dan CSS adalah ceweknya. CSS digunakan sebagai penghias sebuah web. Sebuah web tanpa CSS akan terlihat statis dan terkesan kaku. jadi antara HTML dan CSS itu saling membutuhkan.Dengan CSS kita dapat menentukan posisi sebuah objek, mewarnai tulisan, membuat radius dan lain lain.

Berikut adalah struktur dasar penulisan CSS :

<style type="css">
selector{ properti:nilai; }
</style>

CSS biasanya ditulis di bagian <head>

Masih bingung ? oke sekarang langsung aja ke contohnya biar paham

disini kita akan membuat tulisan berwarna merah, codingnya seperti berikut

<html>
<head>
<style type="css">
p{ color:red; }
</style>
</head>
<body>
<p>ZackCode</p>
</body>
</html>

maka hasilnya akan sperti ini : ZackCode

 sekian tuu=lisan singkat tentang CSS semoga mengerti
terima kasih
Read More
Zack-Z 12.20  No comment
Langganan: Postingan (Atom)