Tag Archives: effect

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) on CodePen.

The code above uses @supports to apply text-stroke when supported. If not supported it falls back to the (ugly) faux outline technique.

This is how it looks like in browsers that support text-stroke:

css-outlined-text

And this is how it looks like in browsers that don’t support text-stroke (note the ugly outline around the letter A):

css-outlined-text-fallback

Note: Unfortunately this technique does not work on emoji (cfr. Emoji Silhouettes and Emoji Outlines with CSS)

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

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:

emoji-silhouettes

With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) outline.

Here’s a combined pen:

See the Pen Emoji Silhouettes & Emoji Outlines by Bramus! (@bramus) on CodePen.

Note: To outline text (without emoji), use the CSS Transparent and Outlined technique. It yields much nicer results.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

SVG Heat Shimmer Effect

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 →

Space.js – HTML-driven narrative 3D-scrolling

spacejs

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 used for narration. Think of it as a bicycle for content presentation.

Wouldn’t really call it “new” as it was all the hype late 2013/early 2014 …

Space.js →
Space.js Demo 1 →
Space.js Source (GitHub) →

Related: Skrollr – CSS animations linked to scroll position →

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 and change the opacity of elements on the page. It’s easy to set up and not a single line of javascript is required.

Must say I do like the fact that the data-when attribute accepts enter (= when the element enters the viewport), exit (= when the element exits the viewport), and span (= as long as the element is shown in the current viewport) as a value.

ScrollMe →

Related:

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 to an element, and it will reveal as it enters the viewport. The data-sr attribute is waiting for you to describe the type of animation you want. It’s as simple as using a few keywords and natural language.

scrollReveal.js →

Related: the aforementioned Skrollr allows you to define CSS changes linked to the current scroll position. It doesn’t use natural language, but allows you to manipulate each CSS property individually. Must say I prefer that way of working more.

Icons changing colors on scroll

icons-filling-effect-featured

Quite a simple technique: use :before and :after to inject two colored panels, each taking up 50% of the height. Then lay your inverted icons on top of them, and presto.

Icons Filling Effect →
Icons Filling Effect Demo →

If you like this, you’ll definitely like these too:

HalfStyle: Style Half of a Character by CSS

Sparked by the question “Is it possible to apply CSS to half of a character?” on StackOverflow, HalfStyle was created:

HalfStyle is a set of advanced CSS rules that allow styling each half or third of a character, vertically or horizontally, independently and individually.

Works on any dynamic text, or a single character, and is all automated. All you need to do is add a class on the target text and the rest is taken care of.

Uses CSS’ ::before and ::after to repeat the characters seen on screen. The key part – where the character is passed from the HTML to CSS – uses a data-* HTML attribute along with content: attr(data-nameoftheattribute); in CSS. Finally, some more CSS is used to only show half/a third of the orginal and overlaid characters.

The repository also ships with a jQuery plugin to automate the effect

HalfStyle: Style Half of a Character by CSS →
HalfStyle Demo (also embedded above) →