I'm trying to make this tooltip arrow point to the right towards the link.
CSS
.tooltipside
{
position: relative;
cursor: help;
display: inline-block;
outline: none;
}
.tooltipside span
{
visibility: hidden;
position: absolute;
bottom: -22px;
z-index: 999;
width: 52px;
margin-left: -63px;
padding: 2px;
border: 1px solid #80a7ba;
background-color: white;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltipside:hover
{
border: 0; /* IE6 fix */
}
.tooltipside:hover span
{
visibility: visible;
}
.tooltipside span:before,
.tooltipside span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #80a7ba;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltipside span:before
{
border-top-color: #ccc;
bottom: -8px;
}
The html is
<a href='#' class='tooltipside'><span>
<img src='http://cdn2.iconfinder.com/data/icons/32pxmania/misc_57.png'
border='0' width='52' height='52'></span>LINK</a> TEST TEST TEST</b>
It currently points down in the center of the tooltip I need it to point right towards the link. How would I do this?
Thanks
Is this what you are after? http://jsfiddle.net/kX5kH/
I used the positioning to move the arrow, then swapped around the transparent broders to make the arrow point the right way.
NOTE: I added a parent <div> and positioned it absolutely, because it was otherwise hugging the edge and you couldn't see the tool tip.
Also there's no starting <b> tag.
One last note, I noticed you had a IE6 fix, which is intriguing because none of this will work in IE6. Box shadows, before/after selectors, and transparent borders will not appear correctly. But honestly I wouldn't be concerned about IE6 =P
Hope this helps.
Related
I design an arrow top of an ul box menu like this picture:
You can see, I set a border around of box:
border: .1rem solid rgba(228,234,248,.5);
but Is there a way to set a border around of arrow?
.mega-dropdown-menu:before {
content: "";
border-bottom: 8px solid #fbfbfb;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
position: absolute;
top: -7px;
left: 13.1rem;
z-index: 10;
}
Well, no ways to set a border around the arrow as the triangle you made is itself a border. But there's a solution, you can overlay the triangles on each other like, this will give you a border effect around your triangle.
div {
position: relative;
/* make sure you use this else your elements will fly in the wild */
}
div:before {
content: "";
border-bottom: 10px solid #aaa;
border-right: 11px solid transparent;
border-left: 11px solid transparent;
position: absolute;
left: -2px;
top: -2px;
}
div:after {
content: "";
border-bottom: 8px solid #ddd;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
position: absolute;
}
<div></div>
How can I add a box-shadow in the bottom of my border, in the bottom of my H2??
HTML:
<h2> Hi </h2>
CSS:
h2 {
border-bottom: 1px solid grey;
}
JSFiddle
key is playing with the negative value on the spread value, so something like:
h2 {
border-bottom: 1px solid grey;
box-shadow: 0 3px 8px -5px rgba(0,0,0,.5);
}
Should be able to use:
div h2 {
box-shadow: 10px 10px grey;
}
http://www.w3schools.com/css/css3_shadows.asp
Try this
h2 {
border-bottom: 1px solid grey;
position: relative;
}
h2:after{
content: '';
position: absolute;
height: 1px;
bottom: -1px;
left: 0;
right: 0;
box-shadow: 0 2px 2px red;
}
<h2> Hi </h2>
I think you need box-shadow :)
I'm applying a box-shadow to an element with left and right borders.
I want the box shadow to stop so it doesn't appear underneath those borders.
Is there any way to achieve this without too many crazy wrappers?
<div id="button">Box-shadow, stop before the red borders!</div>
Here's a JSFiddle: http://jsfiddle.net/AHUEY/
You could do this with a pseudo element absolutely positioned relative to your target, instead of a box shadow:
#button {
position: relative;
background: #ccc;
text-align: center;
width: 400px;
border-left: 10px solid red;
border-right: 10px solid red;
}
#button::before {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 5px;
background: black;
}
demo
This is possible using the spread parameter of the box shadow.
Please see the working fiddle
http://jsfiddle.net/prashant_11235/dkR4H/
#button {
background: #ccc;
text-align: center;
width: 400px;
height: 25px;
border-left: 10px solid red;
border-right: 10px solid red;
box-shadow: 0px 15px 0px -10px black;
}
Replace border-right and border-left with box-shadow:
#button {
background: #ccc;
text-align: center;
width: 400px;
box-shadow: 10px 0 0 0 red, -10px 0 0 0 red, 0 5px 0 0 black;
}
http://jsfiddle.net/eEnpp/
I can figure out how to do this. This topic help me out: adding the arrow to dropdown pills for twitter bootstrap?
By adding
.dropdown-menu::after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
border-left: 8px solid transparent;
content: '';
}
I was able to get the arrow show. However, there is no border around the top of arrow so it just looks like a gap in the dropdown now. does anyone know how to add the border to the up arrow?
Add a rule for border-top. Something like
border-top: 8px solid white;
solved by adding following markup:
.savedsearchWrapper .dropdown-menu:after {
position: absolute;
top: -6px;
left: 23px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.advancedSearchDropDown .dropdown-menu:before {
position: absolute;
top: -7px;
left: 17px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
Those are bootstrap styles but the selector was too specific for my implementation.
Basically, I need to make a header, styled like this:
Is there a full css way, or do I need to use background-images?
Yes, you can do it using only CSS, but it's not easy and the result is... well, ugly.
You might want to check this as well: CSS for inverted curved tabs
EDIT: I got a better idea today, check this http://dabblet.com/gist/2762234
The CSS is as follows:
h1 {
min-width: 150px;
height: 30px;
margin: 0;
/**border: solid 2px #979797;/**/
border-bottom: none;
border-radius: 8px 0 0 0;
box-shadow: -2px -2px 2px #a5a5b1;
display: inline-block;
position: relative;
background: linear-gradient(#e8e8ea, #f8f8fa);
}
h1:before {
/**top: -2px;/**/
/**/top: 0;/**/
right: -23px;
width: 30px;
height: 30px;
border-radius: 0 8px 0 0;
/**border: solid 2px #979797;/**/
border-left: none;
border-bottom: none;
box-shadow: 2px -2px 2px #a5a5b1;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
background: linear-gradient(#e8e8ea, #f8f8fa);
content: '';
}
h1:after {
right: -44px;
/**bottom: 0;/**/
/**/bottom: 2px;/**/
width: 16px;
height: 8px;
/**border: solid 2px #979797;/**/
border-top: none;
border-right: none;
border-radius: 0 0 0 8px;
box-shadow: inset 2px -2px 2px #a5a5b1, -4px 4px 2px #f8f8fa;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
content: '';
}
div {
min-height: 130px;
margin-top: -7px;
/**border: solid 2px #979797;/**/
border-radius: 0 8px 0 0;
box-shadow: -2px -2px 2px #a5a5b1, 2px -2px 2px #a5a5b1;
background: linear-gradient(#f8f8fa, #f6f6f8);
}
It can be made to look prettier, but that would require a fixed width for the heading and a pseudo-element on the div.
You can probably achieve this by using a couple of elements stacked over eachother.
I don't think that is something you would want for production, so my advice would be to go for the background image.