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.
The year ahead should be a really exciting one for design, with the introduction of wider support for SVG and a host of new things we can do with CSS as CSS4 gains broader acceptance. In taking a look back at what made a big splash this year, I hope you will be inspired to kick off 2017 with some fresh ideas and new inspiration as we look at design trends in 2016 and what to expect in 2017.
Getting content to center perfectly within an element and then ensuring it responds properly at different screen sizes is one of the biggest challenges that still face front-end designers. It is not that it is difficult, but because there are several ways to go about it, figuring out which method is best can be confusing. Many CSS vertical centering methods force you to write even more code to solve problems the rules create elsewhere, or need media queries to get it to work well at all screen sizes. Understanding how each method works differently and is affected by things like the HTML, browser default style rules and screen size will help you make better decisions and write better code in the long run.
The temptation to dive right into new and exciting CSS tricks is strong – you might even do it without knowing it through learning by example or implementing that hot new framework everyone is talking about. It is more important to fully understand new CSS classes and properties, experiment with them and learn their limitations before putting them into practice, especially when working on commercial projects. In this article I’ll cover some common CSS mishaps and pitfalls of newer techniques to help you make informed decisions when building your stylesheets.
Fonts took on a revival in handmade styles this year, from calligraphic, script and handwritten to brush painted and block-printed. Combined with the great visual appeal of hero images and typographic layouts in web design, handwriting fonts are a trend that you can expect to see more of. In this article you’ll find a fresh and varied selection of high quality free fonts, each as lovely and flexible as their premium counterparts. Each includes scripts, serifs, and a range of ligatures and was chosen for their readability, impact and flavor.
One of the challenges of coding premium WordPress themes is the unpredictable nature of how they will be used. Compared to coding a custom website, especially one using static HTML documents where you have complete control over the markup, you have to solve problems creatively and ensure flexibility. In these cases, CSS selectors make all the difference.