Scrolling Gradient

If you want a gradient that changes as you scroll down a very long page, you can create a gradient with a bunch of color stops, apply it to the body and it will do just that.

But, what if you don't want a perfectly vertical gradient? Like you want just the top left corner to change color? Mike Riethmuller, re-using his own technique from the CSS-only scroll indicator (A-grade CSS trickery), did this by overlapping two gradients. The "top" one is fixed position and sort of leaves a hole that another taller gradient peeks through from below on scroll.

Direct Link to Article — Permalink

The post Scrolling Gradient appeared first on CSS-Tricks.



from CSS-Tricks https://ift.tt/2twQrhs

Comments

Post a Comment

Popular posts from this blog

Creating Snow Trails in Unreal Engine 4

Image
If you’ve been playing recent AAA games, you may have noticed a trend in snow covered landscapes. A few examples are Horizon Zero Dawn , Rise of the Tomb Raider and God of War . In all of these games, one thing stands out about the snow: you can create snow trails! Allowing the player to interact with the environment like this is a great way to increase immersion. It makes the environment feel more realistic and let’s face it — it’s just really fun. Why spend hours designing fun mechanics when you can just plop on the ground and make snow angels? In this tutorial, you will learn how to: Create trails by using a scene capture to mask out objects close to the ground Use the mask in the landscape material to create deformable snow Only show trails around the player for optimization Note: This tutorial assumes you already know the basics of using Unreal Engine. If you are new to Unreal Engine, check out our 10-part Unreal Engine for Beginners tutorial series. Getting Started ...
Read more

GLKit Tutorial for iOS: Getting started with OpenGL ES

Image
Update note : This tutorial has been updated to Swift 4.1 and Xcode 9.3 by Felipe Laso-Marsetti . The original tutorial was written by Ray Wenderlich . If you’re interested in graphics programming, chances are that you’ve read about OpenGL, which remains the most-adopted API from a hardware and software perspective. Apple has developed a framework called GLKit to help developers create apps that leverage OpenGL and to abstract boilerplate code. It also allows developers to focus on drawing, not on getting the project set up. You’ll learn how all of this works in this GLKit tutorial for iOS. GLKit provides functionality in four areas: Views and View Controllers : These abstract much of the boilerplate code that GLKit uses to set up a basic OpenGL ES (Embedded Systems) project. Effects : These implement common shading behaviors and are a handy way of setting up basic lighting, shading, reflection mapping and skybox effects. Math : Provides helpers and functions for common math ...
Read more

Fitting Text to a Container

There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways. Magic Number it with viewport units If you set type with vw (viewport width) units, you can find an exact number where the text pretty closely fits the container and doesn't break as you resize. I'd call this a magic number . In this case, font-size: 25.5vw; works down to a 320px viewport, but still will break much lower than that. See the Pen Fitted Text with Viewport Units by Chris Coyier ( @chriscoyier ) on CodePen . This is kind of a less exotic version of fluid typography , which involves more of a sprinkling of viewport units and min/max sizes. FitText Dave Rupert's FitText is up for the job. You still need a bit of a magic number to get the sizing just right for any particular job: See the Pen Fitted Text with FitText by Ch...
Read more