CSS - Tutorial memberi efek pada link,teks,gambar

Assalamualaikum wr.wb

   Kali ini saya akan berbagi sedikit tentang bagaimana mengatur beberapa tampilan menggunakan CSS dengan mudah. saya akan menjelaskan terlebih dahulu pengertian - pengertiannya.

1. Latar Belakang
CSS merupakan rekomendasi untuk para web design untuk mengatur tampilan dari halaman , isi, menu dll. contoh untuk mengatur warna, tampilan , ukuran dll.

2. Tujuan
   Mengatur Text,Font,gambar menggunakan CSS

3. Pembahasan
1. Membuat warna pada teks yang ber-link
2. Mengatur gaya tertentu pada bagian dari elemen (teks baris
        pertama,huruf pertama baris pertama
    3. Mengatur Transparansi pada gambar / picture

1. Membuat warna pada link
     Link merupakan kata atau tulisan yang jika di klik akan menimbulkan atau membuat kita berpindah pada halatman lain. link dapat kita sambungkan pada teks,gambar atau simbol. perintah untuk mengawali membuat link menggunakan <a href> dan mengakhirinya dengan perintah </a>. dan di CSS ini kita akan merubah atau mengatur warna pada teks yang ber-link dengan perintah. yang berada pada daerah <style> dan </style> kita dapat memasukan perintahnya.

Untuk mengatur warna teks ber-link tampilan awal menggunakan

a:visited {
color: "......";
}

Untuk mengatur warna teks ber-link pada saat mouse mendekatii teks menggunakan

a:hover {
color: "......";
}

Untuk mengatur warna teks ber-link pada saat di-klik pada teks menggunakan

a:active {
color: "......";
}

Contoh :

Keterangan :

sintaxs <style> dan </style> merupakan tempat atau bagian yang digunakan saat kita akan memasukan perintah - perintah untuk mengatur style atau desain.
a : visited , a:hover , a : active merupakan perintah yang digunakan untuk :

           - Untuk mengatur warna teks ber-link tampilan awal menggunakan
           - Untuk mengatur warna teks ber-link pada saat mouse mendekatii teks
             menggunakan
           - Untuk mengatur warna teks ber-link pada saat di-klik pada teks
             menggunakan

Color : merupakan perintah yang digunakan untuk mengatur warna

Hasil

         Berikut diatas merupakan hasil dari perintah - perintah yang digunakan.
         ada beberapa hasil :
         1. Tampilan awal berwarna biru
         2. Saat cursor mendekati teks berwarna pink
         3. Saat di-klik teks akan berwarna hijau.

2. Mengatur gaya tertentu pada bagian dari elemen (teks baris
pertama,huruf pertama baris pertama.
Perintah - perintah tersebut juga teman - teman masukan pada bagian
    diantara <style> dan </style>.

Untuk mengatur teks baris pertama menggunakan perintah

        p::first-line {
        color: "......";
        font-variant: small-caps;
        }

Untuk mengatur huruf pertama pada teks baris pertama

p.intro::first-letter {
    color: "......";
    font-size:200%;
}

Contoh :

Mengatur teks baris pertama

Script

Hasil

Mengatur huruf pertama pada teks baris pertama

Script

Hasil

3. Mengatur Transparansi pada gambar / picture
Gambar pada web atau halaman blog memiliki arti atau bagian yang cukup penting karena gambar bisa mewakili dari keseluruhan atau sebagian halaman.
untuk menambah ketertarikan dari pembaca atau pengunjung gambar juga harus diberi style atau pengaturan yang mem-perindah tampilannya. saat ini saya akan berbagi tentang gambar yang diberi opacity atau transparasi.

Untuk mengatur blur atau opacity pada gambar sebelum kursor berada pada gambar menggunakan perintah .

     Keterangan :
          - img, merupakan variabel atau nama bagian yang akan diatur.
- opacity, pengaturan yang digunakan untuk mengatur blur , semakin
            rendah ukurannya maka akan semakin blur begitu sebaliknya semakin
            tinggi ukurannya maka akan semakin jelas efeknya.
          - filter ,pengaturan yang digunakan untuk memberikan kesan blur pada
            tampilan awal pada gambar.
   - hover, efek yang timbul akibat kursor.

4. Kesimpulan
Kesimpulannya adalah di CSS kita dapat mengatur efek dari teks,gambar dengan mengatur warna,opacity( transparasi ),style font dll. sesuai dengan kebutuhan untuk memperindah tampilan.

5. Referensi