Abaikan Jika Melihat Iklan Binary Options (Opsi Biner) pada Situs ini, Baca : Perbedaan Forex dengan Binary Options

Daftar Akun XM
image3

CSS Basic

Berikut adalah beberapa cara Penerapan Kode Dasar atau Syntax Umum pada CSS. yang selanjutnya bisa Kalian kembangkan sesuai Kreatifitas masing-masing :

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

BAGIKAN :



CONVERSATION

Daftar Akun XM