Transform & Efek Text Pada CSS3

Setelah kita belajar Sintaks-sintaks yang berlaku pada CSS3 dan kita sudah mempraktekan Borders CSS3 serta Backgrounds CSS3, di halaman ini kita akan mengenal lebih yaitu tentang

1. CSS3 Transform
2. CSS3 Efek Text

Langsung saja tanpa basa-basi kita akan belajar bersama.

Transform CSS3

Dengan CSS3 transform, kita bisa Memindah, memperbesar atau memperkecil, membelokkan, memutar dan merenggangkan element scale, turn, spin, and stretch elements.

Bagaimana Cara kerjanya?

Sebuah efek Transformasi yang memungkinkan sebuah elemen berubah bentuk, ukuran dan posisinya.

Browser yang mendukung :

1. Internet Explorer 9 membutuhkan awalan -ms-.
2. Firefox membutuhkan awalan -moz-.
3. Chrome and Safari membutuhkan awalan -webkit-.
4. Opera membutuhkan awalan -o-.

Transformasi 2D

Pada Bagian ini anda akan belajar tentang transformasi 2D dengan beberapa metode :

1. translate ( )
2. rotate ( )
3. scale ( )
4. skew ( )
5. matrix ( )

• Metode translate ( )

Dengan metode translate ( ), element berpindah dari posisi awal tergantung dari paremeter yang diberikan untuk posisi kiri (sumbu - X) dan untuk posisi atas (sumbu – Y)

Contoh :

div {  transform: translate(50px,100px);  -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */  -moz-transform: translate(50px,100px); /* Firefox */  }

nilai translate (50px,100px) memindahkan elemen sejauh 50 pixels dari kiri ke kanan dan 100 pixels dari atas ke bawah

• Metode rotate (  ) (Memutar)

Dengan metode rotate ( ) method, elemen diputar sesuai dengan derajat yang diberikan searah jarum jam . Nilai negatif diperbolehkan dan akan memutar berbalik arah jarum jam.

Contoh :

div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }

Nilai rotate(30deg) memutar elemen sejauh 30 drajat searah jarum jam.

• Metode scale ( )

Dengan Metode scale ( )kita bisa memperbesar atau memperkecil ukuran elemen, sesuai dengan parameter yang diberikan untuk lebar (Sumbu – X) dan tinggi(Sumbu-Y):

Contoh :

div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }

Nilai scale (2,4) Merubah ukuran Lebar elemen menjadi dua kali ukuran awal dan ukuran tinggi empat kali ukuran awal.

• Metode skew ( )

Dengan metode skew ( ), elemen berbelok sesuai dengan sudut yang diberikan, sesuai dengan parameter yang diberikan untuk horisontal (Sumbu-X) dan vertikal (Sumbu-Y)

Contoh :

div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }

Nilai skew (30deg,20deg) membelok elemen 30 derajat untuk sumbu X dan 20 derajat untuk sumbu Y.

• Metode matrix ( )

Metode matrix ( ) mengkombinasikan semua transformasi 2D menjadi satu.

Metodematrik meminta 6 parameter,mengandung fungsi matematika , yang mengijinkan anda untuk : rotate, scale, move (translate), dan skew elemen.

Contoh

bagaimana carnya untuk memutar sebuah elemen div 30 derajat menggunakan metode matrix, menggunakan metode matrik:

div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }

• Yang selanjut-nya adalah Metode-metode pada Transformasi 2D

Metode-metode Transformasi 2D
fungsi	Deskripsi
matrix(n,n,n,n,n,n)	Mendefinisikansebuah transformasi 2D, menggunakan matrix dengan 6 nilai
translate(x,y)	Mendefinisikansebuah transformasi 2D, memindahkan elemen sejauh sumbu-X dan sumbu-Y
translateX(n)	Mendefinisikansebuah transformasi 2D, Memindahkan elemen sejauh sumbu-X
translateY(n)	Mendefinisikansebuah transformasi 2D, Memindahkan elemen sejauh sumbu-Y
scale(x,y)	Mendefinisikansebuah transformasi 2D, Merubah lebar dan panjang elemen
scaleX(n)	Mendefinisikansebuah transformasi 2D, Merubah lebar elemen
scaleY(n)	Mendefinisikansebuah transformasi 2D, Merubah panjang elemen
rotate(angle)	Mendefinisikansebuahrotasi 2D, yang derajatnya ditetapkan pada parameternya
skew(x-angle,y-angle)	Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-X dan sumbu-Y
skewX(angle)	Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-X
skewY(angle)	Mendefinisikan sebuah sebuah transformasi kemiringan 2D sejauh sumbu-Y

Efek Text

CSS3 menyediakan beberapa fitur baru.

Pada bagian ini anda akan belajar tentang properti text di bawah ini:

1. text-shadow
2. word-wrap

Internet Explorer belum mendukung properti text-shadow.

Firefox, Chrome, Safari, dan Opera mendukungproperti text-shadow.

Semua bowser utaman mendukung properti word-wrap.

• Bayangan Text di CSS3

Di CSS3,properti text-shadow. di gunakan untuk bayangan text. Kamu bisa menetapkan bayangan horisontal dan vertikalpanjang bayangan dan warna bayangan :

Contoh :

h1 { text-shadow: Text shadow effect 5px 5px 5px #FF0000; }

Maka hasil nya akan Seperti dibawah ini :

• CSS3 Word Wrapping

Jika suatu tulisan terlalu panjang untuk suatu area,tulisan akan meluas keluar area:

Di CSS3,properti word-wrap mengijinkan anda untuk memaksa tulisan unntuk tidak keluar area sejauh jika itu berarti membagi tulisandi tengah-tangah kata :

Kode CSS nya seperti di bawah ini :

p {word-wrap:break-word;}

Properti Text Yang Baru
Properti	Deskripsi
hanging-punctuation	Menetapkan apakah sebuah karakter tanda baca boleh diletakkan diluar kotak.
punctuation-trim	Memungkinkan apakah karakter tanda baca akan dipotong
text-align-last	Mendeskripiskan baris terakhir dari sebuah area atau baris kanan sebelum memaksa untuk di potong ketika tulisan rata tengah "justify"
text-emphasis	Memberikan tanda empasis, dan warna bagian depan dari tanda empasis untuk elemen text
text-justify	Menetapkan metode justification digunakan ketika text rata tengah "justify"
text-outline	Menetapkan garis luar text “outline”
text-overflow	Menetapkan apa yang akan terjadi ketika text ditimpa(overflows) elemen
text-shadow	Menambahkan bayangan ke text
text-wrap	Menetapkan pemotongan text untuk text yang panjang agar tidak keluar batas atau kotak
word-wrap	Melakukan pemotongan kalimat yang panjang dan memindahnya baris yang baru

Itu adalah Transform & Efek Text Pada CSS3

Baca artikel lain nya tentang HTML5 dan CSS3 disini

Transform & Efek Text Pada CSS3 2015-01-07T03:29:00+07:00 Rating: 4.5 Diposkan Oleh: Unknown