bukan sekadar coretan
Creating Non-Rectangular Layouts with CSS Shapes In this excellent tutorial Sara Soueidan shows how to use the new and exciting CSS Shapes to create revolutionary creative layouts with ease.
Absolute Horizontal And Vertical Centering In CSS | Smashing Coding We’ve all seen margin: 0 auto; for horizontal centering, butmargin: auto; has refused to work for vertical centering… until now! But actually (spoiler alert!) absolute centering only requires a declared (variable) height and these styles: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } I’m…
Blueprint: On Scroll Effect Layout | Codrops An on scroll effect template that animates the sides of sections once they are in the viewport. VIEW DEMO DOWNLOAD SOURCE This Blueprint is a template for a on scroll effect layout. We’ve had some requests on how to achieve this effect of animating elements once they are in…
Making Sense Of Type Classification (Part 2) | Smashing Magazine In the first installment of this two-part series on type classification, we covered the basics of type classification — the various methods people have used, why they are helpful, and a brief survey of type history, classifying and identifying typefaces along the way. Unfortunately, we only got…
The State Of Responsive Web Design | Smashing Mobile Responsive Web design has been around for some years now, and it was a hot topic in 2012. Many well-known people such as Brad Frost and Luke Wroblewski have a lot of experience with it and have helped us make huge improvements in the field. Butthere’s…
50 Useful CSS Snippets Every Designer Should Have With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in…
Horizontal Slide Out Menu | Codrops A horizontal slide out menu with a grid-like thumbnail layout for the submenu. With media query examples for smaller devices. VIEW DEMO DOWNLOAD SOURCE A simple, horizontal slide out menu with a grid-like thumbnail layout for the submenu. The menu slides out from the top when a main menu item…
Product Grid Layout | Codrops A responsive product grid layout with some UI details for inspiration. VIEW DEMO DOWNLOAD SOURCE A responsive product grid layout that comes with some UI details for inspiration. The product will rotate showing the backside of the item when the rotate button is clicked. Some examples of how tooltips can appear…
Fixed Background Scrolling Layout | Codrops A fixed background image scrolling layout with 100% height panels and smooth scrolling. VIEW DEMO DOWNLOAD SOURCE A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. The page will scroll smoothly to the selected section.
Creating Content List Columns Using Entypo Font Icons | Design Shack There’s a general trend towards smaller “column listings” in homepage layouts. Specifically, tech startups and landing pages use this effect for promoting features in their products. But it’s a neat little design layout style for any purpose, and using icons in your design will…