Selasa, 06 November 2012

Sambungan Posting PENJABARAN CSS -1

CSS Margin

Margin merupakan batas diluar border
MARGIN

Individu Margin

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right
Contoh:
body {
 border: 2px dotted #000;
}
p {
 margin-left: 100px;
 margin-right: 10px;
 margin-top: 50px;
 margin-bottom: 100px;
 background-color: #34AFFB;
}
HTML Code
<body>
<h1>MARGIN</h1>
<p>Margin merupakan batas diluar border Margin merupakan batas diluar border Margin merupakan batas diluar border Margin merupakan batas diluar border</p>
<p>Lorem Morbi suscipit dolor sit tristique velit, excepturi ultrices orci, porttitor imperdiet posuere amet nulla ut. Enim euismod amet est dapibus vestibulum, nullam posuere sit neque facilisis nulla volutpat, curabitur arcu.</p>
</body>
Lihat Hasinya

Margin Shorthand

Contoh:
body {
 border: 2px dotted #000;
}
p {
 margin: 20px 10px;
 background-color: #34AFFB;
}
HTML Code
<body>
<h1>Margin Shorthand<h1>
<p>Margin merupakan batas diluar border Margin merupakan batas diluar border Margin merupakan batas diluar border Margin merupakan batas diluar border</p>
<p>Lorem Morbi suscipit dolor sit tristique velit, excepturi ultrices orci, porttitor imperdiet posuere amet nulla ut. Enim euismod amet est dapibus vestibulum, nullam posuere sit neque facilisis nulla volutpat, curabitur arcu.</p>
</body>
Lihat Hasilnya


CSS Padding

--PADDING

Padding Individual

  • padding-left
  • padding-right
  • padding-top
  • padding-bottom
Contoh:
p {
 padding-left: 35px;
 padding-right: 50px;
 padding-top: 20px;
 padding-bottom: 20px;
 background-color: #746404;
}
HTML Code
<body>
<h1>PADDING</h1>
<p>Paragraf kali ini menggunakan padding sebagai pelengkapnya......................</p>
<p>Paragraf kali ini menggunakan padding sebagai pelengkapnya......................</p>
</body>
Lihat Hasilnya

Padding Shorthand

Contoh
p {
 padding: 15px 50px 35px;
 background-color: #ad5348;
 color: #fff;
}
HTML Code
<body>
<p>Paragraf kali ini menggunakan padding sebagai pelengkapnya......................</p>
<p>Paragraf kali ini menggunakan padding sebagai pelengkapnya......................</p>
</body>
Lihat Hasilnya


CSS Display

    Display Values:
  • none
  • block
  • inline
  • list-item
Contoh:
<html>
<head>
<style type="text/css">
span.pertama { display: none; }
span.kedua { display: block; }
span.ketige { display: inline; }
span.keempat { display: list-item; }
</style>
</head>

<body>
<p>Perjalanan yang sangat <span class="pertama">melelahkan</span></p>
<p>Perjalanan yang sangat <span class="kedua">melelahkan</span></p>
<p>Perjalanan yang sangat <span class="ketiga">melelahkan</span></p>
<p>Perjalanan yang sangat <span class="keempat">melelahkan</span></p>
</body>
</html>
Lihat Hasilnya

Display List

Contoh: ul inline
<html>
<head>
<style type="text/css">
ul {
 display: inline;
}
</style>
</head>

<body>
<ul>
 <li>Ruang tamu</li>
 <li>Kamar tidur</li>
 <li>Kamar mandi</li>
 <li>Dapur</li>
</ul>
</body>
</html>
Lihat Hasilnya

Contoh: li inline
<html>
<head>
<style type="text/css">
li {
 display: inline;
 font-weight: bold;
}
</style>
</head>

<body>
<ul>
 <li><a href="">HOME</a> |</li>
 <li><a href="">PROFILE</a> |</li>
 <li><a href="">ABOUT</a> |</li>
 <li><a href="">CONTACT</a></li>
</ul>
</body>
</html>
Lihat Hasilnya

CSS Position

CSS Position value
  • position: relative;
  • position: absolute;
  • position: fixed;

Position Relative

Contoh:
<html>
<head>
<style type="text/css">
p {
 text-align: center;
}
div.no1 {
 width: 300px;
 height: 300px;
 background-color: #388CB1;
}
div.no2 {
 position: relative;
 top: 20px;
 left: 20px;
 width: 300px;
 height: 300px;
 background-color: #7EB138;
}
div.no3 {
 position: relative;
 top: 20px;
 left: 20px;
 width: 300px;
 height: 300px;
 background-color: #DCE0D7;
}
</style>
</head>

<body>
<div class="no1">
 <div class="no2">
  <div class="no3">
   <p>RELATIVE</p>
  </div>
 </div>
