A rather geeky/technical weblog, est. 2001, by Bramus
Nice pen by Aaron Iker:
It combines CSS Custom Properties, CSS Transitions, and SVG Animations using stroke-dashoffset/stroke-dasharray.
The reason that it works with text that spans multiple lines is because of the (inline) span that’s being used inside the link.
Using the feTurbulence and feDisplacementMap filters, Scott Turner make his SVG line-drawings look like they’re pencil-on-paper-like drawings:
See the Pen SVG Pencil Filter #1 by Scott Turner (@srt19170) on CodePen.
Creating a Pencil Effect in SVG →
💡 If you constantly randomize the turbulence you can create squiggles using SVG or even recreate a heat shimmer effect with SVG
The key CSS property you’re looking for is display: inline;, as set on the p elements, along with some box-decoration-break clone; where needed 😉
clip-pathOn Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say:
What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path is used later on. I’ve quickly made a pen that uses the one single image, yielding a similar cutout effect.
See the Pen Magazine Cutout by Bramus (@bramus) on CodePen.
I’ve only cut out a few parts, but you get the idea. The parallax part as seen in the original is left as an exercise to you, dear reader 😛
🚧 A big help in creating these cutouts was the Shape Path Editor which you can find in Firefox’ DevTools. Without it such a task would have been really difficult.
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:
As explained over at CodyHouse, here’s how it’s done:
This effect uses the
clip-pathCSS property. The idea is to have a clone of the main header inside each<section>of the page. Each clone will inherit the style of the section it belongs to.All cloned headers are placed at the top of the page (with a fixed position). The
clip-pathproperty can then be used to define, as clipping region for each header, the section element it belongs to. This way, each header is visible only when on top of its parent section.This creates the clipping transition effect between headers with different color themes.
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>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.
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.
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 that the hitareas are made triangular using CSS Clipping, and not using the for this typically used CSS border-fiddling.
Here’s a Pen of the final markup for you to play with:
See the Pen CSS-Only Direction-Aware Cube Links by Gabrielle Wee (@gabriellewee) on CodePen.
Neat! In the process of getting to the end result, a pure CSS version of the Tilt Hover Effect is also demonstrated 🙂
How to Create Direction-Aware CSS-Only Hover Effects →
Sidenote/Related: The General Sibling Selector – just like any other Combinator such as the Adjacent Sibling Selector (+) for that matter – is a CSS Selector that’s very powerful and should be used more often. Here’s why:
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:
And this is how it looks like in browsers that don’t support text-stroke (note the ugly outline around the letter A):
Note: Unfortunately this technique does not work on emoji (cfr. Emoji Silhouettes and Emoji Outlines with CSS)
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!