Hi friends I am looking for a strictly CSS3 fix for opacity transitions on custom underlines using background-images and nested in a navigation list. I realise after some research that background-image transitions are not currently supported, I therefore attempted to construct an opacity transition using the pseudo class :before which I believe currently works in the latest versions of Chrome and Firefox. Any help that anybody could offer would be hugely appreciated, I've looked everywhere on the web and cannot find anybody else who has attempted to perform transitions on custom underline background-images so hopefully it might prevent a nice little challenge for somebody?
Here's the code I have currently:
.sf-menu, .sf-menu * {
margin:0 auto;
padding:0;
list-style: none;}
.sf-menu {
float: left;
margin-left:27%;}
ul.sf-menu li {
position:relative;
line-height:40%;
margin-left:10px;
margin-right:10px;}
ul.sf-menu > li {
float: left;}
ul.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */ }
ul.sf-menu li:hover > a {
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity:1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;}
ul.sf-menu li:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1;}`
You can also find the current framework for my site at www.mdwoodman.co.uk
Thanks in advance!
You can replace your background images with CSS borders and transition them, here is an approximation of your website:
ul li a {
color: white;
text-decoration: none;
font: bold 15px/150% sans-serif;
text-transform: uppercase;
padding: 2px 5px;
border-bottom: solid #384740 3px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
ul li a:hover {
color: #BDE2DF;
border-bottom-color: #66FFB2;
}
To transition border colors you can either grab the computed color, or state your colors in rgba or hsla, such as...
ul li a { border-bottom: solid rgba(102, 255, 178, 0.1); }
ul li a:hover { border-bottom: solid rgba(102, 255, 178, 1.0); }
http://jsfiddle.net/de9wT/
Related
I've been trying to figure out how to remove the highlight color from my mobile menu. In the image below you can see the white highlight around home. The highlight moves to whatever is clicked on. When a new page opens, the highlight is just a white line below the 'close' X in the top right.
https://i.stack.imgur.com/CT4Zd.png
https://i.stack.imgur.com/IYp2Q.png
I've been trying to set the border to 'none' for links on the menu or just to turn the border color to 006680 to match the background of the menu. Nothing seems to work.
.sidr-class-dropdown-menu li a, .sidr-class-fs-dropdown-menu li a
{
padding: 7px 20px;
font-family: "Alegreya SC";
font-size: 20px;
font-weight: 500;
text-align: center;
line-height: 1.5;
height: 100%;
border: none;
border-color: #006680;
}
.sidr-class-dropdown-menu li a::selection, .sidr-class-fs-
dropdown-menu li a::selection {
border: none;
border-color: #006680;
}
.sidr-class-dropdown-menu li a:active, .sidr-class-fs-dropdown-menu
li a:active {
border: none;
border-color: #006680;
}
.sidr-class-menu-link {
border: none;
border-color: #006680;
}
I have a contact form and I have it set exactly the way I like it, however the text is white, so when you type in it you cant see it. When you highlight it it is there so it is working, however people can't see what they are typing. I have it hosted here www.trutattoo.amdesigns.studio.com
and this is my CSS
form label,
form .label {
display: block;
margin-bottom: 20px;
}
input,
textarea {
margin-top: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: 800;
font-color: #000000;
border: 1px solid #000000;
outline: none;
-webkit-transition: border-color 0.2s;
-moz-transition: border-color 0.2s;
-ms-transition: border-color 0.2s;
-o-transition: border-color 0.2s;
transition: border-color 0.2s;
}
input[type="text"],
textarea {
padding: 10px;
width: 100%;
}
input[type="text"]:focus,
textarea:focus {
border-color: #161616;
}
input[type="checkbox"] {
display: none;
}
textarea {
margin-top: 20px;
height: 200px;
}
Just change
font-color: #000000;
border: 1px solid #000000;
000000 to any color you want.
Example change to #ff0000 is you want RED.
Hope it helps!
I succesfully implemented featherlight.js plugin on my wordpress blog to display some photos as a lightbox.
By default featherlight.js shows up the nextIcon and previousIcon only when the mouse hovers a certain area of the image.
But I would like the nextIcon/previousIcon to be always visible outside of the image when the lightbox is invoked.
Made some tests with "span.featherlight-next" resp. "span.featherlight-previous" so that the left/right icons are outside of the image...but until now I didn't find out how to do it.
Does someone know how to modify the CSS file so that the nextIcon and previousIcon to be always visible ?
Any help is greatly appreciated.
Thank you for your answer. Well, I came up with a solution which satisfies my needs. In fact I just moved the previous/next navigation icons inside the border of .featherlight-image, and the icons just are just visible on a mouse hover (which is the default).
First I set a bigger white border to the image:
.featherlight .featherlight-image {
max-width: 100%;
border: 32px solid #fff;
}
then I fine tuned .featherlight-next & .featherlight-previous and it's span classes based from featherlight.gallery.css, like this:
.featherlight-next,
.featherlight-previous {
display: block;
position: absolute;
top: 25px;
right: 0px;
bottom: 0;
left: 80%;
cursor: pointer;
/* preventing text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* IE9 hack, otherwise navigation doesn't appear */
background: rgba(0,0,0,0);
}
.featherlight-previous {
left: 0px;
right: 80%;
}
.featherlight-next:hover,
.featherlight-previous:hover {
background: rgba(0,0,0,0.0);
}
.featherlight-next span,
.featherlight-previous span {
display: none;
position: absolute;
top: 50%;
width: 80%;
font-size: 22px;
line-height: 50px;
/* center vertically */
margin-top: -40px;
color: #777;
font-style: normal;
font-weight: normal;
text-shadow: 0px 0px 3px #888;
}
.featherlight-next span {
right: 7px;
left: auto;
text-align: right;
}
.featherlight-previous span {
right: 0px;
left: 7px;
text-align: left;
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
/* Hide navigation while loading */
.featherlight-loading .featherlight-previous, .featherlight-loading .featherlight-next {
display:none;
}
Putting the background to white could also help hiding the white image border / frame so that the navigation icons are more distinctive when hovering:
.featherlight:last-of-type {
background: rgba(255, 255, 255, 0.6);
}
Hope this helps someone ;-)
Check the source. You'll find how the hide/show is achieved:
.featherlight-next span,
.featherlight-previous span {
display: none;
// ...
}
.featherlight-next:hover span,
.featherlight-previous:hover span {
display: inline-block;
}
So you simply need to override the display: none with your own custom rule.
My CSS is working perfectly fine on Google Chrome, Mozilla, and Opera. I have also tried Internet Explorer but that was a bust - Not that it matters.
My biggest issue right now is getting my CSS to work correctly on mobile safari (and other smartphone browsers like android).
HTML:
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
transition: all .2s ease, background-color .01s ease, color .01s ease;
border-bottom: none;
}
.load-more.load-more--loading {
animation: rotate 1.5s linear infinite;
animation-delay: .2s;
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<form action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" autocomplete="off"><span class="highlight"></span><span class="bar"></span>
<label>USERNAME</label>
</div>
<center>
<input type="submit" value="CHECK STATS" class="load-more">
</a>
</center>
</form>
The CSS (and a javascript file that I'm using) turn the button into a loader when you click on it, but on mobile browsers like safari the button just disappears when you click it with no loader.
Example: https://epicmc.us
There's some support in iOS 7 and 8 for transform but none for animation in iOS. You're going to have to use jQuery or something to get the effect to work in mobile safari. Caniuse.com tells us the support here for these attributes: http://caniuse.com/#search=transform
This CSS works perfectly on mobile safari...
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
Let's say I have a span with a dashed underline:
<span class="underline">Hello, I'm underlined text</span>
.underline {
color: #444;
font-size: 250%;
display:inline-block;
border-bottom: 1px dashed #444;
}
I need a bottom drop shadow for the underline. I assume box-shadow is not the case and the only possible solution is to do it by the means of pseudo elements.
I'm doing this way:
.underline:after {
content:"";
border-bottom: 1px dashed #ff0000;
display: block;
}
This displays the red dashed stroke above the underline but I need to do that below the underline.
How is that possible?
Thanks in advance.
Use position: relative; like this:
.underline:after {
content:"";
border-bottom: 1px dashed #ff0000;
display: block;
position: relative;
top: 2px;
}
I'm not sure why you don't want to use box-shadow (unless its a browser problem) But it would solve the problem.
box-shadow: 0px 10px #888888;
.underline {
color: #444;
font-size: 250%;
box-shadow: 0px 10px 10px #888888;
display:inline-block;
border-bottom: 1px dashed #444;
}
hope this helps