How is it possible to get the wavy line in a textfield in all browsers, like google?
Google uses a repeated base64 encoded image as a span below the input. You can type stuff in your span and it will appear below it.
.error:hover {
background: url(data:image/gif;base64,R0lGODlhCgAEAMIEAP9BGP6pl//Wy/7//P///////////////yH5BAEKAAQALAAAAAAKAAQAAAMROCOhK0oA0MIUMmTAZhsWBCYAOw==) repeat-x scroll 0 100% transparent;
display: inline-block;
padding-bottom: 1px;
}
<span class="error">hello</span>
Disclaimer: You have to hover over the span for the effect to appear.
As mentioned here;
With Content:
.underline:after {
content: '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~';
position: absolute;
width: 100%;
left:0;
overflow: hidden;
top:100%;
margin-top: -.25em;
letter-spacing:-.25em;
}
or with image:
.underline {
display: inline-block;
position:relative;
background: url(http://i.imgur.com/HlfA2is.gif) bottom repeat-x;
}
Try using text-decoration and text-decoration-skip-ink.
The text-decoration-skip-ink: none; can be drawn across the full length of the text content.
span {
text-decoration: red wavy underline;
text-decoration-skip-ink: none;
}
<span>asdsdfsf</span>
Related
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I have text that appears on top of an image when you hover over the image. Originally, I also had the entire image go opaque upon hovering.
Now I've decided I want to make only a section of the image go opaque upon hovering, the part with the text. I tried the tutorial here. Unfortunately, once I made those changes, nothing appears when I hover over the image -- not the text or any opaque filter.
Here is my html file:
<div class="container">
<div class="main">
<div class = "JFK">
<h6>JFK</h6>
<div class = "transbox">
<p> to
from</p>
</div>
</div>
/* continues on*/
Here is my css:
JFK {
position: relative;
left: 110px;
height: 300px;
width: 300px;
bottom: 40px;
background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/03/9b/2d/f2/new-york-city.jpg);
line-height: 200px;
text-align: center;
font-variant: small-caps;
display: block;
}
.transbox{
margin: 30px;
background-color: $ffffff;
border: 1px solid black;
opacity: 0.6;
display: none;
}
.JFK h6{
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
}
.transbox p{
position: relative;
top: -90px;
word-spacing: 100px;
font-size: 30px;
font-variant: small-caps;
font-weight: 600;
color: #c4d8e2;
display: none;
}
.JFK p a{
color: #c4d8e2;
top: -30px;
}
.JFK:hover transbox p {
display: block;
}
.JFK:hover{
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
I thought I had added a wrapper class as suggested here by adding the transbox div. I also tried the background-color:rgba(255,0,0,0.5); trick mentioned here. No luck -- still nothing happens upon hover. Any suggestions?
Your problem lies with these 2 pieces of code in your css:
.JFK:hover transbox p {
display: block;
}
.JFK: hover transbox{
display: block;
opacity:0.6;
}
Firstly . is missing from the class transbox - is should be .transbox
Secondly there is a space between .JFK: and hover remove the space and it should all work.
.JFK:hover .transbox p {
display: block;
}
.JFK:hover .transbox{
display: block;
opacity:0.6;
}
Your code is not complete. In the "tutorial" you said you tried, <div class = "transbox"> is just a box with transparent background that is positioned above another box, with a background-image. You said you need "only a section of the image go opaque upon hovering".
Also, your CSS is not valid. "JFK" is a class, in the first row, so is ".JFK".
Then, is
.transbox {
margin: 30px;
background-color: #ffffff;
}
You wrote again with errors.
You can use:
.transbox{
margin: 30px;
background-color: rgba(255,255,255,0.6);
border: 1px solid black;
}
Please refer this fiddle , http://jsfiddle.net/shrikanth/79AfQ/
After hovering header(h2), div element(popup) is displayed , which is as per design.
However I can't navigate to new div.(new div gets disappear soon after moving out h2 element)
Is there any fix for this , so that user can click on headrer then can click on contact of another div element?
HTML
<h2>What is CSS?</h2>
<div id="popup">
Contact
</div>
CSS
h2 {
position:relative;
top:22px;
left:44px;
width: 170px;
height:33px;
text-align:center;
}
#popup {
width: 240px;
background: #727272;
padding: 10px;
border-radius: 6px;
color: #FFF;
position: relative;
top:15px;
left:44px;
font-size: 12px;
line-height: 20px;
display:none;
}
h2:hover+ #popup {
display:inline-block;
}
h2:hover {
background-color:green;
}
#popup:before {
content:"";
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent #727272 transparent;
position: absolute;
top: -15px;
left: 92px;
}
Just change the hover pseudo-selector rule to include the #popup element, too (assuming your goal is just to be able to click the contact link in the #popup)
h2:hover+ #popup, #popup:hover{
display:inline-block;
}
If you want to use this approach, I suggest adding padding to the h2 element to allow your mouse to leave it without immediately deactivating the hover state, or wrapping it with a larger, invisible element.
Another way would be to add the #popup inside the h2 and absolutely position it.
This way, when you're hovering over the popup, you'll be hovering over the h2 as well.
One thing to note here is not to leave any spaces between h2 and the popup, like ReeceJHayward suggested.
<h2>What is CSS?
<div id="popup">
Contact
</div>
</h2>
DEMO:
http://jsfiddle.net/79AfQ/7/
I'm fighting with (yet-another) IE8 bug.
Basically, I have a small square container, with an arrow inside built with the :before and :after pseudoelements. The HTML goes something like this:
<div class="container">
<div class="arrow" />
</div>
And the CSS for that is
.container {
height: 58px;
width: 58px;
background-color: #2a5a2a;
}
.arrow {
padding-top: 7px;
}
.arrow:before {
margin: 0 auto;
content: '';
width: 0;
border-left: 12px transparent solid;
border-right: 12px transparent solid;
border-bottom: 13px gray solid;
display: block;
}
.arrow:after {
margin: 0 auto;
content: '';
width: 12px;
background-color: gray;
height: 14px;
display: block;
}
Now, I want the arrow inside it to change color when I hover over the container. I added this CSS:
.container:hover .arrow:after {
background-color: white;
}
.container:hover .arrow:before {
border-bottom-color: white;
}
And that's where the problem begins. That works on most browsers, but on IE8 the background-color property is not overridden. So I get only the tip of the arrow with the new color, but not the square that makes the "body" of it.
To make things more interesting, if I add the following to also change the container background-color to something slightly different, then everything starts to work and the background-color for the arrow changes!
.container:hover {
background-color: #2a5a2b;
}
If I only set the :hover status for the container, and I set THE SAME background color that it already had, then IT DOESN'T WORK. I have to change it if I want the background-color to change.
Here's a jsfiddle if you want to try it: http://jsfiddle.net/Ke2S6/ Right now it has the same background color for the container on hover, so it won't work on IE8. Change one single digit and it'll start working.
So... any ideas?
I'm trying to accomplish something very, very similar to the below picture with CSS3 only.
The only difference is that the last div would have a pointed tip.
In my search for something similar to adapt, I've come across this js fiddle which comes very close to what I want to do, but introduces two problems: first, it's done with canvas, and second, it forces me to "draw" arrows effectively twice for each arrow -- one for the div, and one for the space before the next arrow. There has to be some cleaner way of doing this -- can someone provide me with some direction here?
What I need to know is how to construct what's shown in the above picture -- a series of overlapping div arrows -- with CSS3 only.
Try this - http://jsfiddle.net/ksNr3/8/
ul {
margin: 20px 60px;
}
ul li {
display: inline-block;
height: 30px;
line-height: 30px;
width: 100px;
margin: 5px 1px 0 0;
text-indent: 35px;
position: relative;
}
ul li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: -2px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #fff;
z-index: 0;
}
ul li:first-child:before {
border-color: transparent;
}
ul li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -15px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent #ccc;
z-index: 10;
}
ul li.active a {
background: orange;
z-index: 100;
}
ul li.active a:after {
border-left-color: orange;
}
ul li a {
display: block;
background: #ccc;
}
ul li a:hover {
background: pink;
}
ul li a:hover:after {
border-color: transparent transparent transparent pink;
}
UPDATED - Made it clickable and minimized the overlapping areas - http://jsfiddle.net/ksNr3/8/
The following CSS3 Solution does not use any images and is easy to work with.
I have created TWO fully commented examples that can be expanded further.
One example has arrows that are "visually" stacked against each other.
The other example is just like the image in your Question, with "end-caps" on the arrows.
Each example has a simple jQuery .click() event listener so you can see no matter where you are clicking in the breadcrumb, the anchor will receive the correct click event. Arrow tails work correctly.
Screenshot shows active CSS hover for NavBar's breadcrumb:
When CSS is disabled in the browser, the breadcrumb navigation gracefully falls back for accessibility requirements.
Reference: jsFiddle