Slurve Logo

slurve.js

Beautiful Slants and Curves in Web UIs.

by @derekknox


About

Slant + Curve = Slurve.

slurve.js makes it super simple to add responsive slants, curves, or a combination to existing web page elements. Think of slurve.js as a way to replace the bounding-box of HTML elements with a more creative shape. When you want more flexibility than CSS3 2D Transforms or CSS3 Rounded Corners provide, then slurve.js is for you.

Logo Chrome Logo Firefox Logo Safari Logo Internet Explorer Logo Internet Explorer 9+

Virtually any HTML element can be slurved, so creativity and experimentation are encouraged.

So slurve.js is cool and all, but please respect your users and don't create obnoxious user interfaces with it. Stay classy.


Examples

The Slant and Curve sections below showcase the basic outputs of slurve.js. The Slant + Curve section is a small creative sample of what can be achieved when they are combined.

Slurved elements are responsive by default as slurve.js internally updates their sizes when the resize event fires. The below card-like examples are fixed-width for the sake of compactness.

Slant 8 offset types + no curve value

1

2

3

4

5

6

7

8

Curve 8 offset types + curve value of 10

1

2

3

4

5

6

7

8

Slant + Curve infinite variations


Code

There are three requirements for slurve.js to work:

  1. HTML
    • slurve class
    • data-slurve attribute
  2. CSS
    • slurve.css
  3. JavaScript
    • slurve.js

You know how to load CSS and JavaScript, so pay attention to the data-slurve attribute. This is where the magic happens.

The data-slurve attribute takes four space-delimited relative x,y offsets starting at the top-left moving clockwise. Go ahead, read that again.

slurve.js adds each of these relative offsets to each corner of the HTML element's bounding box where each corner is interpreted as a (0x,0y) origin. It then connects the dots. This results in a new shape and ultimately the element's new background. Consider the element slurved.

Simply add a third value (ex. -15,0,10) to make the corner curved. Simple.

Use the data-slurve-classes attribute to attach class styles to a slurve.

Slant Example

Like example 1 above, but taller and Responsive


<!-- HTML tagged for slurve.js a slant -->
<div class="slurve"
     data-slurve="-15,0 0,0 0,0 0,0"
     data-slurve-classes="slurve-style-1">

	<!-- HTML inside a slurved element -->
	<p>Like example 1 ...</p>
</div>

Curve Example

Like example 1 above, but taller and Responsive


<!-- HTML tagged for slurve.js with a curve -->
<div class="slurve"
     data-slurve="-15,0,10 0,0 0,0 0,0"
     data-slurve-classes="slurve-style-gradient-1">

	<!-- HTML inside a slurved element -->
	<p>Like example 1 ...</p>
</div>


Advanced

As mentioned in the About section above, virtually any DOM element can leverage slurve.js. Block level elements are a natural fit for slurve.js and as a result UIs containing panels, cards, and buttons are ideal candidates. Don't let that stop you though, I'd love to see what unique approaches you can come up with. Tweet @derekknox with #slurvejs.

Below is an example with a responsive full-width slurved panel. Inside the panel are slurved cards. Inside each card is a nested slurved element in addition to plain HTML. Under the hood, slurve.js simply adorns existing HTML with SVG dynamically. Check out the initial article for details.

Take note that a slurved element may (card example) or may not (panel example) have spacing around it. The decision is all yours.

Slurve Logo Example

Slurved Card 1

This is a more complex example of what you can do with slurve.js.

Cool!
Slurve Logo Example

Slurved Card 2

This is a more complex example of what you can do with slurve.js.

Rad!
Slurve Logo Example

Slurved Card 3

This is a more complex example of what you can do with slurve.js.

Sweet!