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.
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.
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
resizeevent fires. The below card-like examples are fixed-width for the sake of compactness.
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
∞
∞
∞
∞
∞
∞
∞
∞
There are three requirements for slurve.js to work:
HTML
CSS
JavaScript
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.
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>
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>
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.
