Membuat Bentuk Jajar Genjang Dengan CSS3 – Halo teman-teman, selamat datang kembali di tutorial CSS3 Lengkap dari malasngoding.com. Apa kabar semua? mudah-mudahan teman-teman dan keluarga selalu dalam keadaan sehat.
Pada tutorial CSS3 ini, kita akan membahas tentang cara membuat bentuk jajar genjang menggunakan CSS3.
Membuat Bentuk Jajar Genjang Dengan CSS3
Seperti yang sudah teman-teman pelajari pada tutorial css3 sebelumnya, CSS memiliki kemampuan untuk merubah bentuk dari suatu elemen. dengan berbagai macam bentuk yang kita inginkan. termasuk bentuk jajar genjang.
Untuk membuat bentuk jajar genjang, kita bisa menggunakan perintah skew() pada propertytransform css3.
Bentuk jajar genjang yang akan kita buat berasal dari bentuk kotak atau persegi. yang kemudian kita berikan perintah skew() untuk memiringkan nya.
Membuat Bentuk Jajar Genjang Dengan CSS3 Menggunakan Skew()
Skew() berguna untuk memiringkan suatu elemen. ada berbagai kemiringan yang bisa kita atur. diantaranya adalah kemiringan sumbu X (ke kiri atau ke kanan) dan sumbu Y (ke atas atau ke bawah).
Silahkan teman-teman perhatikan seperti contoh berikut.
Contoh berikut saya buat dalam file index.html.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<center>
<h2>Jajar Genjang CSS3-www.malasngoding.com</h2>
</center>
<div class="kotak1">
Ini adalah kotak biasa/persegi
</div>
<div class="kotak2">
Ini adalah jajar genjang
</div>
<div class="kotak3">
Ini adalah jajar genjang
</div>
Seperti yang terlihat pada contoh script di atas, kita akan mencoba membuat beberapa buah elemen kotak. yang diantara kotak-kotak tersebut akan kita buatkan bentuk kotak biasa dan bentuk jajar genjang. agar lebih mudah dilihat perbedaannya oleh teman-teman.
Dan berikut script CSS nya.
CSS
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.kotak1 {
background:red;
margin:50px;
width:200px;
height:200px;
float:left;
}
.kotak2 {
margin:50px;
background:green;
width:200px;
height:200px;
float:left;
-ms-transform:skew(20deg);/* Support untuk IE 9 */
-webkit-transform:skew(20deg);/* support untuk Safari */
transform:skew(20deg);/* default syntax */
}
.kotak3 {
margin:50px;
float:left;
background:blue;
width:280px;
height:200px;
-ms-transform:skew(20deg);/* Support untuk IE 9 */
-webkit-transform:skew(20deg);/* support untuk Safari */
transform:skew(20deg);/* default syntax */
}
Silahkan teman-teman sesuaikan untuk penempatan CSS nya, bisa internal atau pun external. jika teman-teman belum paham tentang perbedaan dari internal CSS dan external CSS teman-teman bisa baca tutorialnya di sini.
Oke lanjut.
HASIL
Sekarang kita lihat hasilnya. hasilnya akan seperti berikut pada saat dijalankan di browser.
Membuat Bentuk Jajar Genjang Dengan CSS3
NB : Posisi kotak menjadi berurutan ke samping karena kita menggunakan perintah CSS float:left;.
Penjelasan
Seperti yang terlihat pada gambar di atas. ada 3 buah kotak yang kita buat. yang pertama kita beri class .kotak1, kedua kita beri class .kotak2 dan kotak yang ketiga kita beri class .kotak3.
kotak1 adalah kotak biasa yang kita buat dengan cara yang sangat mudah. yaitu hanya dengan cara memberikan background:red, kemudian kita atur tinggi dan lebarnya sebesar 200px.
kotak2 juga sama dengan kotak1. bedanya pada kotak2 kita memberikan efek skew() untuk membuat kemiringan. derajat kemiringan nya kita ber 20deg. teman-teman bisa mengubah derajat kemiringan nya sesuai nilai yang diinginkan tergantung kemiringan yang diinginkan.
1
2
3
4
5
6
background:green;
width:200px;
height:200px;
-ms-transform:skew(20deg);/* Support untuk IE 9 */
-webkit-transform:skew(20deg);/* support untuk Safari */
transform:skew(20deg);/* default syntax */
kotak3 juga masih sama dengan kotak2. bedanya kotak3 kita beri lebar yang lebih dari pada tinggi nya. agar terlihat lebih lebar. yaitu kita beri tinggi 200px dan lebar 280px.
1
2
3
4
5
6
background:blue;
width:280px;
height:200px;
-ms-transform:skew(20deg);/* Support untuk IE 9 */
-webkit-transform:skew(20deg);/* support untuk Safari */
transform:skew(20deg);/* default syntax */
Mengenal Skew() pada CSS3
Contoh penggunakan perintah skew() di atas merupakan contoh penggunaan yang paling sederhana.
Kemudian ada lagi yang namanya skewX() dan skewY().
Penggunaan skewX()
dan bisa menggunakan perintah skewX() untuk membuat kemiringan ke kiri dan ke kanan.
Penggunaan skewY()
Kita bisa menggunakan perintah skewY() untuk membuat kemiringan ke atas dan ke bawah.
Contoh skewX() dan skewY()
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="kotak4">
Ini kotak4.contoh skewX
</div>
<div class="kotak5">
Ini kotak5.contoh skewX dengan nilai minus
</div>
<div class="kotak6">
Ini kotak6.contoh skewY
</div>
<div class="kotak7">
Ini kotak7.contoh skewY dengan nilai minus
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.kotak4{
margin:50px;
float:left;
background:yellow;
width:280px;
height:200px;
-ms-transform:skewX(20deg);/* Support untuk IE 9 */
-webkit-transform:skewX(20deg);/* support untuk Safari */
transform:skewX(20deg);/* default syntax */
}
.kotak5{
margin:50px;
float:left;
background:yellow;
width:280px;
height:200px;
-ms-transform:skewX(-20deg);/* Support untuk IE 9 */
-webkit-transform:skewX(-20deg);/* support untuk Safari */
transform:skewX(-20deg);/* default syntax */
}
.kotak6{
margin:50px;
float:left;
background:orange;
width:280px;
height:200px;
-ms-transform:skewY(30deg);/* Support untuk IE 9 */
-webkit-transform:skewY(30deg);/* support untuk Safari */
transform:skewY(30deg);/* default syntax */
}
.kotak7{
margin:50px;
float:left;
background:orange;
width:280px;
height:200px;
-ms-transform:skewY(-30deg);/* Support untuk IE 9 */
-webkit-transform:skewY(-30deg);/* support untuk Safari */
transform:skewY(-30deg);/* default syntax */
}
HASIL
Hasil dari skewX() dan skewY() di atas akan seperti berikut.
contoh skewX() dan skewY()
Penutup
Jadi, inti dari proses pembuatan bentuk jajar genjang menggunakan css3 ini ada pada perintah skew().
perintah skew() kita gunakan untuk membuat efek miring pada sebuah elemen. kemudian derajat kemiringan nya bisa kita isikan di dalam nya. misalnya skew(20deg), skew(50deg) dan sebagainya.
1
transform:skew(20deg);
atau
1
transform:skew(-20deg);
Kita juga bisa menerapkan perintah skew() pada elemen gambar. Silahkan melakukan latihan untuk lebih familiar dengan skew().
Berikut ini contoh keseluruhan dari tutorial Membuat Bentuk Jajar Genjang Dengan CSS3.
jajargenjang.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<title>Membuat Bentuk Jajar Genjang Dengan CSS3-www.malasngoding.com</title>
</head>
<body>
<style type="text/css">
.kotak1 {
background:red;
margin:50px;
width:200px;
height:200px;
float:left;
}
.kotak2 {
margin:50px;
background:green;
width:200px;
height:200px;
float:left;
-ms-transform:skew(20deg);/* Support untuk IE 9 */
-webkit-transform:skew(20deg);/* support untuk Safari */
transform:skew(20deg);/* default syntax */
}
.kotak3 {
margin:50px;
float:left;
background:blue;
width:280px;
height:200px;
-ms-transform:skew(20deg);/* Support untuk IE 9 */
-webkit-transform:skew(20deg);/* support untuk Safari */
transform:skew(20deg);/* default syntax */
}
.kotak4 {
margin:50px;
float:left;
background:yellow;
width:280px;
height:200px;
-ms-transform:skewX(20deg);/* Support untuk IE 9 */
-webkit-transform:skewX(20deg);/* support untuk Safari */
transform:skewX(20deg);/* default syntax */
}
.kotak5 {
margin:50px;
float:left;
background:yellow;
width:280px;
height:200px;
-ms-transform:skewX(-20deg);/* Support untuk IE 9 */
-webkit-transform:skewX(-20deg);/* support untuk Safari */
transform:skewX(-20deg);/* default syntax */
}
.kotak6 {
margin:50px;
float:left;
background:orange;
width:280px;
height:200px;
-ms-transform:skewY(30deg);/* Support untuk IE 9 */
-webkit-transform:skewY(30deg);/* support untuk Safari */
transform:skewY(30deg);/* default syntax */
}
.kotak7 {
margin:50px;
float:left;
background:orange;
width:280px;
height:200px;
-ms-transform:skewY(-30deg);/* Support untuk IE 9 */
-webkit-transform:skewY(-30deg);/* support untuk Safari */
Sekian dulu tentang tutorial jajar genjang css. sampai jumpa pada tutorial css3 selanjutnya.
Diki Alfarabi Hadi
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Cara Membuat Sliding Menu Dengan CSS3 dan jQuery – Halo web designer. selamat datang di tutorial cara membuat slide menu di www.malasngoding.com. pada tutorial ini ...
Cara Membuat Animasi Preloader Dengan CSS3 Cara Membuat Animasi Preloader Dengan CSS3 – Terima kasih sebelumnya saya ucapkan kepada teman-teman yang sudah membaca tutorial-turoial pemrograman ...
Cara Mengganti Warna Placeholder Dengan CSS Cara Mengganti Warna Placeholder Dengan CSS – apa kabar teman-teman sekalian. hehe.. semoga sehat selalu ya. bertemu lagi lewat ...
Membuat Efek Kertas Dengan CSS3 Membuat Efek Kertas Dengan CSS3 – Kembali lagi di tutorial css3 di www.malasngoding.com. seperti yang udah teman-teman lihat di blog ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.