When creating a web app, you often need to present people with friendly help prompts that explain parts of your interface. One of the ways to do it is to have separate pages with help topics that you link to. However, this causes people to lose context of what they are doing and is not very user friendly. A better way is to show help text right where it is needed. Here is how to do it only with a few CSS rules and a tiny bit of HTML!

The HTML

<div class="help-tip">
    <p>This is the inline help tip! It can contain all kinds of HTML. Style it as you please.</p>
</div>

The element is displayed as the black tooltip, and the .help-tip div is the blue circle with a question mark. The paragraph is hidden by default and is only revealed on hover. It can contain links, images and other kinds of HTML. It is revealed with a smooth CSS animation, as you can see from the demo.

The CSS

All of this is possible with the help of a bit of CSS (you can find it in style.css in the downloadable zip, linked to from the buttons in the beginning of the article):

.help-tip{
    position: absolute;
    top: 18px;
    right: 18px;
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    right: -4px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}

Chrome still needs the -webkit prefix for keyframe animations, so we supply both versions. This animation scales the element from the top right corner (thanks to the transform-origin on line 23) and animates the opacity. It is triggered on hover, so while you have your mouse over the tooltip, it will stay on the screen. It is important to note that the container element that the blue circle with the question mark is displayed in, must be set to position:relative, in order for the circle to appear in the top-right corner. I hope that you found this quick tip helpful and that you will find a use for it in your web apps!

As much as we hate them, social sharing buttons are necessary to make it easy for visitors to share our content with their friends and professional networks. But as web developers, we have to be weary of the slow down that sharing buttons bring. Every button that you include in your page loads its own set of scripts and stylesheets which make your pages slower to load.

This is why today we are releasing a cool new jQuery plugin that adds social sharing buttons to your site without slowing it down. It is easy to use, powered by CSS3, mobile friendly and fully customizable.

How it works

All social networks support so called “sharer pages”, which are special URLs that allow people to share directly to the social network.  These URLs can be opened in a new page or in a popup window, and they are loaded only when they are needed, which speeds things up.

The plugin has support for these networks:

• Twitter
• Facebook
• Google+
• Tumblr
• Pinterest

It is easy to add support for more social networks by editing the source code of the plugin.

How to use it

To use the plugin, download the zip file from the button at the beginning of the article. Extract the files and copy the folder assets/cool-share to your project. You then need to include the stylesheet and JavaScript file of the plugin, along with Font Awesome, in your page:

<!-- In the head section of your page -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="assets/cool-share/plugin.css" media="all" rel="stylesheet" />

<!-- Near the closing body tag -->
<script src="assets/cool-share/plugin.js"></script>

The plugin depends on jQuery, so be sure to include the library before plugin.js. Any recent jQuery version will do.

Next, you need to call the plugin on an element which will be converted to a set of social sharing buttons. We can use a span element:

<span class="socialShare"></span>

The class name is arbitrary – I’ve added it only to make it easier to select it later. We are ready to initialize the plugin:

var url = 'http://www.bthemez.com';

var options = {

    twitter: {
        text: 'Check out this awesome jQuery Social Buttons Plugin! ',
        via: 'Bthemez'
    },

    facebook : true,
    googlePlus : true
};

$('.socialShare').shareButtons(url, options);

The URL parameter is optional – if it is omitted the plugin will use the URL of the current page. The second parameter is an object with social services. Facebook and Google+ don’t support any additional options, so they only take true/false. Twitter on the other hand, can prefill the contents of the tweet and associate it with a twitter user.

The plugin supports two more social services – Pinterest and Tumblr. You can see how they are used from the file assets/js/demo.js.

Let’s take a look at the basic concept first, and then we’ll work towards the final effect.

Today we’d like to explore a very subtle, but interesting border animation effect that can be seen on the creative website of Carl Philipe Brenner. When you hover over one of the white portfolio items in the grid, you will see a subtle animation happening: the grid item becomes transparent and the border lines of each side animate clockwise, creating a really nice effect. In this case, the effect is done by animating the widths or heights of several spans with some JS. We’ll try a different approach that uses SVG and CSS transitions. Please note that this technique is highly experimental.

Please note that we’ll be using CSS transitions on SVGs which might not be supported in all browsers.

When looking at the effect, it might not be immediately clear what’s going on, but when you look closely at only one border, let’s say, the top border, then you’ll notice that first, the white line’s width is decreasing from right to left and a new line moves in from the right with a bit of a delay, or gap. When adding all the other sides, it appears as if the top line moves around the corner down to the left side, the left side moves to the down side, and so on.

You can surely create this effect without SVG, even without extra elements, just using pseudo-elements. But here we want to explore what we can do with SVG and how we can control it via CSS rather than using JavaScript.

Now, thinking about how to create this effect using SVG, we could animate the stroke-dashoffset of a rectangle’s stroke or draw the lines directly. We wanted to try a solution without using JS and after some fiddling, we figured that transitioning the stroke-dashoffset and the stroke-dasharray values in CSS can get quite buggy. So, we decided to try a different solution using lines and animating their translation. (We can imagine other approaches to this specific effect, but we liked the idea of moving lines because it is quite easy to understand and to do in CSS, and it also gives us some more opportunities for different animations as you can see in the demo.)

