I'm following the example posted here for making custom css tooltips.
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 99;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
I am wondering if there is a way to not have the tooltip push out it's parent elements outline in FireFox, it seems to work fine in Chrome
div {
display: inline-block;
padding: 20px;
border: 2px solid #000;
outline: 2px solid #F00;
}
see example here
I don't see how you can possibly fix this. I wonder if this is a Firefox bug?
The only thing that comes to mind is to use box-shadow instead of outline:
http://jsfiddle.net/thirtydot/HgeVh/9/
This has the downside that you're losing the outline in IE8, if that matters.
Related
I know there are a lot of examples for customizing the tooltip of an html element but I can't make it working.
I have a simple anchor that looks like the following:
?
And then I created the following css style (I copied from an example):
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #1111ee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #11eeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
As you can see in the fiddle I created, the result is not what I expect.
So, what do I have to change?
https://jsfiddle.net/Bonomi/36kp45e2/1/
Just make the positioning of the a tag relative
a[title] {
position: relative;
}
That way your tooltip will now be absolute to the anchor tag, not to the document.
Updated fiddle:
https://jsfiddle.net/36kp45e2/2/
I am trying to come up with a tab control and included in here is the link to jsfiddle and what I am trying to accomplish. The issue I have in here is to eliminate the curve at the end of the unordered list after Alpha. I tried it in a lot of different ways. It looks like the next tab has been cut off.
http://jsfiddle.net/v7u3xsxk/
CSS & The Tab.
<ul class="tabrow">
<li id="a" class="current">Adam</li>
<li id="b">Andrew</li>
<li id="c">Alpha</li>
</ul>
.tabrow {
list-style: none;
margin: 50px 0 0px;
padding: 0;
line-height: 35px;
height: 37px;
overflow: hidden;
font-family: Arial,Helvetica, sans-serif;
/*position: relative;*/
width:auto;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
position: relative;
z-index: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 30px;
height: 37px;
line-height: 37px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.current {
background: #FFF;
color: #333;
z-index: 2;
border-top-color: #FFF;
}
.tabrow:before {
position: absolute;
content: " ";
width: 100%;
top: 0;
left: 0;
border-top: 1px solid #AAA;
z-index: 1;
}
.tabrow li:before,
.tabrow li:after {
border: 1px solid #AAA;
position: absolute;
top: -1px;
width: 6px;
height: 6px;
content: " ";
}
.tabrow li:before {
left: -7px;
border-top-right-radius: 6px;
border-width: 1px 1px 0px 0px;
box-shadow: 2px 0px 0 #ECECEC;
}
.tabrow li:after {
right: -7px;
border-top-left-radius: 6px;
border-width: 1px 0px 0px 1px;
box-shadow: -2px 0px 0 #ECECEC;
}
.tabrow li.current:before {
box-shadow: 2px 0px 0 #FFF;
}
.tabrow li.current:after {
box-shadow: -2px 0px 0 #FFF;
}
Not sure why you've used the before and after elements. Seems to work if these are removed. http://jsfiddle.net/v7u3xsxk/5/
.tabrow {
list-style: none;
margin: 50px 0 0px;
padding: 0;
line-height: 35px;
height: 37px;
overflow: hidden;
font-family: Arial,Helvetica, sans-serif;
/*position: relative;*/
width:auto;
}
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
border-radius: 5px 5px 0 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 30px;
height: 37px;
line-height: 37px;
}
.tabrow a {
color: #555;
text-decoration: none;
}
.tabrow li.current {
background: #FFF;
color: #333;
z-index: 2;
border-top-color: #FFF;
}
.tabrow li.current {
box-shadow: 2px 0px 0 #FFF;
}
.tabrow li.current {
box-shadow: -2px 0px 0 #FFF;
}
If you remove position: relative; from your .tabrow li class it will solve the problem.
Updated code:
.tabrow li {
border: 1px solid #AAA;
background: #D1D1D1;
background: -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
display: inline-block;
//removed line here
z-index: 0;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
text-shadow: 0 1px #FFF;
margin: 0 -5px;
padding: 0 30px;
height: 37px;
line-height: 37px;
}
Update: This method affects the styling on the rest of the menu.
I have a form label as follows:
<label id="jform_email-lbl" for="jform_email" class="hasTip required"
title="Email Address::Please enter the email address associated with your User
account.<br />A verification code will be sent to you. Once you have
received the verification code, you will be able to choose a new password for
your account.">Email Address:<span class="star"> *</span></label>
I want to apply a different style to my popover 'title' element (#000).
Not the 'Email Address:' label that shows on the form (which is #fff).
Thought I may be able to do the following, but it doesn't work:
label#jform_email-lbl[type="title"] {
color: #000;
}
****EDITED**
The answer is as follows - for anyone else trying to find the right css:**
div.tip .tip-title {
color: #E77600 !important;
font-weight: bold;
}
div.tip .tip-text {
color: #979797 !important;
font-weight: bold;
}
Later edit, i understood the question :
<!DOCTYPE html>
<html>
<head>
<style>
label {
color: #900;
text-decoration: none;
}
label:hover {
color: red;
position: relative;
}
label[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: red;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
</style>
</head>
<label id="jform_email-lbl" for="jform_email" class="hasTip required" title="something">Email Address:<span class="star"> *</span></label>
</html>
I am following this tutorial to create CSS 3 button with Icon. But the problem in this tutorial Icon height depends on font-size. If I increase font-size of text, icon fits well but if I try to reduce the font-size, it doesn't fit well.Image I am using is 40x30
a.button {
background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #dbdbdb));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#dbdbdb')";
border: 1px solid #fff;
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 5px 5px;
text-decoration: none;
text-shadow: #fff 0 1px 0;
float: left;
margin-right: 15px;
margin-bottom: 15px;
display: block;
color: #597390;
line-height: 38px;
font-size: 15px;
font-weight: bold;
}
a.button:hover {
background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #ffffff),color-stop(1, #eeeeee));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#ffffff', EndColorStr='#eeeeee')";
color: #000;
display: block;
}
a.button:active {
background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #dbdbdb),color-stop(1, #ffffff));
filter: progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(startColorStr='#dbdbdb', EndColorStr='#ffffff')";
text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
margin-top: 1px;
}
a.button {
border: 1px solid #979797;
}
a.button.icon {
padding-left: 11px;
}
a.button.icon span{
padding-left: 48px;
display: block;
background: url(../img/gmail2.png) no-repeat;
}
Your statement is a little ambiguous and lacks a question, but I'll take a stab.
In this scenario, font-size will always play a small factor, as it will determine the height of the icon. At some point you are going to need to know some details about the button size, but it doesn't have to be affected by font. If you set the button height and the img{ height:100%; } the image will scale to fit the area.
<div id="container">
<h1><img src="http://placedog.com/50/50" alt="" />Button</h1>
</div>
combined with
#container{
border: 2px solid black;
width: 200px;
height: 20px;
}
#container img{
height:100%;
}
Should get you something you close to what you're looking for. I've whipped up a small jsfiddle to demonstrate one way to accomplish this.
It would be helpful if you could share your code.
In the css3 buttons examples of the link you provided, if I decrease font-size and set the following CSS style, works.
span { display: block; }
span is the tag that wraps the text inside the buttons.
I'm using the following code for pure css speech bubble but however i still can not add border to the whole bubble include the arrow at down side
HTML
<div class="bubble">Welcome</div>
CSS Code
.bubble {
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}
Results
if i added border code border:2px solid #493A34; at class .bubble
Results
Problem
How to add the border to the arrow as well ? ~ any idea
EDIT: Here is the fiddle link with box-shadow applied.
You can make a slightly larger brown arrow with the :after psudo-element, and position it behind the smaller green arrow (made with :before), and down 2px to create a border effect.
here's the fiddle: http://jsfiddle.net/rhGCb/
And the css:
.bubble {
border:2px solid #493A34;
height: 30px;
width: 574px;
background-color: #9FC175;
background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
background-image: linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
border-radius: 5px;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),3px 3px 0 hsla(0,0%,0%,.1);
text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
position: absolute;
}
.bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #493A34;
bottom: -27px;
content: '';
position: absolute;
right: 23px;
}
.bubble:after {
border-bottom: 25px solid transparent;
border-right: 25px solid #9FC175;
bottom: -23px;
content: '';
position: absolute;
right: 25px;
}
A bit of a trick, but you can add a box-shadow that behaves as a border (meaning, blur is set to 0):
.speech-bubble{
/* ... */
/* 2px = border-width #333 = border-color */
-webkit-box-shadow:0 0 0 2px #333;
box-shadow:0 0 0 2px #333;
}