UPDATE 2021.01.14: Besides using clip-path, a more easy approach is to use mix-blend-mode: difference; if all you’re doing is inverting colors. Ever had a fixed header that had to work with both light and dark content shown underneath it? Keep an eye at the header in the video below to see what I’m talking about: …
Tag Archives: effect
A JavaScript Typing Carousel
I like this JS typewriter effect: The HTML that goes along with that is really simple: <h1>This pen is <span class="txt-rotate" data-period="2000" data-rotate='[ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ]'></span> </h1> Simple Typing Carousel →
BADASS
Nice scroll effect on the BADASS Films website: The effect is achieved by placing a duplicate (but clipped) list on top of another one, in combination with scroll velocity calculation to define the slant of the list. BADASS →
Fading text with CSS Blend Modes
Clever usage a gradient background and mix-blend-mode. On hover the size of the background is changed, revealing the rest of the text contents: . New to Compositing And Blending In CSS? Look no further.
CSS-Only Direction Aware Hover
In the past I’ve seen some demos like this one that use JavaScript/math to calculate the hover direction upon mouseenter. Detecting the direction is also possible sans JavaScript, by adding triangular hitareas to a box/link in combination with the CSS General Sibling Selector (viz. ~) to rotate the content. Internally it looks like this: Note …
CSS Transparent and Outlined Text
For a recent project we did at work I needed outlined text. Using text-shadow you can achieve the desired effect, but one must admit: it’s ugly. Some browsers however (Webkit) support the text-stroke property which gets a much nicer result. Here’s a demo pen: See the Pen CSS Transparent and Outlined Text by Bramus! (@bramus) …
Emoji Silhouettes and Emoji Outlines with CSS
From StackOverflow: It’s possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color? Using an (inset) text-shadow in combination with transparent text color this indeed is possible: With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) …
Continue reading “Emoji Silhouettes and Emoji Outlines with CSS”
SVG Heat Shimmer Effect
See the Pen SVG Heat Shimmer by Bramus! (@bramus) on CodePen. Using JavaScript the seed attribute of the turbulence filter gets randomised at a given interval. Along with the scale transform, the heat shimmer effect is achieved. SVG Heat Shimmer →
Apple TV Poster Parallax Effect in CSS3 & jQuery
In this tutorial, I will guide you in building something similar to Apple TV parallax effect using CSS, HTML, and jQuery. Apple TV Poster Parallax Effect in CSS3 & jQuery →
Space.js – HTML-driven narrative 3D-scrolling
For our messages to communicate across efficiently, we need to create a powerful connection between the user and our medium. Today we are going to explore a new way of presenting stories on the web. And for this I’ve created an open-source and free to use JavaScript library i call space.js. It’s basically parallax technologies …
Continue reading “Space.js – HTML-driven narrative 3D-scrolling”