CSS { Snippets : Wrapped Header }

Welcome to the first installment of my CSS Snippets journals. I've had a lot of questions over the years about how I create/achieve some of the elements in my journal skins so I thought I'd try my hand at a tutorial of sorts for the different elements I find fascinating and some of the work arounds needed to make them function properly when limited by deviantART's  journaling system. Although, "limited" doesn't feel like the correct word. To me it's more of a challenge and to persevere through it really gives me a thrill I just can't explain. It's not really a limitation as it forces one to think outside the box and hopefully when you get it just right, you'll get that same thrill.

I had originally planned to start these journal tuts after the new Journal/News system and Sta.sh Writer had been launched. I think showing you live what happens when CSS meets HTML would negate the need for a separate downloadable file, like is common in most other CSS tutorials found in the resources gallery. That along with the new Journal/News systems faving feature, you could add one of these Snippet journals to your favs and reread them at your own leisure. And with the Sta.sh Writer feature I could reBlog these journals across the CSS groups I'm a part of and reach a larger community. Plus... How sexy is this journal skin? Very, if I do say so myself! ;) Anyway, I've decided not to wait that long since I'm pretty impatient and I've had this journal skin coded up for a while just waiting to pounce. For those of you that are Beta testers you can feel free to add these journals to your favs the rest of you will just have to visit my journal tab on my userpage until the new system launches site wide.

Wrapped Header

So now to the reason we're all here. I'd like to show you how to make a wrapped effect using just HTML and CSS. In list tutorial you'll learn how to hijack the <h1> header tag and turn it in to a way to break up you journal entries. You'll also learn how to to create a triangle shape using the border property in your CSS.

First off, let's start with the HTML we'll need. The elements below will be used to to create the container that holds the text, the header that is the title of the new topic and finally the triangle.

So since deviantART's journaling system only allows you to use descendant and class selectors we'll need to make 3 new class selectors. One for the container, one for the header and one for the triangle.

Styling the elements

In the code above I have used 2 class selectors and a H1 tag. If you're planning on using this code in your own journals you can skip the first container class since your journal comes prebuilt with a .Journalbox or .text CSS property and you can just target one of those in your CSS to adjust its properties. We could have also used a Class selector instead of a <h1> tag but I like that it keeps the markup fairly clean and you might as well reuse elements that are already built in.

With the HTML out of the way, let's get to altering the CSS and skinning these elements.

The results

In the CSS for the container selector I've set a width of 200 pixels. This won't be necessary for your actual journal since that will stretch with the page. If you do set a width for this area, setting the margin as "auto" will allow the box to remain centered on the page when it's stretched wider than the box.

For the h1 tag we need to set a negative margin so that the header breaks out of the container box and is off to the left side.  The exact pixel distance is of course your preference but keep in mind that the number may be higher than you think because of the padding on the header. Take notice that we have the position set to relative. This is very important for the next step when aligning the triangle.

Finally, the triangle. We need no width or height for this element because this will be made by the border pixel size. As you can see in the CSS the borders are set to 10 pixels and given a colour. In the case of the left border this colour is transparent. When combined with another border that has a colour, in this case the top border, it creates a triangle. Were you to use a transparent right border this triangle would be flipped the opposite direction. Likewise, if you were to use a transparent top border and an opaque left or right border the triangle would be flipped upside down. Because the size of these border is 10 pixels it stands to reason that the height of this element is now 10 pixels. With this in mind we will need to move this element down 10 pixels using the negative bottom CSS property. To finish it off we ensure the position of this object is set as absolute. Keep in mind, if you were to use the position property as absolute without first setting the parent element (in this case h1) as relative this element would have been at the very bottom of the journal, far away from where you wanted it to be.

If you've got all that done correctly here's what you should have:

Conclusion

So, with all that neatly tucked away in your journal, please, feel free to alter and tinker with this CSS to customize it to your tastes.  Here's an example of what I was able to make using elements from this journal, all without using a single image file:

Finalé

My apologies for the length of this journal. With the intro taking us so much space it was longer than I anticipated. Hopefully the next installment shouldn't be as large.

Speaking of the next installment. I have several other elements lined up but please, feel free to suggest topics you would like me to cover. I'm also more than happy to answer any questions within my means should you ask in a comment below. :)

Please feel free to leave any comments or critisism on the layout/flow of this journal. Is it too hard to follow? What could I improve? Any extra feedback would be appreciated.