CODEWITHSUNDEEP
htmlfacebookcss
And Finally
And Finally

Reputation: 5714

Making pointy part of share count bubble with only CSS

I recently came across a nice trick on the Guardian's website. They've created this nifty fake Facebook share button.

enter image description here

The interesting bit is how they make the pointy part of the share count bubble. It's all done with CSS and two empty elements in the .facebook-share-count span which makes the bubble. Here's the HTML:

<span class="facebook-share">
    <a class="facebook-share-btn" href="http://www.facebook.com/dialog/feed?app_id=180444840287&amp;link=http://www.guardian.co.uk/science/2013/feb/04/richard-iii-dna-bones-king&amp;display=popup&amp;redirect_uri=http://static-serve.appspot.com/static/facebook-share/callback.html&amp;show_error=false" data-href="http://www.guardian.co.uk/science/2013/feb/04/richard-iii-dna-bones-king" data-link-name="Facebook Share">
        <span class="facebook-share-icon"></span>
        <span class="facebook-share-label">Share</span>
    </a><span class="facebook-share-count"><i></i><u></u>197</span>
</span>

and this is the CSS. I can't figure out exactly how the and the are creating this pointy bit though. In my inspector they both have a computed width 0 and height 1px. Can anyone tell me how they're doing it?

.facebook-share-count {
    float: left;
    background-color: #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #cdd5e5;
    margin-left: 6px;
    margin-top: 1px;
    padding: 1px 2px;
    position: relative;
    height: 14px;
}

.facebook-share-count i,
.facebook-share-count u {
    border: solid transparent;
    border-right-color: #D7D7D7;
    top: 4px;
    left: -5px;
    display: block;
    position: absolute;
    height: 1px;
    border-width: 4px 5px 4px 0;
}

.facebook-share-count i {
    left: -3px;
    z-index: 5;
    border-right-color: white;
}

Upvotes: 0

Views: 2237

Answers (2)

maceyj2
maceyj2

Reputation: 666

As Axel said, its using the :before pseudo selector, and also the :after, along with borders, margins and positioning properties. If you're looking for a good resource that will help you build the arrow with a border like the one in your example: http://cssarrowplease.com/

Upvotes: 2

Axel
Axel

Reputation: 10772

You can use the :before pseudo selector in CSS to insert an a block that looks like an arrow. The actual arrow shape consists of a border trick in CSS.

You can read more about this technique here: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/

Upvotes: 2

Related Questions