HTML CSS Manual Daftar Isi
Ada yang butuh HTML dan CSS untuk bikin daftar isi? Berikut ini salah satu contohnya.
HTML
DAFTAR ISI
- PENDAHULUANix
-
Efek Judul Artikel Memudar di Ujung seperti Google Play
Artikel kali ini menjelaskan bagaimana cara membuat artikel yang di ujungnya atau akhir terlihat memudar atau semakin kabur dan menghilang. Saya temukan efek ini di halaman Google Play. Coba sobat perhatikan judul-judul aplikasi di halaman Google Play seperti yang terlihat dalam screenshot di bawah ini.
Saya tertarik dengan itu kemudian mempelajarinya. Efek memudar itu hanya menggunakan CSS
CSS Text-overflow: Ellipsis, Clip, String [Tiga titik di Akhir Teks]
div.test1 {border: 1px solid #000000;width:200px;background-color:#F1F1F1}
div.test2 {border: 1px solid #000000;width:200px;white-space: nowrap;background-color:#F1F1F1}
div.test3 {border: 1px solid #000000;white-space: nowrap;overflow: hidden;width:200px;background-color:#F1F1F1}
div.ellipsis {text-overflow: ellipsis;}
div.clip {text-overflow: clip;}
div.string {text-overflow: "...Next";}
Posting Layout Tiga Kolom dengan CSS Float
Hanya dengan CSS Float, kita bisa membuat artikel dengan layout tiga kolom. Jadi susunan artikel atau posting blog (elemen) yang tadinya tersusun dari atas ke bawah kini bisa dibuat menyamping. Sebelumnya sudah ada artikel yang saya buat serupa ini, silahkan kunjungi:Halaman Blogger Seperti Majalah atau Koran.
Kita mulai dengan menerapkan elemen-elemen
Kita mulai dengan menerapkan elemen-elemen
seperti ini:
Sebelum CSS Float
Sebelum CSS Float
Membuat Inline Help Tips hanya dengan CSS
Cara membuat inline help tips atau tooltip teks bantuan menggunakan HTML dan CSS. Tooltip ini akan membantu pengunjung mendapat penjelasan-penjelasan tanpa diarahkan ke halaman lain. Cukup meng-hover tooltip maka penjelasan-penjelasan akan tampil.
DEMO
Sudah tahu tooltip kan? Jika belum silahkan baca artikel: Membuat Tooltip Menggunakan CSS, Tooltip Sederhana Menggunakan jQuery.
Mula-mula
Membuat Banner Flash dengan CSS
Bagaimana cara membuat banner flash atau flash banner hanya dengan CSS? Ikuti langkah-langkah sederhana berikut. Artikel ini pesanan dari Adri Baraka Putra Arinda. Dia menanyakan cara membuat membuat banner seperti di JelasinBlog Blue Jeans.
Efek itu sebenarnya tidak menggunakan Flash melainkan hanya CSS3 @keyframes. Dengan aturan keyframes, Anda dapat membuat animasi. Animasi ini dibuat
Widget Label Blogger Warna-warni
Artikel ini menunjukkan cara menerapkan CSS agar Label Blogger menjadi warna-warni. Hal ini tentu akan mempercantik tampilan widget label blogger. Label akan memiliki warna background berbeda pada setiap link label tergantung dari warna yang kita terapkan di dalam CSS. Contohnya dapat Anda lihat pada blog ini atau perhatikan screenshot berikut.
Bagaimana membuat background label warna-warni?
Bagaimana membuat background label warna-warni?
Kumpulan Dropdown Menu tanpa JavaScript
Biasanya dropdown menu dibuat menggunakan JavaScript/jQuery. Padahal tanpa itupun dropdown menu (baik vertikal maupun horizonal) dapat diciptakan. Berikut ini saya salinkan untuk pembaca jelasinblog.blogspot.com beberapa contoh dropdown menu tanpa JavaScript.
Neoteric Dark Red
DEMO
HTML
Neoteric Dark Red
DEMO
HTML
Mudahnya Membuat Info Box
Anda tentu sering menemukan info box atau kotak informasi dalam artikel. Umumnya berbentuk sebuah kotak yang berisi kalimat-kalimat dan disampingnya ada icon sesuai kalimat. Misalnya, kalimat peringatan akan disandingkan dengan icon tanda seru (!). Info box dibuat untuk meminta perhatian, mempertegas maksud, atau memberi informasi tambahan, atau maksud-maksud lain sesuai keinginan pengelola
Cara Menggunakan :before dan :after
Apa arti :before dan :after?
:before dan :after dari bahasa Inggris, before artinya sebelum dan after artinya sesudah. :before digunakan untuk menambahkan elemen sebelum elemen utama, sedangkan :after digunakan untuk menambahkan elemen setelah elemen utama.
Atau saya bisa katakan, :before digunakan untuk menambahkan elemen di sebelah kiri elemen utama, sedangkan :after digunakan untuk
Membuat Comic Layout dengan CSS
Apa yang khas dari komik (comic)? Gambar dan dialog dalam bulatan-bulatan (speech bubbles). Seperti contoh comic di atas. Membuatnya cukup menggunakan CSS dan HTML saja, contoh sebagai berikut.
body {
background-color:#EFEFEF;
font-family:"Comic Sans MS", sans-serif;
line-height:1.2;
}
.laman-comic {
max-width:700px;
margin-left:20px
Efek Balik Gambar Ketika Hover
Pernah melihat efek gambar dibalik saat Anda meletakkan cursor (hover) di atas gambar tersebut? Tenyata menciptakan efek itu cukup menggunakan CSS saja, tanpa JavaScript. Anda hanya membutuhkan dua buah gambar berbeda. Satu gambar untuk bagian depan dan satu gambar lagi untuk bagian belakang. Efek bolak-balik diatur melalui CSS dengan properti transtition dan transformation.
Lihat demo di
Cara Memasang Font Awesome di Blogger
Font awesome berguna mengurangi penggunaan icon dalam bentuk gambar pada tampilan situs. Anda tidak perlu lagi repot-repot dan susah mencari atau mendesain icon gambar untuk kebutuhan tampilan tertentu di situs. Apa itu font awesome? Font awesome adalah font web yang berbentuk icon siap pakai untuk antarmuka web menggunakan pemanggil CSS, umumnya digunakan untuk Twitter Bootstrap. Ada ratusan
CSS Blockquote Membuka Otomatis
Banyak cara memodifikasi tampilan "blockquote", saya rasa Anda pernah menerapkannya di blog kesayangan Anda, misalnya menambahkan tanda kutip besar. Nah kali ini kita akan belajar memanfaatkan css transisi dan css pseudo classes untuk membuat blockuote yang akan terbuka dengan sendirinya saat di hover, ketika pointer di arahkan ke area elemen blockquote tersebut. Trik ini murni hanya efek hover
Membuat Judul pada Tag PRE
Pernah melihat blog yang menggunakan tag pre? Salah satunya adalah blog yang sedang Anda baca ini. Coba perhatikan tag pre-nya, terdapat judul dan warna latar berbeda sesuai kode. Bila kode CSS maka warna latar judulnya hijau, HTML warna latar judulnya merah, dst.
Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi Anda yang ingin menggunakan nya,
Penambahan judul otomatis ini biasanya sering digunakan pada tag PRE dengan Vanilla Style. Bagi Anda yang ingin menggunakan nya,
Ciptakan Efek Tajam dan Tipis pada Elemen
Border sering digunakan untuk mempertegas batas antar elemen. Sebagai contoh perhatikan menu dropdown berikut.
Menu Dropdown pada Bootstrap
Tampilannya terlihat sangat tajam dan dimensinya juga terlihat sangat tipis! Bagi Anda yang sudah terbiasa bekerja dengan aplikasi Photoshop dan sejenisnya mungkin tidak begitu asing dengan teknik untuk membuat efek seperti ini.
Menggunakan CSS untuk
Menu Dropdown pada Bootstrap
Tampilannya terlihat sangat tajam dan dimensinya juga terlihat sangat tipis! Bagi Anda yang sudah terbiasa bekerja dengan aplikasi Photoshop dan sejenisnya mungkin tidak begitu asing dengan teknik untuk membuat efek seperti ini.
Menggunakan CSS untuk
CSS Efek Glowing atau Berpendar
Seorang teman, Welson Oktario, bertanya kepada saya bagaimana cara membuat efek 'glow' pada header Yujikop.com. Yaitu sebuah efek glow atau efek berpendar ketika sebuah div atau elemen di :hover, dengan kata lain ketika Anda menyorot atau meletakkan pointer mouse pada sebuah elemen maka elemen itu nampak berpendar. Membuat efek ini mudah, cukup menggunakan CSS namun hasilnya terlihat bagus.
Menandai Komentar Admin dengan CSS
Penting menandai komentar admin blogger agar pengunjung dapat membedakan mana komentar admin dan mana yang bukan. Mungkin Anda pernah melihat ada yang menggunakan penanda dalam bentuk gambar di sudut bertuliskan "Admin", dan ada sebagian yang lain menggunakan jQuery.
Kali ini kita hanya akan menggunakan sebuah elemen dengan background sederhana yang diatur melalui CSS. Loadingnya tentu lebih
Membuat Tooltip Menggunakan CSS
Menambahkan tooltip ke dalam struktur template akan menambah daya tarik pembaca mengeksplorasi halaman web kita. Apa itu tooltip ? Tooltip adalah deskripsi pembantu saat seseorang menyorot link (hover) atau gambar yang sudah disertai tooltip didalamnya, sehingga deskripsi link atau gambar akan muncul.
Cara membuat tooltip menggunakan CSS
Login ke dashboard blogger Anda (pastilah hehe)
Klik
Efek Lipatan pada Sudut Elemen
Pernah melihat bentuk sudut elemen atau div yang dilipat? Lihat gambar di atas atau contoh di bawah ini. dibuat menggunakan CSS pseudo-elemen.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.
Subscribe to:
Posts (Atom)