The special thing about the lines that we’ll be using is that they will serve as three states of our animation. They will actually be three times as long as the size of the box they are contained by. In the middle, the line will have a gap the size of the box side. We will achieve this by setting the stroke-dashoffset value to the side length of the box. Now, the trick lies in transitioning the position of the line:

The SVG will have the size of the box, so we won’t see the overflowing part beyond the dashed line.

Before we continue with the next three lines, let’s code this first step up.
We’ll have a div with a SVG that has our line:

<div>
    <svg width="200" height="200">
        <line x1="0" y1="0" x2="600" y2="0" />
    </svg>
</div>

The division has a width and height of 200px, just like the SVG drawing, and we’re setting the SVG to position absolute. The line has a stroke width of 10 and most importantly, a stroke-dasharray value of 200:

div {
    width: 200px;
    height: 200px;
    position: relative;
    overflow: hidden;
    background: #ddd;
}
 
svg {
    position: absolute;
    top: 0;
    left: 0;
}
 
svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: -webkit-transform .6s ease-out;
    transition: transform .6s ease-out;
}
 
div:hover svg line {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
}

The line also has a transition and when we hover over the division, we want the line to move two thirds of its own length to the left, so we translate it -400px on the x-axis. You can take a look and play around with this first step in this JSBin example. Since we cannot use percentages for the translation values here, we need to set the translation in pixels.

The next step is to add the other lines. In order to understand how we need to position and animate them, let’s have a look at this GIF:

We want to animate each line in a way that when the first part of a line moves out of the box, the last part of the joining perpendicular line moves in. This will create the illusion that the lines move around the corners.

Let’s take a look at our coordinate system to define the line points correctly:

The points for the left line are (0,200) and (0,-400), for the bottom one (200,200) and (-400,200), and for the right one (200,0) and (200,600):

<div>
    <svg width="200" height="200">
        <line class="top" x1="0" y1="0" x2="600" y2="0"/>
        <line class="left" x1="0" y1="200" x2="0" y2="-400"/>
        <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
        <line class="right" x1="200" y1="0" x2="200" y2="600"/>
    </svg>
</div>

For each line, we’ll need to set a different translation value on hover:

div:hover svg line.top {
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px);
}
 
div:hover svg line.bottom {
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}
 
div:hover svg line.left {
  -webkit-transform: translateY(400px);
  transform: translateY(400px);
}
 
div:hover svg line.right {
  -webkit-transform: translateY(-400px);
  transform: translateY(-400px);
}
}

Check out the code in action.

Now we got the main idea right, this is the effect we are after. Let’s make this look pretty :)

cinia scelerisque adipiscing. Vivamus dictum consectetur magna vitae dapibus. Integer consequat facilisis nunc, sed volutpat elit bibendum non. Suspendisse sagittis, tortor vitae vulputate suscipit, mi dolor mollis nisl, in varius nunc mi eget justo. Morbi orci ligula, faucibus et pellentesque eu, commodo convallis lacus. Integer augue tellus, commodo sed cursus quis, molestie cursus dui. Aenean faucibus, lorem..

cinia scelerisque adipiscing. Vivamus dictum consectetur magna vitae dapibus. Integer consequat facilisis nunc, sed volutpat elit bibendum non. Suspendisse sagittis, tortor vitae vulputate suscipit, mi dolor mollis nisl, in varius nunc mi eget justo. Morbi orci ligula, faucibus et pellentesque eu, commodo convallis lacus. Integer augue tellus, commodo sed cursus quis, molestie cursus dui. Aenean faucibus, lorem..

cinia scelerisque adipiscing. Vivamus dictum consectetur magna vitae dapibus. Integer consequat facilisis nunc, sed volutpat elit bibendum non. Suspendisse sagittis, tortor vitae vulputate suscipit, mi dolor mollis nisl, in varius nunc mi eget justo. Morbi orci ligula, faucibus et pellentesque eu, commodo convallis lacus. Integer augue tellus, commodo sed cursus quis, molestie cursus dui. Aenean faucibus, lorem..

Donec lacinia scelerisque adipiscing. Vivamus dictum consectetur magna vitae dapibus. Integer consequat facilisis nunc, sed volutpat elit bibendum non. Suspendisse sagittis, tortor vitae vulputate suscipit, mi dolor mollis nisl, in varius nunc mi eget justo. Morbi orci ligula, faucibus et pellentesque eu, commodo convallis lacus. Integer augue tellus, commodo sed cursus quis, molestie cursus dui. Aenean faucibus, lorem ut ultricies interdum, metus quam fringilla orci, vitae iaculis felis enim ultricies ipsum.

Nullam iaculis lectus eu orci dignissim vel imperdiet arcu lacinia. Maecenas quam quam, tempor quis fermentum sit amet, viverra tempus ligula. Nunc tincidunt arcu eu lacus dapibus vehicula. Duis sed augue vitae arcu iaculis rhoncus. Quisque quis ornare sem. Sed porttitor ultricies quam eget tempor. Nullam consequat molestie massa in faucibus. - See more at: http://slashdemo.blogspot.in/2014/03/witch-hunter-game-to-boost-gaming_20.html#sthash.FkQfPFGu.dpuf.