Ahmad Faizin

"Sebarkan ilmu walau hanya satu ayat ^^"

Random Posts

Banner

Breaking

BitMiner - free and simple next generation Bitcoin mining software

Tuesday, 14 March 2017

Belajar CSS Part 6 Links

Belajar CSS Part 6 Links




Assalamualaikum Wr. Wb.


PENGERTIAN

Link adalah sebuah properti yang berfungsi untuk mengarahkan tulisan atau gambar tersebut bila diklik ke tempat atau tujuan yang telah ditentukan. 

LATAR BELAKANG

Mempelajari tentang memberikan gaya atau style ke dalam properti link, sehingga memiliki kesan yang lebih menarik.


MAKSUD & TUJUAN

Memberikan efek ke dalam properti link.
Menjadikan link seperti button.
Memberikan  efek hover ke dalam link.

ALAT & BAHAN
  • Text Editor
  • Browser


LANGKAH KERJA

Links di dalam CSS adalah sebuah properti yang berfungsi untuk memberikan style tertentu kepada link tersebut. Di dalam CSS links terdiri dari beberapa bagian:
  • Styling Links 
Properti ini berfungsi untuk memberikan style kepada link, seperti warna, font, dan juga efek. Properti ini menggunakan syntax-syntax berikut.

Untuk mengubah warna dan font pada link, bisa menggunakan perintah berikut.


Nb: Properti link disimbolkan dengan huruf "a" dan juga untuk mengarahkan link tersebut menggunakan attribute "href".  


Hasilnya akan terlihat seperti gambar di atas. Selanjutnya untuk memberikan efek saat kursor menyentuh link, menggunakan perintah berikut.


Nb : Untuk memberikan efek pada link ada 4, yaitu saat link belum dikunjungi (link), saat link pasif (visited), saat mouse di atas link (hover), dan saat link diklik oleh mouse (active). 


Di atas merupakan hasil dari efek link, untuk lebih jelasnya bisa anda coba dan buktikan.

  • Text Decoration
Text Decoration pada CSS link ini sama fungsinya dengan text decoration di dalam CSS text, hanya saja ini dalam bentuk link. Macam - macamnya juga sama yaitu sebagai berikut.
  • None
  • Underline
  • Overline
  • Line Through
Jadi properti ini berfungsi untuk memberikan efek garis tengah, garis atas, dan garis bawah. Kondisi saat link default biasanya ada efek garis bawahnya. untuk menghilangkannya bisa menggunakan properti ini dengan menggunakan attribute "none". Nah untuk lebih jelasnya anda bisa melihat contoh pada gambar di bawah ini.


Di atas merupakan contoh dari penulisan CSS linknya.


Hasilnya hampir sama dengan CSS text hanya saja ini berbentuk link sehingga hasilnya bisa diklik.

  • Background Color
Di dalam CSS links, background color ini berfungsi untuk memberikan warna latar belakang pada sebuah link. Contohnya sebagai berikut.


Properti ini menggunakan syntax "background-color" di dalam element "a".



Hasilnya bisa dilihat, tampak warna latar belakang dari link tersebut.

  • Links Button
Link button di dalam CSS berfungsi untuk membuat sebuah link dalam bentuk button, atau tombol. Untuk lebih jelasnya bisa anda lihat sendiri pada gambar di bawah ini.



Nb : Untuk pembuatan link button, anda cukup menambahkan attribute seperti display. Attribute ini berfungsi untuk menambahkan display atau layar pada link tersebut, selanjutnya atur ukurannya sesuai kehendak anda.


Hasilnya akan tampak seperti pada gambar di atas. Nah silahkan mencoba dan juga berkarya :D.

Sekian dari saya, bila ada kurang lebihnya mohon maaf,

Wassalamualaikum Wr. Wb.


Referensi




No comments:

Post a Comment

Adbox