Cara menggunakan css3

Saat berselancar di internet, Anda sebenarnya sedang mengakses atau membuka situs web (halaman web). Website itu sendiri adalah sebuah dokumen yang diakses melalui internet menggunakan web browser dengan mengetikkan URL atau mengklik link website tersebut. Ada dua teknologi utama untuk membuat website, yaitu HTML dan CSS. Keduanya memiliki peran yang berbeda namun tidak dapat dipisahkan dalam pembuatan website modern

Untuk sebuah website, HTML bertugas untuk menentukan struktur dan jenis konten seperti paragraf, heading, list dan gambar, sedangkan CSS lebih pada menyajikan struktur dan konten agar lebih menarik seperti tata letak, warna, margin, padding, font -keluarga dan keselarasan. Tanpa CSS, Anda tetap bisa menampilkan konten pada website namun dengan tampilan yang tidak menarik

Baca artikel Cara Menulis atau Sintaks CSS

CSS dirancang untuk digunakan dengan HTML. Ada tiga cara berbeda untuk menggunakan CSS dengan HTML, yaitu inline CSS, internal CSS, dan eksternal CSS. Tergantung kebutuhan, ketiga cara penggunaan CSS ini bisa digunakan dalam membuat website. Berikut penjelasan singkat masing-masing cara penggunaan CSS dengan HTML

Baca artikel

1. CSS sebaris

CSS sebaris digunakan untuk memberi gaya pada tag atau elemen HTML tertentu. Anda dapat menggunakan atribut style untuk memberi gaya pada tag HTML. Gaya hanya berlaku untuk tag HTML. Style pada inline css memiliki prioritas utama dan akan digunakan (rendering) walaupun tag html juga sudah di style melalui internal css atau external css

Penggunaan inline CSS sebenarnya tidak disarankan karena setiap tag HTML perlu diberi style tersendiri. Saat Anda mengubah gaya di salah satu tag, untuk mendapatkan gaya yang konsisten, Anda juga perlu mengubah gaya di tag lainnya. Misal semua h1 berwarna merah, ketika ingin mengubah h1 menjadi hijau, maka perlu mengubah style di semua h1 satu per satu menjadi hijau

Berikut ini adalah contoh kode sederhana

Menggunakan CSS Dengan HTML

Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.

2. CSS dalam

CSS internal digunakan untuk memberikan gaya yang hanya berlaku untuk satu situs web. Gaya yang diberikan dikelilingi oleh tag

Berikut ini adalah contoh kode sederhana

   



Menggunakan CSS Dengan HTML

Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.

3. CSS eksternal

CSS eksternal adalah ekstensi file. css yang hanya berisi kode gaya. Tujuan penggunaan CSS eksternal adalah untuk memisahkan kode gaya dari struktur dan tipe konten situs web. CSS eksternal dapat diterapkan pada lebih dari satu website sehingga semua website akan memiliki tampilan atau desain yang seragam

Misalnya, buat file CSS bernama cssexternal. css menggunakan editor teks biasa seperti Notepad atau Notepad++. Tulis kode CSS di bawah ini sebagai gaya yang akan diterapkan di situs web. Simpan file CSS di folder yang sama tempat Anda menyimpan file HTML

body {background-color:yellow;}
h2 {color:red;}
p {color:blue;}

Buat file HTML dan di bagian tag tambahkan tautan atau elemen tag. Tagini akan digunakan untuk merujuk ke file CSS yang dibuat sebelumnya. Perhatikan tulisan dan atributnya untuk merujuk ke file CSS

Berikut ini adalah contoh kode sederhana

Menggunakan CSS Dengan HTML

Ada dua teknologi utama dalam pembuatan web modern yaitu CSS dan HTML. Keduanya mempunyai peran berbeda namun tidak terpisahkan. Secara umum, ada tiga cara menggunakan CSS dengan HTML yaitu inline CSS, internal CSS dan external CSS.

Ketiga cara penggunaan CSS dengan HTML di atas menghasilkan tampilan website yang persis seperti gambar di bawah ini

Pada tutorial sebelumnya kita sudah mempelajari Tutorial Belajar CSS Part 28. Cara Mengatur Box Sizing di CSS, selanjutnya kita akan belajar cara menggunakan filter di CSS

