Triangle With Shadow

Chris Coyier — Thu, 19 Apr 2012 22:00:44 +0000

You probably already know you can make triangles with CSS. But what if you want to put a shadow behind it? Unfortunately the classic border trick doesn't change the shape of the element, it's just a visual trick. Let's look at a couple alternative solutions.

//AN_Xml:

Just use Unicode

//AN_Xml:

There are triangle characters in unicode. Like:

//AN_Xml:

▲▼◀▶

//AN_Xml:

And way more.

//AN_Xml:

If you use that as your triangle, you can select it and do all kinds of fancy to it.

//AN_Xml:

▲

//AN_Xml:

.triangle {
//AN_Xml:   color: #BADA55;
//AN_Xml:   text-shadow: 0 0 20px black;
//AN_Xml:}

//AN_Xml:

Color, shadows, sizing, whatever. You could even get more fancy. If the triangle isn't the exact shape you want or doesn't point the right way, you can use CSS3 transform stuff to stretch it or rotate it. Here's a demo like that:

//AN_Xml:

I like this technique, but there are some obvious issues. One is that relying on CSS3 transform features doesn't get you very deep browser support. Certainly no IE 8. But hey, this article is about shadows, so that's CSS3 anyway. Even Older browsers than that may have trouble with the unicode icons themselves. So fair warning.

//AN_Xml:

The Double-Box Method

//AN_Xml:

Assuming we're cool with CSS3, one method would be to have a container box with hidden overflow and another box inside it which is rotate and hangs out of it. The part that is still visible would form a triangle. Then you can use a box-shadow on both the boxes to achieve a shadow all the way around.

//AN_Xml:

.triangle-with-shadow {
//AN_Xml:   width: 100px;
//AN_Xml:   height: 100px;
//AN_Xml:   position: relative;
//AN_Xml:   overflow: hidden;
//AN_Xml:   box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
//AN_Xml:}
//AN_Xml:.triangle-with-shadow:after {
//AN_Xml:   content: "";
//AN_Xml:   position: absolute;
//AN_Xml:   width: 50px;
//AN_Xml:   height: 50px;
//AN_Xml:   background: #999;
//AN_Xml:   transform: rotate(45deg); /* Prefixes... */
//AN_Xml:   top: 75px;
//AN_Xml:   left: 25px;
//AN_Xml:   box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
//AN_Xml:}

//AN_Xml:

Notice we use negative spread radius on the parent in which to get the shadow to only come off of one side. Here's a demo like that:

//AN_Xml:

Just use an image

//AN_Xml:

I'm not a big fan of this, because it's an extra HTTP Request or another thing to manage in your sprite. And you'll have the "responsive images" (won't look as nice on pixel dense displays unless you have multiple versions of it ready for that and go to great lengths to fix). The other techniques are essentially drawn with vector so will be sharp in any environment.

//AN_Xml:

But, you know, nobody will die and you'll get good browser support.

//AN_Xml:

Triangle With Shadow is a post from CSS-Tricks

Saving the Day with Scoped CSS

Guest Author — Wed, 18 Apr 2012 22:45:21 +0000

Today's post is by Arley McBlain (@ArleyM), a front end developer in Burlington Ontario at Thrillworks.

//AN_Xml:

Over the last couple years HTML5 and CSS3 have rocked our worlds and the way we approach common website issues. Every few days it seems there is some new fangled snippet or approach that is a game changer. Today might just be another one of those days (kind of).

//AN_Xml:

One little known feature of HTML5 is Scoped CSS. It's an attribute for style blocks that may change the way we tackle certain styling challenges in the future.

//AN_Xml:

The implementation for scoping is simple. Let's look at some code on an otherwise unstyled page where all text is the default black:

//AN_Xml:


//AN_Xml:  
//AN_Xml:  This is an H1 in a scoped div. Regardless of global styles the text should be "FireBrick".
//AN_Xml:  This is a paragraph in a scoped div. The text should be "SaddleBrown".
//AN_Xml:
//AN_Xml:
//AN_Xml:This is another paragraph, that will unaffected by the scoped style and remain black.

//AN_Xml:

The style block with the scoped attribute will overwrite the global styles generally found in the head (whether in a style block or linked stylesheet), but only on the sibling/descendent elements inside the same parent. In this example, everything inside the wrapping div is going to get some new heading and paragraph coloring. As w3.org puts it "If the scoped attribute is present, then the user agent must apply the specified style information only to the style element's parent element (if any), and that element's child nodes."

//AN_Xml:

This is amazing! While all other text on the page may be black, within this div we can style freely without worrying about changing the styles of similar elements anywhere else on our site. This can be a very powerful tool.

//AN_Xml:

Why is this cool?

//AN_Xml:

"But Arley," you say, using a conjunction to begin a sentence, "Why not just use a class or ID on that div and style like #foo h1 and #foo p? Isn't this just organized inline styles?" There are a number of occasions I can think of when scoped CSS is a decent option under certain circumstances:

//AN_Xml:

It may be desirable to keep the CSS of a particular interactive element together with the HTML. If the element in question is unique on the site (like a complex slider for example), there is no advantage to caching it with global styles.
Keeping the CSS with the HTML for organization may have value however.
When working with a team it can be a great way to allow for simultaneous development of various areas of the site without worrying about the state of the global CSS - I can see this as a short term solution.
If your article is getting aggregated by another site it's possible to customize styles on another website that would otherwise be beyond the reach of your global stylesheet.
If you enable tags in the comment section of your site you can give your readers the ability to style their... nevermind this is probably a terrible idea.
For use in widgets on third-party sites where the CSS is unknown and the in-widget styles shouldn't affect anywhere else. Although being able to reset the styles within the widget is the other half of that battle.
Finally (and most exciting to me), Scoped CSS is ideal for working within Content Management Systems where you have much less flexibility for adding unique markup to common templated areas, or no access to the existing stylesheets.

//AN_Xml:

I would like to talk about the CMS advantages in more detail.

//AN_Xml:

Working with a CMS

//AN_Xml:

When we build a site in a CMS we are building constraints to ensure reusability of elements and templates, as well as maintaining consistency across the site. CMS are the perfect tool to let someone way less nerdy than you create and manage content without fear of breaking any site components. One limitation of a CMS can be the inability to do one-off tweaks for unique areas.

//AN_Xml:

I had this problem working in an enterprise level CMS. Based on original comps and scope of the site we built the CMS to have a consistent uniform look and feel. A need for more flexibility rose a few months after launch: the addition of a second more verbose language, and special campaigns were introducing new challenges for styling.

//AN_Xml:

My first challenge was to make a larger block of text (fun fact: the rule of thumb for designers when designing for bilingual in Canada is to allow for an extra 50% space when the design will need to be in French!). I looked at my pages, and I looked at my stylesheets: even any tiny change I made would mean hours of testing and QA across the entire site to ensure that no other areas were broken as a result. The ramifications were astronomical! Having no time for this I invented the poor-man's Scoped CSS, or "code block" as it became known. Code Block was technically just wrapping divs with IDs around content, and then having an adjacent style block to make the necessary changes (while this sounds simple, it was a bit outside-the-box for this CMS work). Since this CSS would only apply to this page it made no sense to have these styles bloating up the global styles. It was perfect. The style block would not affect any other area of the site. Bilingual and campaign content became easy to develop and test.

//AN_Xml:

Thankfully Scoped CSS will be even cleaner and easier to implement than my McGyvered solution. There will be no need for special IDs, and in fact the ability to have really simple selectors like "p" will keep your CSS looking very clean.

//AN_Xml:

Getting Practical

//AN_Xml:

Have you ever wanted to make one specific post in your stream stand out in some way? Even if your CMS doesn't allow for coding in the editor, you may still have options thanks to Scoped CSS.

//AN_Xml:

WordPress is an example of a CMS that will limit what code you can enter into the content area. Out of the box WordPress strips a lot of markup out of the wysiwyg editor, and this is actually a very very good thing, as it will clean up any stray code a n00b user may accidentally introduce. Giving users access to enter code into a CMS is to give them access to destroy the site! One too many closing div tags will mean a completely borked layout!

//AN_Xml:

With a little work up front you can create a "Code Block" custom field that will allow you to inject scoped CSS directly into that post. If you really want to get fancy you could employ functionality from a plugin like Custom Field Template to make it easy for even the least savvy user to take advantage of this by making style choices with a simple form!

//AN_Xml:

In the WordPress demo below I have created a Twenty Eleven Child Theme (meaning I'm completely relying on the default WordPress template, except for the three pages I've made small adjustments too). The changes I've made are few and simple (I should probably also mention that at the time of writing there is one other tiny problem to consider, but I'll save that until later). To get Scoped CSS working I simply add a little bit of logic to content.php and content-single.php to look for the custom field "scopedcss" and then to pop that into a style block. I simply put this code within the

