-
Recent Posts
Archives
Categories
Meta
Tag Archives: effect
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 … Continue reading
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. … Continue reading
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 … Continue reading
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 … Continue reading
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 … Continue reading
ScrollMe – A jQuery plugin for adding simple scrolling effects to web pages
<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that’s all. </div> </div> ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. As you scroll down the page ScrollMe can scale, rotate, translate … Continue reading
scrollReveal.js – Easily reveal elements as they enter the viewport
<div data-sr="enter left please, and hustle 20px"> Foo </div> <div data-sr="wait 2.5s and then ease-in-out 100px"> Bar </div> <div data-sr="enter bottom and scale up 20% over 2s"> Baz </div> <script src=’/js/scrollReveal.min.js’></script> <script> window.sr = new scrollReveal(); </script> Just add data-sr … Continue reading
Waves – Click effect inspired by Google’s Material Design
When clicking an item, Waves injects a <div> on top of the clicked item, yet at scale(0). Using a transition, the growing effect is achieved after – via JavaScript – setting a new scale value. Waves →