I have a dropdown list menu with small triangle pointer, when I hover the first item I want the small triangle also change to black color.
This is my JS Fiddle, Thanks.
CSS
.username .messages {
position:absolute;
margin:22px 0px 0px -70px;
width:200px;
max-height:auto;
color:black;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.username .messages:before {
content:'.';
display:block;
position:absolute;
margin-left:-10px;
left:50%;
top:-18px;
width:0;
height:0;
border:10px solid black;
color:black;
border-color:transparent transparent #fff;
}
Place the arrow as the before pseudoelement of the first link
Example fiddle: http://jsfiddle.net/ebcho06a/5/
.messages a:first-child:before {
content:'';
display:block;
position:absolute;
margin-left:-10px;
left:50%;
top:-20px;
width:0;
height:0;
border:10px solid black;
color:black;
border-color:transparent transparent #fff;
}
.messages a:first-child:hover:before {
border-color:transparent transparent #000;
}
Effect on mouseover
Related
In my case I wanted to increase the gap between text and the underline (it is hearder). So I used border-bottom property to do that.But in here I want to use text-shadow, and same shadow for the underline (which in my case is bottom border). how can I do that.
html
<h1 class="headerone">stackoverflow</h1>
css
h1.headerone{
border-bottom:2px solid black;
text-shadow:0 0 5px black;
/* text-decoration:underline; I didn't use this because gap is low */
}
find fiddle demo
h1.headerone{
text-shadow:0 0 5px black;
/* text-decoration:underline; I didn't use this because gap is low */
position:relative;
}
h1.headerone:before{
content:'';
position:absolute;
bottom:-2px;
left:0;
width:100%;
height:2px;
background:#000;
box-shadow:0 0 5px black;
}
Try this css it may help you.
h1.headerone{
border-bottom:2px solid black;
text-shadow:0 0 5px black;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
/* text-decoration:underline; I didn't use this because gap is low */
}
Fiddle Demo
in css :
h1.headerone{
border-bottom:2px solid black;
text-shadow:0 0 5px black;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
<h1 class="shadow">stackoverflow</h1>
CSS Fiddle Demo
h1.shadow {
text-shadow:0 0 5px black;
max-width: 200px;
}
h1.shadow::after {
margin-top: 20px; /* distance goes here */
display: block;
content: ' ';
height: 2px;
background: black;
box-shadow: 0 0 5px black;
}
Im creating a css only tooltip for my new website project.
This tooltip shows right on touchdevises. The only problem is that touchdevises can't close the tooltip.
How can I modify the code that touchscreen users can close the tooltip if they touch somewhere around the tooltip? Or maybe if they touch on the tooltip visible text link?
I just want to use css if possible.
The CSS that I have:
a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
This is the html:
Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip.</span>
Thanks for help me out guys!
Regards, Dylan
I got no problems as u describet but i tryed this and it works even better on my device. So check it that helps you.
Fiddle
HTML:
<a href="#" class="tooltip">
Normal Text
</a>
<span>
<strong>Tooltip title</strong><br />
This would be the content of the tooltip.
</span>
CSS:
a.tooltip {
outline:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip:hover {
text-decoration:none;
cursor: help;
}
span {
z-index:10;display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:220px;
line-height:17px;
}
a.tooltip:hover + span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
span {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
I'm trying to create a navigation bar. What I want is when I hover to the block item it changes the background. My problem is the block is a little bigger than the link, so if I move the mouse outside the link area I can't click on it.
This is the jsfiddle I created, I changed the background color of the link when hovering over for a better visual aid
http://jsfiddle.net/Tx8MK/3/
so how can I make the link block fit the list block.
Thank you
#navBar li{
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
border:none;
}
#navBar li:hover{
border: 1px solid #777777;
border-bottom:none;
padding: 3px 9px 4px 9px;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding: 0 25px;
}
#navBar li a:hover{
text-decoration: none;
color:#000;
display:block;
padding: 0 25px;
background:#fff;
}
Instead of giving the padding to the list items, give it to the anchors. Updated fiddle below:
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
padding: 4px 10px 4px 10px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
...
}
http://jsfiddle.net/hQJye/
The problem was your padding applied to your LI. Removing that made the <a> fill your LI.
http://jsfiddle.net/Tx8MK/5/
html, body {
margin: 0;
padding: 0;
}
body {
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}
nav {
position:absolute;
top:0;
width:100%;
background: #000;
color: #fff;
list-style: none;
}
nav section{
margin:10px 20px;
}
#navBar li{
float:left;
display:block;
text-align:center;
position:relative;
margin-right:30px;
border:none;
}
#navBar li:hover{
border: 1px solid #777777;
border-bottom:none;
/* Background color and gradients */
background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
/* Rounded corners */
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
#navBar li a{
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
padding: 0 25px;
}
#navBar li a:hover{
text-decoration: none;
display:block;
color:#000;
background:#ff0000;
}
I'm trying to create a triangle clickable button like div, in the attached image is what I want to actually achieve. image
This is what I've reached so far,JsFiddle
HTML:
<div class="input"><</div>
CSS:
body {padding:40px;}
.input {
text-decoration:none;
padding:5px 10px;
background:#117ebb;
font-size:9px;
color:#fff;
border-radius:5.5px 0px 0px 5px;
box-shadow: 0px 5px 3px #003355;
position:relative;
width:1px;
height:12px;
}
.input:after {
position:absolute;
top:0px;
left:-10px;
content:" ";
width: 0;
height: 0px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right:13px solid #117ebb;
border-radius:0px 0px 0px 20px;
}
css pure triangle and with jquery you could add click events:
html
<div class="input"></div>
jquery
$(document).ready(function(){
$(".input").click(function(){
alert('hello arrow');
});
});
css
body {padding:40px;}
.input{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
cursor: pointer;
}
http://jsfiddle.net/TvJ6t/
I have a top menu like the following image
As you can see the outer grey border is with border radius. But the selected Home menu filled it as square.
What I want is Home Selected menu should be filled accordingly.
Here's my css codes
#navigation-wrap{width:100%; border-bottom: 1px solid #CCC;moz-box-shadow: 0px 5px 8px -2px #F5F5F5;-webkit-box-shadow: 0px 5px 8px -2px #F5F5F5;box-shadow: 0px 5px 8px -2px #F5F5F5;}
#navigation{margin:0 auto; border: 3px solid #CCC; border-bottom:none; position:absolute; right:0; top:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -moz-box-shadow:0px 0px 4px #EEE; -webkit-box-shadow:0px 0px 4px #EEE; box-shadow:0px 0px 4px #EEE;}
#navigation ul{list-style:none;}
#navigation li{float:left; display:block; letter-spacing:1px; border-bottom: 3px solid #CCC;}
#navigation a{float:left; display:block; height: 30px; line-height:30px; position:relative; padding:0 10px; text-decoration:none; border-bottom: none;}
#navigation a:hover {background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;}
.current-menu-item a{background: #000; text-shadow: 1px 1px 1px #FFF; color:#fff;}
Thank you.
Add identical border-radius properties to #navigation a.
To apply that to just the Home button, use #navigation a:first-child. And if you'd like for only the left side of the element to have a border radius, use border-top-left-radius and border-bottom-left-radius.
If it is a wordpress generated menu you can get the respective menu id of home by inspecting the element using firebug or other. then you can apply css for border radius directly to a single menu element by calling its respective id