</div>
</body>
</html>
Lihat Hasilnya

Position Absolute

contoh
<html>
<head>
<style type="text/css">
h1 {
 position: absolute;
 top: 28px;
 right: 270px;
 border: 1px solid #f00;
}
</style>
</head>

<body>
<h1>POSITION ABSOLUTE</h1>
<p>Position absolute adalah suatu cara penempatan yang bebas sesuai keinginan kita...</p>
<p>Position absolute adalah suatu cara penempatan yang bebas sesuai keinginan kita...</p>
<p>Position absolute adalah suatu cara penempatan yang bebas sesuai keinginan kita...</p>
<p>Position absolute adalah suatu cara penempatan yang bebas sesuai keinginan kita...</p>
<p>Position absolute adalah suatu cara penempatan yang bebas sesuai keinginan kita...</p>
<p>Position absolute adalah suatu cara penempatan yang bebas sesuai keinginan kita...</p>
</body>
</html>
Lihat Hasilnya


CSS Floating

Float merupakan salah satu cara membuat sidebar ke pinggir. contohnya seperti berikut:

Float pertama

Content yang sangat banyak Content yang sangat banyak Content yang sangat banyak
Link

Float Values

  • Left
  • Right
  • None
  • Inherit
Contoh:
<html>
<head>
<style type="text/css">
img {
 float: rigth;
}
</style>
</head>

<body>
<img src="images/music.png" />
<img src="images/music.png" />
<img src="images/music.png" />
<p>Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating</p>
</body>
</html>
Hasilnya seperti ini
Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating Gambar dan Paragraph ini hasil dari floating

CSS Navigation Menu

Sebelum mempelajari navigation menu terlebih dahulu kita belajar background link
Contoh:
<html>
<head>
<style type="text/css">
a.nav {
 margin: 0px;
 padding: 10px 5px;
 background-color: #f00;
}
a.nav:hover {
 background-color: #00f;
 color: #fff;
}
</style>
</head>

<body>
<a href="" class="nav">HOME</a>
</body>
</html>
Hasilnya seperti ini:

Ul,Li navigation

Contoh:
<html>
<head>
<style type="text/css">
#nav {
 margin: 10px 15px;
 padding: 14px 5px;
 float: right;
 background-color: #444;
}
ul#nav li {
 list-style: none;
 float: left;
}
#nav li a {
 padding: 14px 10px 13px;
 font-weight: bold;
 color: #fff;
 text-decoration: none;
}
#nav li a:hover {
 background-color: #87D51B;
}
</style>
</head>

<body>
<div id="nav_container">
 <ul id="nav">
  <li><a href="">home</a></li>
  <li><a href="">company</a></li>
  <li><a href="">solution</a></li>
  <li><a href="">contacts</a></li>
  <li><a href="">home</a></li>
  <li><a href="">company</a></li>
  <li><a href="">solution</a></li>
  <li><a href="">contacts</a></li>
  <li><a href="">home</a></li>
  <li><a href="">company</a></li>
  <li><a href="">solution</a></li>
  <li><a href="">contacts</a></li>
 </ul>
</div>
</body>
</html>
Lihat Hasilnya


CSS Opacity

Opacity berfungsi untuk menyamarkan suatu objec atau gambar menjadi transparan, Opacity mempunyai ukuran ketebalan warna untuk Mozilla Firefox 0.1 - 0.9 sedangkan untuk Internet Explorer 10 - 90
opacity: 0.5;
filter: alpha(opacity=50);
Contoh:
<html>
<head>
<style type="text/css">
body {
 background-color: #444;
}
#opacity {
 height: 150px;
}
#opacity li {
 float: left;
 list-style: none;
}
#opacity1 img {
 opacity: 0.7;
 filter: alpha(opacity=70);
}
#opacity2 img {
 opacity: 0.4;
 filter: alpha(opacity=40);
}
#opacity3 img {
 opacity: 0.1;
 filter: alpha(opacity=10);
}
</style>
</head>

<body>
<ul id="opacity">
 <li><img src="world.png" /></li>
 <li id="opacity1"><img src="world.png" /></li>
 <li id="opacity2"><img src="world.png" /></li>
 <li id="opacity3"><img src="world.png" /></li>
</ul>
</body>
</html>
Lihat Hasilnya

Hover Opacity

Contoh:
<html>
<head>
<style type="text/css">
body {
 background-color: #4cbdb9;
 text-align: center;
}
img {
 opacity:0.4;
 filter:alpha(opacity=40);
}
img:hover {
 opacity:1.0;
 filter:alpha(opacity=100);
}
</style>
</head>

<body>
<img src="puzzle_orange.png" />
<img src="puzzle_green.png" />
</body>
</html>
Lihat Hasilnya
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)