Jasa Pembuatan Program di Bali, Menyediakan Jasa Pembuatan Program Dengan Alur dan Fitur sesuai Kebutuhan Bisnis Anda.

CSS Basic

BORDER STYLE
STYLE SYNTAX CONTOH HASIL
Solid Border border: ketebalan model warna; <div style="border: 2px solid #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Dotted Border border: ketebalan model warna; <div style="border: 2px dotted #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Dashed Border border: ketebalan model warna; <div style="border: 2px dashed #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Groove Border border: ketebalan model warna; <div style="border: 2px groove #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Ridge Border border: ketebalan model warna; <div style="border: 2px ridge #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Inset Border border: ketebalan model warna; <div style="border: 2px inset #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Outset Border border: ketebalan model warna; <div style="border: 2px outset #5d5d5d; 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 #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Border Right border-right: ketebalan model warna; <div style="border-right: 2px solid #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Border Bottom border-bottom: ketebalan model warna; <div style="border-bottom: 2px solid #5d5d5d; background: #ff6600; color: #fff; padding: 15px 30px;">CONTOH</div>
CONTOH
Border Left border-left: ketebalan model warna; <div style="border-left: 2px solid #5d5d5d; 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 #5d5d5d; 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 #5d5d5d; 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 #5d5d5d; 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 #5d5d5d; 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 #5d5d5d; 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 #4d4d4d; 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 #4d4d4d; 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 #4d4d4d; 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 #4d4d4d; 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 #4d4d4d; 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


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

Sumber : martinrio.com

SHARE :