Make Corner Stuff With CSS

Dahulu ketika awal-awal ngeblog, ketika berkunjung ke blogsite orang kalian pasti sering bertanya bagaimana cara melakukan/bikin seperti itu :D Mungkin masih ingat salah satu tutorial yang cukup fenomenal yaitu trik membuat segala ada di pojok! Biasanya dipasangin gambar bergerak untuk menarik para pengunjung ;)) Karena sekarang sudah ada CSS 3 hal itu bisa dikembangkan lagi menjadi lebih keren b-) AA Koben ingin berbagi cara membuat template-corner (original source) or corner_stuff (modification)

Gua dapetin dari codepen.io dengan nick account Sean Codes! Berikut beberapa karyanya:

• Recursive Hover Nav (Only CSS)
• MacOS Dock with CSS!
• Floating Nav to Top Fix Expand v2
• Split Text Menu
• VVVVV
• Show Hide

Perhatikan pojok kanan atas dan pojok kiri bawah ada sesuatu! Berikut ini adalah ramuan bumbu kode CSS yg musti sobat pasangkan pada template.

Buka link berikut dan ambil kode CSS Corner Stuff.
Syntax HTML

<div class="corner_stuff corner_top corner_right"> 
  <div class="corner_title">sean codes <i class="corner_icon">❓</i></div>
  <div class="corner_links"><a class="corner_link"><span><small>Hi! Nice to meet you! <i></i></small></span></a><a class="corner_link" href="//instagram.com/beben.koben" target="_blank"><span><i></i> instagram</span></a><a class="corner_link" href="//codepen.io/beben-koben" target="_blank"><span><i></i> codepen</span> </a><a class="corner_link" href="https://github.com/beben-koben" target="_blank"><span><i></i> github</span> </a></div>
</div>
<div class="corner_stuff corner_bottom corner_left corner_small">
  <div class="corner_title" onclick="window.location=window.location">reload <i class="corner_icon></i></div>
</div>

Bonus top

Lightbox Gallery Hover Effect - Visual Studio Code in React with working closing opened file - CSS Line Counter - HTML Kitchen-sink - SVG Text Portrait - Chrome desktop theme-color - Preload Images - Animation Border - Period1K - JS1K 2016 Entry - Live Screen Effect using matrix3d() - Komische Uhr - Share Modal Without Javascript (checkbox hack) - Multi-level Side Nav Menu - [CSS] Elastic menu - Increase Font Size with CSS Variables - Menu Animations (CSS Only) - c(ss)arousel - pure CSS carousels 🎪🐎🎪🐎🎪🐎 - JQ | Image Gallery Layout (JSON & Infinite Scroll) - Pure CSS Flip Card - [SCSS] Snow box-shadow no image, no js

Tools terbaru

Emojiers - The ultimate free Emoji database! - Screenshot Bin | API for Website Screenshots & Thumbnails - CSS Gradient

Bye :-h