Teknik CSS yang disederhanakan CSS3

Written by Edusoft Center on August 22, 2012. Posted in Blog

CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk mengatur style atau tampilan dari dokumen HTML. Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web.

Berikut ini ada beberapa teknik CSS lama yang pada CSS3 sudah disederhanakan sehingga mudah untuk digunakan.

1- Rounded Corner

corners Teknik CSS yang disederhanakan CSS3

Pada CSS lama kodenya: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').corners('10px');
});
</script>

<div class="box">
	<!--CONTENT-->
</div>

Pada CSS3 kodenya:

<style type="text/css">
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

2- Box Shadow

shadow Teknik CSS yang disederhanakan CSS3

Pada CSS lama kodenya:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropShadow.js"></script>
<script type="text/javascript">
$(function(){
	$('.box').dropShadow({
		left: 5,
		top: 5,
		opacity: 1.0,
		color: 'black'
	});
});
</script>

<div class="box">
	<!--CONTENT-->
</div>

Pada CSS3 kodenya:

<style type="text/css">
.box {
box-shadow: 5px 5px 2px black;
-moz-box-shadow: 5px 5px 2px black;
-webkit-box-shadow: 5px 5px 2px black;
}
</style>

<div class="box">
	<!--CONTENT-->
</div>

3- Text Shadow

textshadow Teknik CSS yang disederhanakan CSS3

Pada CSS lama kodenya:

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.fonts {
position: relative;
}
.fonts .font {
position: absolute;
z-index: 200;
}
.fonts .second {
top: 1px;
color: #000;
z-index: 100;
}
</style>

<div class="fonts">
	<span class="font">The quick brown fox jumps over the lazy dog.</span>
	<span class="font second">The quick brown fox jumps over the lazy dog.</span>
</div>

Pada CSS3 kodenya:

<style type="text/css">
.font {
font-size: 20px;
color: #2178d9;
}
.font {
text-shadow: 0 1px 0 #000;
}
</style>

<span class="font">The quick brown fox jumps over the lazy dog.</span>

Tutorial Lain

Tags: , , , , , , , , , , , , , , , , , , , , , ,

Trackback from your site.

Share This Post To :

Edusoft Center

Edusoft Center merupakan lembaga yang fokus pada bidang IT terutama pada Kursus Komputer Profesional. Berlokasi di Solo / Surakarta dan dengan slogan “Start Here. Go Anywhere” diharapkan ilmu yang didapat pada kursus kami dapat diterapkan untuk mempermudah dan menunjang pada semua lini kegiatan yang dilakukan. "Selamat datang di Edusoft Center, Kursus Komputer di Solo"

Leave a comment

Jika anda membutuhkan info lebih lanjut atau ingin mengetahui jadwal kursus, silakan hubungi kami,

Call / SMS :

0896 987 12224


Call / SMS / WA :

08180 4542 586


Email:
[email protected]