Clever things

Transparent JPG (With SVG)

This is really excellent: take a JPG, which has great compression for photos, but doesn’t support transparency, and link it within an <svg> which can apply a clipping mask based on a path. The path can be traced manually over the photo in Photoshop or Illustrator, and can be exported as an SVG file from Illustrator. The following code (minus the path data), demonstrates how to do this:

Code language: HTML

<svg viewBox="0 0 921.17 1409.71">
  <defs>
    <clipPath id="chris-clip">
      <path d=" ... " />
    </clipPath>
  </defs>
  <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
<svg>

Source link

Transparent JPG (With SVG) | CSS-Tricks

Tags

Images - JPEG

Performance - Images

SVG

Clever things

WebGL demos and apps by David Li

A screenshot of David Li's site, with a grid of thumbnails of their various WebGL demos.

These are awesome and mesmerizing, even more so that they demonstrate what can be done with native browser WebGL APIs. Give them a try. (Warning: some may be quite laggy if you have lower end hardware, and I haven’t tested these on mobile.)

Source link

https://david.li/

Tags

WebGL

Clever things

Fluid Paint by David Li

A screenshot of the Fluid Paint interface. Various brush settings sliders and a colour picker are on the left, with a canvas with several colours painted. The paint has a realistic glossiness and texture to it, reacting to a light from above.

Ever wanted to paint realistic-looking brushstrokes in your browser? You’re welcome.

Source link

https://david.li/paint/

Tags

Full Width Containers in Limited Width Parents

Code language: CSS

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

The idea here is: push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with negative -50vw margin.

The user resizing a browser window containing text within a fixed-width container, while the image half-way down the page resizes dynamically, bleeding out of the container, flush with the sides of the viewport at all times.

Source link

Full Width Containers in Limited Width Parents | CSS-Tricks

Tags

Mozilla Hacks title hover animation

I just noticed the delightful little animation on the Mozilla Hacks site title. It’s triggered by hovering over the title with a pointer, or if you’re on mobile, long pressing it to focus it seems to be the equivalent.

The Mozilla Hacks title. When the user hovers over the word "HACKS", the letter "K" rotates from the top right corner, as if coming loose from being stuck in place, to illustrate the notion of a "hack".

Source link

https://hacks.mozilla.org/

Tags

Progress Nav - An animated table of contents that shows current position

A screenshot of the Progress Nav table of contents, with a line snaking down the left side, alongside the currently viewed items.

This is so awesome. Go to the source link and scroll up and down the page. The line to the left of the currently viewed item(s) in the table of contents snakes up and down as you scroll.

Source link

http://lab.hakim.se/progress-nav/

Tags

Navigation

Animation

Clever things

Subscribe to Clever things