block of the relevant content loops:

//AN_Xml:

ID, 'scopedcss', false); 
//AN_Xml:
//AN_Xml:  foreach($scopedcss as $css) {
//AN_Xml:    echo '';
//AN_Xml:  }
//AN_Xml:?>

//AN_Xml:

Then in my WordPress post I simply added the custom field "scopedcss" and wrote whatever styles I wanted for this post.

//AN_Xml:

Easy cheezy. If you don't see Custom Fields on your post editor screen, click the Screen Options tab at the top of the screen and make sure the checkbox for them is checked.

//AN_Xml: //AN_Xml:

Note: if you are interested in this art direction on a per-post basis idea, but aren't ready for scoped styles check out this plugin which gives you the meta box for declaring styles, but they won't be scoped you'll need to be as specific as regular CSS.

//AN_Xml:

A word of warning

//AN_Xml:

My own experience with my poor-man's version of this wasn't all sunshine and daisies; there is one major weakness to this approach and to scoped CSS: organization gets very hard - you end up with styles everywhere! Scoped CSS has the ability to save the day, but if it's at all possible you should use ID selectors and linked stylesheets.

//AN_Xml:

This is one of the major reasons we should avoid inline styles, they're messy, they add to page weight something that maybe should be cached, they're a pain to overwrite, they can complicate troubleshooting, and most importantly they're hard to maintain. Like inline styles, Scoped styles do have their place and can be a powerful tool. Use them wisely.

//AN_Xml:

An even bigger warning

//AN_Xml:

Using scoped styles without a proper polyfill is dangerous. In a browser that doesn't support them, the styles you declare will affect the entire page. Imagine you use a scoped style to use an image replacement technique on the h1 title inside an article on your site. Your logo is also an h1, and thus the logo is also replaced in unsupporting browsers. The result is a reverse-cascading style disaster.

//AN_Xml:

Just be warned. Scoped styles are a very useful idea but the days of use using them without a polyfill are very far off.

//AN_Xml:

A jQuery solution

//AN_Xml:

Due to the lack of native browser support, this would be one disappointing demo today if it were not for this great jQuery Polyfill made by Simon Madine. To get my demo working in WordPress I also:

//AN_Xml:

Enqueued jQuery into my WordPress theme.
Added the following code to the footer of the theme (footer.php in the theme folder).

//AN_Xml: