I am using gradient text color for my links on hover, however a strange jump effect is occurring ever since I added the css class. Whenever I hover the link it jumps like 2px-4px up.
When I remove the gradient color class all is normal again. Is there any fix to this? The custom code I added:
.bg-gradient-ligth {
background-color: $white;
background-image: linear-gradient(315deg, $white 0%, $ligth-grey 74%);
}
a {
color:$green
}
a:hover {
background: -webkit-linear-gradient($gradient1, $gradient2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.heading-gradient {
background: -webkit-linear-gradient($gradient1, $gradient2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The rest is just plain Bootstrap and theme CSS. Which worked fine before. By the way it also cuts off the text of a gradient h1 title at the bottom.
Related
On my homepage (https://howtogetrippedathome.com/), I want to give all the (now) red elements a gradient color.
I managed to give the menu items, the service titles and service icons gradient colors using the following CSS:
.service-icon.wow.zoomInDown {
background: linear-gradient(to bottom right, #ff2828 , #F27B26) !important;
}
.service-title {
background: -webkit-linear-gradient(bottom left, #ff2828 , #F27B26);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
However, I was not able to make the text-decoration (double underscore) of the widget titles, the read my story/see all blogs buttons and the social icons (Facebook and Instagram) this gradient. Using 'linear-gradient' after 'color:' does not work unfortunately.
Is this doable, or am I asking for something impossible? I'm curious what you guys have to say.
Best,
Maarten
The closest I got to it for the double underline was this (see https://howtogetrippedathome.com/):
.widget-title:after {
background-image: -webkit-linear-gradient(left, #ff2828 , #F27B26);;
padding: 1px;
border-bottom: 6px double #fff !important;
}
However, this has the effect that there still is a white double border visible in the about section. Setting the color of the border to transparent results in both the border and the padding having the gradient color, so they form one rectangular shape.
Another way it could be done is using:
-webkit-border-image: -webkit-gradient(...)
But I can't make it work.
Any ideas?
For gradient text you can do something like this:
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Source: https://css-tricks.com/snippets/css/gradient-text/
For the double underline the best option you have is to use <hr> and set a gradient background.
There is a text-decoration-color style, but it doesn't accept gradients.
I have a photoshop design that has a heading color #524a48.
On the photoshop design there is a gradient-overlay on the text
h1 {
color: #524a48;
background: linear-gradient(to right, rgba(255,239,223, 0) 0%, rgba(255,239,223, 1));
opacity: 40%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
So the overlay gradient from opacity 0 - 1. When using this code here the color of #524a48 doesn't show and I have a half transparent line of text...
Using #524a48 as the webkit-text-fill-color value completely hides my gradient.
How can I have color overlay over the color of my text using css?
Also how can I ensure that a fallback for this? So browsers that aren't chrome or safari will see #524a48. Is passing #524a48 to the color property sufficient?
Thank you in advance
You should be able to make a solution with this
You just need to edit all the alpha layer values
h1 {
font-size: 72px;
background: -webkit-linear-gradient(0deg, rgba(255,239,223, 1), rgba(255,239,223, 1));
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(82,74,72,0.5);
}
<div>
<h1>LINEAR GRADIENT TEXT</h1>
</div>
With how this works, I don't see another way to do what you are suggesting
Other then create an absolute div with exact same contents directly over this one and specifying the color property. I would go with the first solution
Hi I use a lot of tooltips in my website, and I recently want to add a tooltip in the footer, the website has white skin so tooltips in the body are black backround but the footer has black background so I need the tooltip to has a white background, but only the tooltip that is placed in the footer.
I tried to look for a class where I can style separately but I could not find it.
<span data-tooltip aria-haspopup="true" class="has-tip tip-top tip-footer" title="Llámanos al (+57)(7)440342">Preguntas?</span>
This is the tooltip and the generated popup is
<span data-selector="tooltip-i672cwnm0" id="tooltip-i672cwnm0" class="tooltip tip-top" role="tooltip" style="visibility: visible; display: none; width: auto; top: 387.375px; bottom: auto; left: 865px; right: auto;">Llámanos al (+57)(7)440342<span class="nub"></span></span>
I cannot select it by id because the id dinamic so it changes and I also cant select it by .tip-top as I have tip-tops in all the website so it would change all those.
any idea? how to pass a custom class to the popup?
I have just edited the CSS, in my app.css file, using this...
.tooltip{background:#000;color:#FFF}
.tooltip>.nub{border-color:transparent transparent #FFF transparent}
.tooltip.opened{border-bottom:dotted 1px #FFF !important;color:#FFF !important}
.tap-to-close{color:#FFF}
.tooltip>.nub{border-color:transparent transparent #FFF transparent}
.tooltip.tip-top>.nub{border-color:#FFF transparent transparent transparent}
.tooltip.tip-left>.nub{border-color:transparent transparent transparent #FFF}
.tooltip.tip-right>.nub{border-color:transparent #FFF transparent transparent}
If you have an id or class assigned to your footer try adding that before the code to style the tool-tip just in that section of the site. i.e.
#yourid .tooltip>.nub{border-color:transparent transparent #000 transparent;left:0.9375rem}
or
.yourclass .tooltip>.nub{border-color:transparent transparent #000 transparent;left:0.9375rem}
Play around with these settings to get what you want. The .nub is the triangle. Hope this helps?
Cheers
G
This has changed for Foundation 6.6.3. After spending some time trying to get this, because the tool tip doesn't stay visible. I was able to get to style the triangle(nub) with this:
.tooltip.top:before {
border-color: $yourColor transparent transparent;
}
.tooltip.bottom:before {
border-color: transparent transparent $yourColor;
}
.tooltip.right:before {
border-color: transparent $yourColor transparent;
}
.tooltip.left:before {
border-color: transparent transparent transparent $yourColor;
}
I was using sass with some variables so mine looked like this:
.tooltip {
background: $tooltip-background !important;
width: auto !important;
max-width: 80vw !important;
&.top:before {
border-color: $tooltip-background transparent transparent !important;
}
&.bottom:before {
border-color: transparent transparent $tooltip-background !important;
}
&.right:before {
border-color: transparent $tooltip-background transparent !important
}
&.left:before {
border-color: transparent transparent transparent $tooltip-background !important;
}
}
The !importants are not good practice but in the situation I was in with this, they were necessary.
I am making a simple menu with border-radius:5px on the background when you hover or its clicked.
I notice that for an instant when I click on it a rectangle border, a filled in white appears, which then goes round (in ff and IE11)
www.lo.ee-web.co.uk
I am making a joomla template and pulling int he bootstrap code but NOT using it (leaving it in case I put any plugins in at a later date that might want it)
I figured it might need to overwrite some bootstrap css so I tried adding styling for a:active but that doesn't seem to help. I also notice that if I press a link a second time it doesn't do it so I am guessing that's because of the cache.
Is there a way to stop this annoying box?
thanks
try to set your background-color to transparent.
In your case the css was:
You do have the template.css connected to your html though, and in there i find this:
nav ul#mainMenu li a:hover, nav ul#mainMenu li.active a {
background-color:#3d4d42;
background-color:#597060;
border-radius:5px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#efefef), to(#cdcdcd));
background: -webkit-linear-gradient(top, #efefef, #cdcdcd);
background: -moz-linear-gradient(top, #efefef, #cdcdcd);
background: -ms-linear-gradient(top, #efefef, #cdcdcd);
background: -o-linear-gradient(top, #efefef, #cdcdcd);
color:#597060;
}
This probably causes the white background.
If you change this you might be able to fix it.
Otherwise you can also try to give your css file a new property for the background, making it transparent (or any color you want) by giving it Background-color: transparent;
If that doesn't work, maybe you should try it with !important in it.
so : Background-color: transparent !important;
Add this line in css:
a, a:active, a:focus, a:visited{outline:none;}
::selection { background: #000000; opacity: 0 }
::-moz-selection { background: #000000; opacity: 0 }
I want the select color on my website to be pure black, but my text is also pure black so when the text is selected it is hidden by the black selection. How can I change the text color to white when it is selected so that non-selected text appears as black text on the white background of the website while selected text appears as white text on a black selection? Thanks
You can set color to white with CSS color property and remove opacity, because if it's transparent then you can't see it.
::selection { background: #000000; color: #ffffff; }
::-moz-selection { background: #000000; color: #ffffff; }
Example
::selection{background: black; color:white;}
::-moz-selection{background:black; color:white;}
Just set the text color to white and make the opacity to your desired level that's >0, or in this case >80 would be better.