Dalam tutorial ini kita akan membahas efek filter yang diperkenalkan di CSS3 yang dapat Anda gunakan untuk memberikan efek visual seperti blur, menyeimbangkan kontras atau kecerahan, saturasi warna, dll.

Efek filter dapat diterapkan ke elemen menggunakan properti filter CSS3, yang menerima satu atau lebih fungsi filter dalam urutan yang disediakan

filter. mengaburkan(). kecerahan(). kontras(). bayangan jatuh(). skala abu-abu(). rona-putar(). membalikkan(). kegelapan(). sepia (). jenuh(). url();

Pengingat. Efek filter CSS3 saat ini tidak didukung di semua versi Internet Explorer. Versi IE yang lebih lama mendukung properti filter non-standar untuk membuat efek seperti opasitas, tetapi fitur ini tidak lagi digunakan

Efek kabur

Photoshop seperti efek Gaussian Blur dapat diterapkan ke elemen menggunakan fungsi blur(). Fungsi ini menerima nilai panjang CSS sebagai parameter yang menentukan radius buram

Nilai yang lebih besar akan membuat gambar lebih buram. Jika tidak ada parameter yang diberikan, gunakan nilai 0

<style>
img.blur {
    -webkit-filter: blur(2px); /* Chrome, Safari, Opera */
    filter: blur(2px);
}
img.extra-blur {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Sesuaikan Kecerahan Gambar

Fungsi kecerahan () dapat digunakan untuk mengatur kecerahan gambar. Nilai 0% akan menghasilkan gambar yang benar-benar hitam, nilai 100% atau 1 akan membuat gambar tidak berubah. Nilai lainnya adalah pengganda linier pada efeknya

Anda juga dapat mengatur kecerahan lebih tinggi dari 100% yang menghasilkan gambar lebih terang. Jika parameter jumlah tidak ada, nilai 1 biasanya digunakan

Nilai negatif tidak diperbolehkan

<style>
img.bright {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
img.dark {
    -webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
    filter: brightness(50%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Catatan. Fungsi filter yang mengambil nilai yang dinyatakan sebagai tanda persen (misalnya 75%) juga menerima nilai yang dinyatakan sebagai desimal (misalnya 0,75). Jika nilainya tidak valid, fungsi tidak akan memberikan efek filter apa pun

Menyesuaikan Kontras Gambar

Fungsi kontras () digunakan untuk mengatur kontras gambar. Nilai 0% akan menghasilkan gambar yang benar-benar hitam, nilai 100% atau 1 akan membuat gambar tidak berubah

Nilai di atas 100% juga diperbolehkan yang memberikan hasil kurang kontras. Jika parameter jumlah hilang atau dihilangkan, gunakan nilai 1

<style>
img.bright {
    -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
    filter: contrast(200%);
}
img.dim {
    -webkit-filter: contrast(50%); /* Chrome, Safari, Opera */
    filter: contrast(50%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Menambahkan Drop Shadow ke Gambar

Anda dapat menggunakan fungsi drop-shadow() untuk menerapkan efek drop shadow ke gambar seperti di Photoshop. Fungsi ini mirip dengan properti box-shadow

<style>
img.shadow {
    -webkit-filter: drop-shadow(2px 2px 4px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(2px 2px 4px orange);
}
img.shadow-large {
    -webkit-filter: drop-shadow(4px 4px 10px orange); /* Chrome, Safari, Opera */
    filter: drop-shadow(4px 4px 10px orange);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Catatan. Parameter pertama dan kedua dari fungsi drop-shadow() menentukan offset bayangan secara horizontal dan vertikal, sedangkan parameter ketiga menentukan radius keburaman dan parameter terakhir menentukan warna bayangan, seperti halnya properti box-shadow , dengan satu pengecualian, kata kunci 'inset' tidak diperbolehkan

Mengkonversi Gambar ke Grayscale

Gambar dapat diubah menjadi grayscale menggunakan fungsi grayscale(). Nilai 100% benar-benar abu-abu. Nilai 0% membuat gambar tidak berubah. Nilai antara 0% dan 100% adalah pengganda linier pada efeknya. Jika parameter jumlah tidak ada, gunakan nilai 0

<style>
img.complete-gray {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
img.partial-gray {
    -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
    filter: grayscale(50%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Menerapkan Hue Rotate ke Gambar

Fungsi hue-rotate() menerapkan rotasi rona pada gambar. Parameter yang dilewatkan menentukan jumlah derajat di sekitar lingkaran warna yang akan disesuaikan dengan sampel gambar. Nilai 0 derajat membuat gambar tidak berubah. Jika parameter 'sudut' tidak ada, nilai 0 deg digunakan. Tidak ada nilai maksimal, pengaruh nilai di atas 360 derajat

<style>
img.hue-normal {
    -webkit-filter: hue-rotate(150deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(150deg);
}
img.hue-wrap {
    -webkit-filter: hue-rotate(480deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(480deg);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Efek Balik

Efek invert seperti Photoshop dapat diterapkan pada gambar dengan fungsi invert(). Nilai 100% atau 1 gambar terbalik sepenuhnya, nilai 0% membuat input tidak berubah

Nilai antara 0% dan 100% adalah pengganda linier pada efeknya. Jika parameter 'jumlah' tidak ada, nilai 0 digunakan. Nilai negatif tidak diperbolehkan

<style>
img.partially-inverted {
    -webkit-filter: invert(80%); /* Chrome, Safari, Opera */
    filter: invert(80%);
}
img.fully-inverted {
    -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
    filter: invert(100%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Menerapkan Opacity ke Gambar

Fungsi opacity() dapat digunakan untuk menerapkan transparansi pada gambar. Nilai 0% benar-benar transparan, nilai 100% atau 1 membuat gambar tidak berubah

Nilai antara 0% dan 100% adalah pengganda linier pada efeknya. Jika parameter 'jumlah' tidak ada, gunakan nilai 1. Fungsi ini mirip dengan properti opacity

<style>
img.transparent {
    -webkit-filter: opacity(80%); /* Chrome, Safari, Opera */
    filter: opacity(80%);
}
img.highly-transparent {
    -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
    filter: opacity(30%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Terapkan Efek Sepia ke Foto

Fungsi sepia() mengubah gambar menjadi sepia. Nilai 100% atau 1 sama sekali sepia, nilai 0% membuat gambar tidak berubah

Nilai antara 0% dan 100% adalah pengganda linier pada efeknya. Jika parameter 'jumlah' tidak ada, gunakan nilai 0

<style>
img.complete-sepia {
    -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
    filter: sepia(100%);
}
img.partial-sepia {
    -webkit-filter: sepia(30%); /* Chrome, Safari, Opera */
    filter: sepia(30%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Nasihat. Dalam istilah fotografi, toning sepia adalah perlakuan khusus untuk memberikan foto hitam-putih tekanan yang lebih hangat (coklat kemerahan) untuk meningkatkan kualitas arsip.

Sesuaikan Saturasi Gambar

Fungsi saturate() dapat digunakan untuk mengatur saturasi gambar. Nilai 0% tidak jenuh sama sekali, nilai 100% membuat gambar tidak berubah

Nilai lainnya adalah pengganda linier pada efeknya. Nilai total lebih dari 100% juga diperbolehkan, memberikan hasil yang sangat jenuh. Jika parameter 'jumlah' tidak ada, gunakan nilai 1

<style>
img.un-saturated {
    -webkit-filter: saturate(0%); /* Chrome, Safari, Opera */
    filter: saturate(0%);
}
img.super-saturated {
    -webkit-filter: saturate(200%); /* Chrome, Safari, Opera */
    filter: saturate(200%);
}
/* Kode CSS untuk mempercantik contoh*/
table td{
    padding: 10px;
    text-align: center;
}
</style>

CodePen Embed FallbackCodePen Embed Fallback

Catatan. Fungsi url() menentukan referensi filter ke elemen filter tertentu. Misalnya, url (commonfilters. svg#foo). Jika filter mereferensikan elemen yang tidak ada atau elemen yang direferensikan bukan elemen filter, seluruh rangkaian filter akan diabaikan. Tidak ada filter yang diterapkan ke elemen