design Archives

4Jun

By Carrie CousinsNo Comments

Web Tricks

3 Essential Design Trends, June 2018

Sometimes the most fun part of looking at design trends is when you start to notice subtle shifts in trends that create new design patterns altogether. Each of the trends this month is an evolution of something that’s been pretty popular, with an interesting spin. Here’s what’s trending in design this month: 1. Full Screen Photo The oversized hero image gets even bigger with full-screen photo displays. The key element in this website design trend is that the home “screen” is stripped of other elements so that the photo fills the entire screen. There aren’t separate space for navigation or other elements outside the image area. All elements are actually contained within the image. This design concept works best with a great image. Only the best, most striking and interestin...

The State of Changing Gradients with CSS Transitions and Animations

1Jun

By Ana TudorNo Comments

CSS Tricks

The State of Changing Gradients with CSS Transitions and Animations

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future. Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And while animating background-size or background-position or the opacity or rotation of a pseudo element layered on top can take us a long way in terms of achieving cool effects, these workarounds are still limited. There are effects we cannot reproduce without adding lots of extra elements or lots of extra gradients, such as "the bli...

1Jun

By phpInfoNo Comments

Web Tricks

A Reference Guide For Typography In Mobile Web Design

With mobile taking a front seat in search, it's important that websites are designed in a way that prioritize the best experience possible for their users. While Google has brought attention to elements like pop-ups that might disrupt the mobile experience, what about something as seemingly simple as choice of typography? The answer to the typography question might seem simple enough: what works on desktop should work on mobile so long as it scales well. Right? While that would definitely make it a lot easier on web designers, that’s not necessarily the case. The problem in making that statement a decisive one is that there haven’t been a lot of studies done on the subject of mobile typography in recent years. So, what I intend to do today is give a brief summary of what it i...

Forms, Auth and Serverless Functions on Gatsby and Netlify

31May

By Maxime Laboissonni reNo Comments

CSS Tricks

Forms, Auth and Serverless Functions on Gatsby and Netlify

Abstracting infrastructure is in our DNA. Roads, schools, water supply networks—you get the idea. Web development is no exception: serverless architectures are a beautiful expression of that phenomenon. Static sites, in particular, are turning into dynamic, rich experiences. Handling static forms, authentication, and backend functions on statically-generated sites is now a thing. Especially with the JAMstack pioneer platform that is Netlify. Recently, they announced support of AWS Lambda functions on front-end-centric sites and apps. I've been meaning to dive into their "backend" features since. Today, I'm doing just that, using a static Gatsby site, Netlify's Forms, Identity, and Functions features. This tutorial will show you how to: Add static forms to your site Ad...