README.md

UI Corners

Example Markup

The point of this project is to apply styling to a simple set of markup that will work cross-browser (neglecting IE6) and replicate the ease-of-use and look of border-radius using images. You can add this markup to your HTML directly or use the jQuery plugin to do it for you.

Using the jQuery Plugin

The JavaScript file will automatically add the necessary markup to the page to make the CSS work correctly.

Before the Plugin

Assuming we're starting with some normal markup we might have a simple div containing some content like below.

<divclass="box">
<h2>Some Headline</h2>
<p>My content.</p>
</div>

Applying the Plugin

The plugin only adds markup to the page. You need to use the SASS plugin to actually add the styles.

$('.box').corners(); // no options are available

Using the SASS File

The SASS file contains some useful mixins for adding images as background images. It relies on the compass library for working with the images and will attempt to measure each background image to make configuration easier.

Normal Usage

The following example shows the easiest use-case where each corner and side is a separate image.

corner-border-width($border-width, [$padding])

Because the corner plugin is used to fake borders, it is necessary to remove real borders and fake them using padding.

$border-width: Fakes the border-width using padding. This will override any existing padding. Can be a single value or a list of values matching the CSS border-width spec. Only pixel values are supported.

$padding: Provides extra padding in addition to the faked border padding. Used to add back padding that was overridden by the faked border-width. Can be a single value or a list of values matching the CSS padding spec. Only pixel values are supported.

corner-images([$tl], [$t], [$tr], [$r], [$br], [$b], [$bl], [$l])

This mixing adds all of the provided images as background images to the corresponding span elements. At a minimum, 8 images should be supplied (one for each corner and side). Each argument can be a list. The arguments are ordered clock-wise starting from the top-left corner. Corners and sides use slightly different arguments for the list. Normally all arguments are calculated automatically except for the background-image.

Values in the list

background-image: The image to use for the background on the element. The image must be a valid $path for the image-url function.

width The width of the element. This is usually measured automatically using the image-width function.

height: The height of the element. This is usually measured automatically using the image-height function.

background-position-x: Valid value for the first, horizontal value in background-position. Automatically calculated for each corner and side. For instance, the top-left corner has a background-position-x of 0 and the bottom-right corner has a background-position-x of 100% by default.

background-position-y: Valid value for the second, vertical value in background-position. Automatically calculated for each corner and side. For instance, the top-left corner has a background-position-y of 0 and the bottom-right corner has a background-position-y of 100% by default.

top: Positions the corner or side element using absolute positioning. Takes any valid top value. There's rarely a need to customize this.

right: Positions the corner or side element using absolute positioning. Takes any valid right value. There's rarely a need to customize this.

bottom: Positions the corner or side element using absolute positioning. Takes any valid bottom value. There's rarely a need to customize this.

left: Positions the corner or side element using absolute positioning. Takes any valid left value. There's rarely a need to customize this.

Default values

$tl:background-imageimage-widthimage-height left top 0 0

$t:background-imageimage-height left top 0 top-left-image-widthtop-right-image-width

$tr:background-imageimage-widthimage-height right top 0 0

$r:background-imageimage-width right top 0 top-right-image-heightbottom-right-image-height