Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



ROTATE ATAU PUSING TEKS DENGAN CSS
August 10, 2009
Posted by: Fauzie


Jika anda perhatikan di blog demo saya ini, terdapat satu kotak yang diisi dengan haribulan, bulan dan tahun. Bila dilihat melalui browser Safari, kedudukan tahunnya adalah terbalik.

Ini adalah satu contoh "text rotation" yang dibina dengan menggunakan kod CSS dan juga dengan menggunakan property prefix -webkit dan -moz. Walaubagaimana pun ianya hanya boleh dilihat "menjadi" melalui browser terkini iaitu Safari dan juga dengan browser IE setelah ditambah dengan "filter".

Di bawah ini screen shot apabila contoh text rotation ini dilihat melalui 3 jenis browser: IE, Firefox dan Safari.


Dilihat melalui browser Internet Explorer



Dilihat melalui browser Firefox



Dilihat melalui browser Safari


Ini ialah kod CSS dan HTML untuk "text rotation" seperti contoh di atas.

<html>
<head>
<style type='text/css'>
.example-date {
background-color:#998877;
float:left;
margin-left:10px;
padding:45px 5px 0;
position:relative;
}
.example-date .day {
color:#000000;
font-size:45px;
left:5px;
line-height:45px;
position:absolute;
top:0;
}
.example-date .month {
color:#000000;
font-size:25px;
text-transform:uppercase;
}
.example-date .year {
color:#000000;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display:block;
font-size:1.1em;
background-color:#998877;
position:absolute;
right:0px;
top:10px;
}
</style>
</head>
<body>
<div class="example-date"><span class="day">5</span><span class="month">Aug</span>
<span class="year">2009</span></div>
</body>
</html>


Nota: Warna maroon ialah kod CSS dan warna biru kod HTML

Anda boleh menukar warna tarikh, bulan dan tahun dengan menukar kod "color" seperti berikut:

Tukar warna tarikh. Tukar #000000 (hitam) kepada "red" untuk merah atau sebagainya.

.example-date .day {
color:#000000;

Tukar warna bulan.

.example-date .month {
color:#000000;

Tukar warna tahun.

.example-date .year {
color:#000000;

Kita juga boleh mendapatkan keempat-empat bucu kotak menjadi bulat (rounded) dengan menambah property prefix -webkit dan -moz bagi mendapatkan hasil seperti berikut atau "Live Demo" ini:



Untuk mendapatkan effect ini, sila tambahkan kod berwarna maroon seperti di bawah ini.


.example-date {
background-color:#998877;
float:left;
margin-left:10px;
padding:45px 5px 0;
position:relative;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
}

Selamat mencuba.