CSS Basic
Berikut adalah beberapa cara Penerapan Kode Dasar atau Syntax Umum pada CSS. yang selanjutnya bisa Kalian kembangkan sesuai kreatifitas masing-masing :
Untuk Daftar Kode Warna CSS Silahkan Klik DISINI
BORDER STYLE
| STYLE | SYNTAX | CONTOH | HASIL |
|---|---|---|---|
| Solid Border | border: ketebalan model warna; | <div style="border: 2px solid #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Dotted Border | border: ketebalan model warna; | <div style="border: 2px dotted #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Dashed Border | border: ketebalan model warna; | <div style="border: 2px dashed #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Groove Border | border: ketebalan model warna; | <div style="border: 2px groove #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Ridge Border | border: ketebalan model warna; | <div style="border: 2px ridge #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Inset Border | border: ketebalan model warna; | <div style="border: 2px inset #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Outset Border | border: ketebalan model warna; | <div style="border: 2px outset #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
BORDER POSITION
| STYLE | SYNTAX | CONTOH | HASIL |
|---|---|---|---|
| Border Top | border-top: ketebalan model warna; | <div style="border-top: 2px solid #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Border Right | border-right: ketebalan model warna; | <div style="border-right: 2px solid #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Border Bottom | border-bottom: ketebalan model warna; | <div style="border-bottom: 2px solid #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Border Left | border-left: ketebalan model warna; | <div style="border-left: 2px solid #fff; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
BORDER RADIUS
| STYLE | SYNTAX | CONTOH | HASIL |
|---|---|---|---|
| Border Radius All | border: ketebalan model warna; border-radius: besar lengkungan semua sisi; | <div style="border: 2px solid #fff; border-radius: 10px; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Border Radius Top Left | border: ketebalan model warna; border-radius: atas kiri atas kanan bawah kanan bawah kiri; | <div style="border: 2px solid #fff; border-radius: 10px 0px 0px 0px; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Border Radius Top Right | border: ketebalan model warna; border-radius: atas kiri atas kanan bawah kanan bawah kiri; | <div style="border: 2px solid #fff; border-radius: 0px 10px 0px 0px; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Border Radius Bottom Right | border: ketebalan model warna; border-radius: atas kiri atas kanan bawah kanan bawah kiri; | <div style="border: 2px solid #fff; border-radius: 0px 0px 10px 0px; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Border Radius Bottom Left | border: ketebalan model warna; border-radius: atas kiri atas kanan bawah kanan bawah kiri; | <div style="border: 2px solid #fff; border-radius: 0px 0px 0px 10px; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
BOX SHADOW
| STYLE | SYNTAX | CONTOH | HASIL |
|---|---|---|---|
| Top Left Shadow | box-shadow: -horizontal -vertical blur spread #warna shadow; | <div style="background: #ff6600; box-shadow: -3px -3px 3px 0px #fff; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Top Right Shadow | box-shadow: horizontal -vertical blur spread #warna shadow; | <div style="background: #ff6600; box-shadow: 3px -3px 3px 0px #fff; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Bottom Right Shadow | box-shadow: horizontal vertical blur spread #warna shadow; | <div style="background: #ff6600; box-shadow: 3px 3px 3px 0px #fff; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Bottom Left Shadow | box-shadow: -horizontal vertical blur spread #warna shadow; | <div style="background: #ff6600; box-shadow: -3px 3px 3px 0px #fff; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Full Shadow | box-shadow: horizontal vertical blur spread #warna shadow; | <div style="background: #ff6600; box-shadow: 0px 0px 3px 3px #fff; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
TEXT SHADOW
| STYLE | SYNTAX | CONTOH | HASIL |
|---|---|---|---|
| Top Left Shadow | text-shadow: -vertical -horizontal blur #warna shadow; | <div style="background: #ff6600; font-size: 20px; text-shadow: -2px -2px 1px #4d4d4d; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Top Shadow | text-shadow: vertical -horizontal blur #warna shadow; | <div style="background: #ff6600; font-size: 20px; text-shadow: 0px -2px 1px #4d4d4d; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Top Right Shadow | text-shadow: vertical -horizontal blur #warna shadow; | <div style="background: #ff6600; font-size: 20px; text-shadow: 2px -2px 1px #4d4d4d; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Bottom Right Shadow | text-shadow: vertical horizontal blur #warna shadow; | <div style="background: #ff6600; font-size: 20px; text-shadow: 2px 2px 1px #4d4d4d; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Bottom Shadow | text-shadow: vertical horizontal blur #warna shadow; | <div style="background: #ff6600; font-size: 20px; text-shadow: 2px 0px 1px #4d4d4d; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
| Bottom Left Shadow | text-shadow: vertical horizontal blur #warna shadow; | <div style="background: #ff6600; font-size: 20px; text-shadow: 2px 2px 1px #4d4d4d; color: #fff; padding: 15px 30px;">CONTOH</div> |
CONTOH
|
BACKGROUND STYLE
| STYLE | SYNTAX | CONTOH | HASIL |
|---|---|---|---|
| Solid Color | background: #kode warna; | <span style="background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Top Gradients | background: linear-gradient (to top, kode warna 1, kode warna 2); | <span style="background: linear-gradient (to top, #ff6600, #ffea00); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Top Left Gradients | background: linear-gradient (to top left, kode warna 1, kode warna 2); | <span style="background: linear-gradient (to top left, #ff6600, #ffea00); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Top Right Gradients | background: linear-gradient (to top right, kode warna 1, kode warna 2); | <span style="background: linear-gradient (to top right, #ff6600, #ffea00); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Right Gradients | background: linear-gradient (to right, kode warna 1, kode warna 2); | <span style="background: linear-gradient (to right, #ff6600, #ffea00); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Bottom Gradients | background: linear-gradient (to bottom, kode warna 1, kode warna 2); | <span style="background: linear-gradient (to bottom, #ff6600, #ffea00); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Bottom Right Gradients | background: linear-gradient (to bottom right, kode warna 1, kode warna 2); | <span style="background: linear-gradient (to bottom right, #ff6600, #ffea00); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Bottom Left Gradients | background: linear-gradient (to bottom left, kode warna 1, kode warna 2); | <span style="background: linear-gradient (to bottom left, #ff6600, #ffea00); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Left Gradients | background: linear-gradient (to left, kode warna 1, kode warna 2); | <span style="background: linear-gradient (to left, #ff6600, #ffea00); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Multiple Gradients | background: linear-gradient (to right, kode warna 1, kode warna 2, kode warna 3, dst...); | <span style="background: linear-gradient (to right, #ff6600, #ffea00, #00ffae); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Radial Gradients | background: radial-gradient (kode warna 1, kode warna 2, kode warna 3, dst...); | <span style="background: radial-gradient (#ff6600, #ffea00, #00ffae); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Circle Radial Gradients | background: radial-gradient (circle, kode warna 1, kode warna 2, kode warna 3, dst...); | <span style="background: radial-gradient (circle, #ff6600, #ffea00, #00ffae); color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Full Images | background-image: url(url gambar); background-size: cover; | <span style="background-image: url(http://bit.do/ewR6J); background-size: cover; color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Top Left Images | background-image: url(url gambar); background-position: top left; | <span style="background-image: url(http://bit.do/ewR6J); background-position: top left; color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Top Right Images | background-image: url(url gambar); background-position: top right; | <span style="background-image: url(http://bit.do/ewR6J); background-position: top right; color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Bottom Right Images | background-image: url(url gambar); background-position: bottom right; | <span style="background-image: url(http://bit.do/ewR6J); background-position: bottom right; color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
| Bottom Left Images | background-image: url(url gambar); background-position: bottom left; | <span style="background-image: url(http://bit.do/ewR6J); background-position: bottom left; color: #fff; padding: 15px 30px;">CONTOH</span> | CONTOH |
Untuk Daftar Kode Warna CSS Silahkan Klik DISINI
CURSOR HOVER STYLE
| STYLE | SYNTAX | CONTOH | HASIL |
|---|---|---|---|
| Default | cursor: default; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: default;" href="#">HOVER ME</a> | HOVER ME |
| Hand | cursor: hand; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: hand;" href="#">HOVER ME</a> | HOVER ME |
| Pointer | cursor: pointer; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: pointer;" href="#">HOVER ME</a> | HOVER ME |
| Crosshair | cursor: crosshair; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: crosshair;" href="#">HOVER ME</a> | HOVER ME |
| Move | cursor: move; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: move;" href="#">HOVER ME</a> | HOVER ME |
| All Scroll | cursor: all-scroll; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: all-scroll;" href="#">HOVER ME</a> | HOVER ME |
| Help | cursor: help; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: help;" href="#">HOVER ME</a> | HOVER ME |
| Not Allowed | cursor: not-allowed; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: not-allowed;" href="#">HOVER ME</a> | HOVER ME |
| Wait | cursor: wait; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: wait;" href="#">HOVER ME</a> | HOVER ME |
| Progress | cursor: progress; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: progress;" href="#">HOVER ME</a> | HOVER ME |
| Text | cursor: text; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: text;" href="#">HOVER ME</a> | HOVER ME |
| Vertical Text | cursor: vertical-text; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: vertical-text;" href="#">HOVER ME</a> | HOVER ME |
| N-Resize | cursor: n-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: n-resize;" href="#">HOVER ME</a> | HOVER ME |
| S-Resize | cursor: s-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: s-resize;" href="#">HOVER ME</a> | HOVER ME |
| NE-Resize | cursor: ne-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: ne-resize;" href="#">HOVER ME</a> | HOVER ME |
| SW-Resize | cursor: sw-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: sw-resize;" href="#">HOVER ME</a> | HOVER ME |
| E-Resize | cursor: e-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: e-resize;" href="#">HOVER ME</a> | HOVER ME |
| W-Resize | cursor: w-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: w-resize;" href="#">HOVER ME</a> | HOVER ME |
| SE-Resize | cursor: se-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: se-resize;" href="#">HOVER ME</a> | HOVER ME |
| NW-Resize | cursor: nw-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: nw-resize;" href="#">HOVER ME</a> | HOVER ME |
| Col-Resize | cursor: col-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: col-resize;" href="#">HOVER ME</a> | HOVER ME |
| Row-Resize | cursor: row-resize; | <a style ="background: #ff6600; color: #fff; padding: 8px; border-radius: 5px; cursor: row-resize;" href="#">HOVER ME</a> | HOVER ME |