Creating Customized Corners & Borders Half II – A Checklist Aside

Half I confirmed easy methods to apply personalized borders and corners to liquid CSS layouts. The approach works effectively, so long as your design makes use of strong background colours. However what if you wish to use patterned or gradient backgrounds? In Half II, we’ll lengthen the approach so you are able to do simply that.

Article Continues Under

We’ve acquired one other directive from our hypothetical graphic designer of Half I. Inspired by the outcomes of our earlier collaboration, he has connected a brand new sketch he needs us to include. (That’s it on the left. 4 rounded corners in opposition to a tall, gradient background.)

“It’s simple to alter, proper?” he asks.

“Piece of cake,” is our preliminary response.

We’ll begin off by slicing up the brand new sketch, and cope with technicalities later.

See Step 2.1 — the sliced-up sketch.

Why it doesn’t work#section3

The kinds for our earlier try at personalized borders and
corners appeared like this:

div.Article {
  background:
  url(pictures/custom_corners_topleft.gif)
  prime left no-repeat;
  width:35%;
  }
  div.Article h2 {
  background:
  url(pictures/custom_corners_topright.gif)
  prime proper no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  }
  div.ArticleBody {
  background:
  url(pictures/custom_corners_rightborder.gif)
  prime proper repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  }
  div.ArticleFooter {
  background:
  url(pictures/custom_corners_bottomleft.gif)
  backside left no-repeat;
  }
  div.ArticleFooter p {
  background:
  url(pictures/custom_corners_bottomright.gif)
  backside proper no-repeat;
  show:block;
  padding:15px;
  margin:-2em 0 0 0;
  }

This method works by putting
background pictures in components that observe one another
in a doc construction. These components are marked up in
the identical stacking stage, however will show stacked on
prime of one another within the order through which they seem within the
doc.

The primary component to happen
is positioned “below” any following component
until a selected z-index worth tells
the consumer agent to do in any other case.

In our instance,
the massive prime left background
picture is positioned inside the first component to look
in our field, which signifies that our <h2>
and all following components with background pictures
will seem on prime of it, thereby hiding the
proper and backside corners (and sides) of the prime
left background picture.

So if we’re going to make use of borders and corners that
require transparency — like a rounded nook field
that floats freely on a gradient background —  our approach will show insufficient.
Let’s see what it appears to be like like.

See Step 2.2 — The brand new graphics utilized to the previous CSS

The right way to make it work#section4

The repair is straightforward. We’ll use relative positioning
to nudge across the containers that include the background
pictures.

On this illustration, we’ve outlined
our div.Article with a strong black,
and our
div.Article h2 with a strong pink to point out
the approach we’re utilizing. We’ve moved the div.Article
h2 block
containing our prime proper background picture
14px to the best by giving it a proper:-14px
worth and positioning it relative to its mum or dad
component. (14px is
the width of the prime proper background
picture.)

We’ll merely apply the identical precept to all different
components we have to transfer, utilizing the width or peak
of the background picture we need to reposition to find out how a lot to maneuver every component.

div.Article h2 {
  background: 
  url(pictures/custom_corners_topright.gif)
  prime proper no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  place:relative;
  proper:-14px;
  padding-left:0; 
/* Compensation for the 
repositioned field */
  }
div.ArticleBody {
  background:
  url(pictures/custom_corners_right.gif)
  prime proper repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  place:relative;
  proper:-14px;
  padding-left:0;
  }
div.ArticleFooter {
  background:
  url(pictures/custom_corners_bottomleft.gif)
  backside left no-repeat;
  place:relative;
  prime:12px;
  }
 
div.ArticleFooter p {
  background:
  url(pictures/custom_corners_bottomright.gif)
  backside proper no-repeat;
  padding:15px;
  show:block;
  margin:-2em 0 0 0;
  place:relative;
  proper:-14px;
  padding-left:0;
  }

See Step 2.3 — Now we’re actually getting there

We’ll need to compensate for the repositioned
components in our remaining format calculation, however this
actually is all there’s to it.

Now we’ll apply our approach to a extra complicated format.
This time we’re demonstrating it on a three-column format with a header from Owen
Briggs. We’ve included three alternate stylesheets for browsers that assist type switching (like
Mozilla Fireplacefowlfox),
to show the drastic design affect that personalized borders and corners can have
in your subsequent challenge.

We’ve additionally added
a contemporary new div to the lengthy middle
column, and given it the category title, ArticleLongContent.
We use this div to wrap our ArticleBody if the contents of the article develop too lengthy for our prime left background picture to cowl.

The category incorporates the next type:

div.ArticleLongContent {
   background: url
 (../pictures/custom_corners_leftborder.gif)
   prime left repeat-y;
  }

See step 2.4 — Our approach utilized to a format with 3 columns and header

Due to Inge Jørgensen and
Stephen Paul for alternate graphical examples, Brian Alvey for letting me abuse his Browsercam tài khoản, and all of the individuals who introduced up fascinating factors within the dialogue of Half I of this text.