https://stackoverflow.com/questions/23397640
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian
Here's how I would do it:
HTML
<div id="socialBar">
<a href="facebookShare" class="facebook">Facebook</a>
<a href="twitterShare" class="twitter">Twitter</a>
<a href="gplusShare" class="gPlus">G+</a>
<a href="email" class="email">Email</a>
</div>
Note no secondary div
CSS
#socialBar {
height:48px;
padding-left:10px;
background: rgb(255, 255, 255);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(204, 204, 204, 1) 53%, rgba(140, 140, 140, 1) 73%, rgba(204, 204, 204, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 1)), color-stop(51%, rgba(0, 0, 0, 1)), color-stop(53%, rgba(204, 204, 204, 1)), color-stop(73%, rgba(140, 140, 140, 1)), color-stop(100%, rgba(204, 204, 204, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(204, 204, 204, 1) 53%, rgba(140, 140, 140, 1) 73%, rgba(204, 204, 204, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(204, 204, 204, 1) 53%, rgba(140, 140, 140, 1) 73%, rgba(204, 204, 204, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(204, 204, 204, 1) 53%, rgba(140, 140, 140, 1) 73%, rgba(204, 204, 204, 1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(204, 204, 204, 1) 53%, rgba(140, 140, 140, 1) 73%, rgba(204, 204, 204, 1) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0);
/* IE6-9 */
}
#socialBar a
{
display:inline-block;
width:32px;
height:32px;
background-image:url(http://cdn.robcubbon.com/wp-content/uploads/2012/02/social-media-gif.gif);
/*PLease use your own image preferably one with a trasparent background*/
text-indent:-999px;
background-position: 0 -32px;
}
#socialBar a.facebook
{
background-position: -96px -32px;
}
#socialBar a.facebook:hover
{
background-position: -96px 0;
}
#socialBar a.twitter
{
background-position: -128px -32px;
}
#socialBar a.twitter:hover
{
background-position: -128px 0;
}
#socialBar a.email
{
background-position: -64px -32px;
}
#socialBar a.email:hover
{
background-position: -64px 0;
}
#socialBar a.gPlus
{
background-position: 0 -32px;
}
#socialBar a.gPlus:hover
{
background-position: 0 0;
}
Example: http://jsfiddle.net/b34Gs/
How It Works
I used http://www.colorzilla.com/gradient-editor/ to edit you gradient to stop halfway up the bounding div which is given a fixed height.
Next I've set up the a tags to be inline-blocks to be the height and width of the icons. Then the inner text is shifted out of the viewport with text-indent.
I have then used CSS Spriting to give the icons the appropriate background using only one image.
As an added bonus, I've added a simple hover effect, again ussing the sprite, by shifting the background image.
Update
So baisically there is no "bar". What there is, is a fairly complicated gradient that is white for the top 50% set as the background of a div. This gives the appearance of the link icons being partially embeded in a "bar". This can be demostrated by replacing the gradient with a solid background colour: http://jsfiddle.net/b34Gs/2/.
Plan B
In your question, you mention "disabling influence". My above solution does not do this, it provides the illusion of it by manipulating the background gradient. What you are referring to is known as removing an element from the natural flow of the document. This is commonly done in two ways: float:left|right or position:absolute;. As a matter of personal preference, if I can keep elements in their natural flow, I will.
For my following examples the HTML is the same as the above. I have also restored your original, full-height gradient to #scocialBar.
Floats
#socialBar a
{
position:relative; //New
float:left; //New
top:-16px; //New
margin-right:5px; //New
display:inline-block;
width:32px;
height:32px;
background-image:url(http://cdn.robcubbon.com/wp-content/uploads/2012/02/social-media-gif.gif);
text-indent:-999px;
background-position: 0 -32px;
}
position:relative; performs the function of indicating that offsets are relative to the elements' 'natural' position. top:-16px; is indicating that the elements' top edge is offset by 16px. margin-right:5px; gives some horizontal spacing to the <a> tags.
Example: http://jsfiddle.net/b34Gs/4/
Absolute Positioning
Add position:relative to the #scocialBar style. This performs the function of indicating that child elements are positioned relative to this element. As we are adding position:absolute to the child <a> elements we have to explicitly position them as they will default to the top, left corner of their nearest ancestor element with position:relative
#socialBar a
{
position:absolute;
top:-16px;
display:inline-block;
width:32px;
height:32px;
background-image:url(http://cdn.robcubbon.com/wp-content/uploads/2012/02/social-media-gif.gif);
text-indent:-999px;
background-position: 0 -32px;
}
#socialBar a.facebook
{
background-position: -96px -32px;
}
#socialBar a.twitter
{
left:50px;
background-position: -128px -32px;
}
#socialBar a.email
{
left: 130px;
background-position: -64px -32px;
}
#socialBar a.gPlus
{
left: 90px;
background-position: 0 -32px;
}
Example: http://jsfiddle.net/b34Gs/1/
NOTE I have borrowed the sprites from some one elses website for this example. You whould use your own and makesure that it has a transparent background so the rounded edges are handled better than what the example has.
