CSS Tricks Archives - Page 17 of 17

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...

31May

By Nicholas CerminaraNo Comments

CSS Tricks, Web Tricks

Build Multiple Stacking Sticky Sidebars with Pure CSS and Bootstrap 4

Making high performant, pure CSS sticky sidebars that stack with Bootstrap 4. This will be a quick and pretty cool tutorial on a neat trick on how to have multiple sticky sidebars that stack without using any JavaScript! I figured this out the other day brain storming ideas with @chrisoncode for the new Scotch website sidebar. As fun and cool as JavaScript is, it's just not as snappy and way more bloated than say a pure CSS implementation of stuff like this (which is one of our main goals for our Scotch.io redesign). In this tutorial I will discuss: What the heck I mean by this mouthful: "Multiple Stacking Sticky Sidebars. Reasons that you would want to do this. General beefs devs have with doing it with JavaScript or plugins. The technique with CSS3 (positio...

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...

7 Tutorials and Tools to Get You Started With CSS Grid

31May

By Ezequiel BruniNo Comments

CSS Tricks, Web Tricks

7 Tutorials and Tools to Get You Started With CSS Grid

CSS Grid is here, people are starting to use it, and it’s even referenced by our industry’s latest official buzzword. I could go on about how it’s the future of web design and layout. I could wax lyrical about how anyone not using Grid will be left behind when the Rapture happens, and everybody on Wikipedia’s list of Internet pioneers will come back to take us to the great LAN party in the sky. Comcast (yes, all of them) won’t be invited. My point is that if you’ve been paying attention — if you’re reading this, you probably do — then you know that stuff already. But let’s just say that you’ve heard a lot of good things about CSS Grid, but haven’t had a chance to play with it, yet. Where do you start? You start here, and you click the links listed below. Tutorials Your ...

31May

By David MattockNo Comments

CSS Tricks, Web Tricks

The Best UK Animation or VFX Courses

The animation and VFX scene is growing everyday with almost all feature films now containing some clever CGI. Even the movies with no monsters or other worlds have cleverly swapped out landscapes and beautiful scenery usually changed or added after filming that you would never notice was not real. The United Kingdom has a booming scene with studios such as MPC , Framestore, Dneg, Passion Pictures and many more, even Industrial Light & Magic have set up shop in London while working on Star Wars. With artists from around the globe coming to the UK to work in an historic city, full of different cultures, London is an attractive experience for any budding artist. With that in mind it’s no wonder international students also love to study here amongst the best, and here in En...

30May

By Chris CoyierNo Comments

CSS Tricks, Web Tricks

Transmit Droplets

Ethan Marcotte documented his workflow for storing GIFs in a web directory. Sometimes just SFTPing files into a folder is as fancy a workflow as you need, and in fact, modern workflows don't have anything on it! I've also used Transmit's fancy features for this kind of thing. I prefer saving the connection as a Droplet, which is basically a little application you can drop a file onto and have it upload to exactly where you want it...say a GIF in a specific server directory. There are two things that make this even more useful. One, you can have it copy the URL after uploading: Two, you can set rules for file types so that they have the right permissions as soon as they are uploaded. I find this particularly useful for S3 where by default they aren't "world readab...

30May

By Sarah DrasnerNo Comments

CSS Tricks

What does the ‘h’ stand for in Vue’s render method?

If you’ve been working with Vue for a while, you may have come across this way of rendering your app — this is the default in the latest version of the CLI, in main.js: new Vue({ render: h => h(App) }).$mount('#app') Or, if you’re using a render function, possibly to take advantage of JSX: Vue.component('jsx-example', { render (h) { return <div id="foo">bar</div> } }) You may be wondering, what does that h do? What does it stand for? The h stands for hyperscript. It’s a riff of HTML, which means Hypertext Markup Language: since we’re dealing with a script, it’s become convention in virtual DOM implementations to use this substitution. This definition is also addressed in the documentation of other frameworks as well. Here it is, for example, in Cy...

29May

By Kingsley SilasNo Comments

CSS Tricks, Web Tricks

Managing State in React With Unstated

As your application becomes more complex, the management of state can become tedious. A component's state is meant to be self-contained, which makes sharing state across multiple components a headache. Redux is usually the go-to library to manage state in React, however, depending on how complex your application is, you might not need Redux. Unstated is an alternative that provides you with the functionality to manage state across multiple components with a Container class and Provider and Subscribe components. Let's see Unstated in action by creating a simple counter and then look at a more advanced to-do application. Using Unstated to Create a Counter The code for the counter we’re making is available on GitHub: View Repo You can add Unstated to your application wi...

25May

By phpInfoNo Comments

CSS Tricks, Web Tricks

Getting Started With CSS Layout

Over the past couple of years, CSS Layout has dramatically changed as well as the way we develop the front end of our sites. We now have a real choice in terms of the layout methods we use in CSS to develop our sites, which means we often need to make a choice as to which approach to take. In this article, I will run through the various layout methods that you have available to you by explaining the basics of how they are used and what they are used for. This guide is for you if you are fairly new to CSS and wondering what the best way to approach layout is, but also if you are an experienced developer from elsewhere in the stack who wants to make sure your understanding of layout today is up to date. I have not tried to fully document each layout method here, as that would have...