There are hundreds of ways to create responsive navigation, limited only by your creativity and the boundaries of what CSS can accomplish. Good responsive navigation is a little harder – a responsive menu must become a mobile menu, adhering to the needs and rules of touch-driven devices. Mobile design is rapidly changing, and so the techniques also evolve. In this tutorial you’ll learn which qualities mobile-friendly responsive menus absolutely need nowadays and how you can solve some common problems.
CSS Transitions and transforms work beautifully for creating visual interactions based on single state changes. To have more control over what happens and when, you can use the CSS animation property to create easy CSS animation using @keyframes. This technique has a wide range of design application and can be used to build dazzling pre-loaders, interactive interfaces, effects or full-scale storytelling. In this tutorial you’ll learn how to apply what you know about CSS transitions to quickly master animation, and how to use @keyframes for applying various style rules to your element at different intervals.
Last week I demonstrated how to build a split-screen website layout using CSS flexbox and viewport units that offers an alternative way to present a brand’s featured content. Clicking on one side or the other navigates further into the site without a page load, using CSS transitions and 3d transforms. This week, I’ll show you how to use these same techniques to add animation and movement to the content and buttons.
There is no better time than the end of the year for some fresh inspiration! One of the most popular trends this year, features splitscreen layouts, lots of white space, clean typography and subtle effects. With this playful trend in mind, I’ve created a two-part tutorial to show you how to use flexbox, 3D transforms and Animate.css to create a delightful landing page for a fictional fashion brand.
Hero headers or hero images are one of the most frequently used and aesthetically pleasing web design trends in 2016, and will likely remain strong for a few years to come. The term “hero” is often interchanged with “jumbo” and refers to full-width graphics or photos seen at the top of a post or page, like you see in?this one! There are several ways to use a hero image in web design, from full-screen backgrounds to simply adding visual element?to the page’s content.