i'm wanting my link titles to have a gradient text. currently, when i change the tooltip to be the gradient text, the gradient ends up working fine, but the background is transparent.
i want to have a colored background so you can actually see the text. i understand that the way the gradient is working is by using a gradient background and then cutting out the text to show it, but i think there has to be a way to overlay the whole text over a background.
i'm not sure exactly how to edit tooltips very well, i'm using someone's code and editing it. i'm attaching a picture of what i'm basically trying to do. (the photo is edited because i haven't been able to actually make this happen lmao).
inside of my tooltip, i want to have the gradient text, the color background behind the gradient text, and a border.
there's a picture of what i currently see,
there's a picture of what happens when i change the text to gradient ,
and there's a picture of what i'm trying to get to .
thank you all in advance for any help you can give me!
#s-m-t-tooltip {
font-family:"georgia";
letter-spacing:1px;
text-transform:uppercase;
text-align:center;
position:absolute;
padding:0px 5px 0px 5px;
margin-top:30px;
border:1px solid black;
z-index:9999;
}
edit - added snippet of tooltip code (i'm new at this site so i'm not sure if this will post the code correctly)
One option, embed the tooltip in another div to manage the background:
Updated 3-Aug-22 per #DavidThomas
.col {
display: inline-block;
width: 250px;
padding: 10px;
}
.outer {
position: relative;
}
.note {
font-size: 8pt;
display: inline-block;
line-height: 1.2em;
}
.pos {
position: absolute;
top: 15px;
left: 15px;
border: 1px solid black;
}
.inner {
background-color: white;
}
.kpb {
font-family: "georgia";
font-size: 14pt;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
padding: 0px 5px;
}
.kpb::before {
content: "Kiwi polar bear";
}
.s-m-t-tooltip {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.dave-thomas {
color: transparent;
background: linear-gradient(to right, red, orange, yellow, lime, indigo, blue, violet), linear-gradient(to bottom, #FFF, #FFF);
-webkit-background-clip: text, border-box;
}
<div class="col">
<span class="note">Single BG overlaid on white div</span><br>
<div class="outer">
<image src="https://picsum.photos/250/200" />
<div class="pos inner">
<div class="kpb s-m-t-tooltip"></div>
</div>
</div>
</div>
<div class="col">
<span class="note">Per Dave Thomas: Two background layers with paired clipping levels (order matters)</span><br>
<div class="outer">
<image src="https://picsum.photos/250/200" />
<div class="pos kpb dave-thomas"></div>
</div>
</div>
Related
This question already has answers here:
How to make a text stroke with transparent text
(3 answers)
Closed last year.
IMAGE:
So basically im searching for a way to make something like this "techno" text/title with transparent filling and border of text visible. Is it possible to make that with html/css or did this person use image instead of text?
You can use color and -webkit-text-stroke to achieve the transparent font.
#header {
background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80');
background-position: center
}
.header-text{
color: transparent;
-webkit-text-stroke: 1px white;
margin-left: 10px;
font-family: 'Arial';
}
<div id='header'>
<br>
<h1 class='header-text' style="font-size: 50px;">text</h1>
<br>
<p class='header-text'>Some more info on this product.</p>
<br>
</div>
possible using -webkit-text-fill-color and -webkit-text-stroke
body {
background: url(https://images.unsplash.com/photo-1641400504445-99dc922bbe63) center/cover;
}
.transparent {
background: none;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-stroke: 1px #fff;
font-family: 'Calibri';
font-size: 80px;
}
<h2 class="transparent">TECHNO</h2>
Okay so i want to make a transparent button with some icon / text inside that, on hover, makes the text transparent and the background colored. This is "kinda" my code:
.button-color {
padding: 12px 20px;
border: none;
color: red;
background-color: transparent;
}
.button-color:hover {
color: transparent;
background-color: red;
}
<button class="button-color">Hi!</button>
(The code is way longer but you get the point)
And this is the result:
Unhovered:
Hovered:
I want the background to get transparent where the icon is. Oh and setting the icon to a certain color won't do the trick because these buttons are inside a 3D viewer that has a model loaded . I don't even know if this is achievable with pure css but who knows.
You can get this effect using blend-mode : hard-light as long as the color of the element has RGB values that are 0 or 255. (that is, primary colors).
With this blend-mode, gray (RGB values of 128) is "transparent"
.button-color {
padding: 12px 20px;
border: none;
font-size: 100px;
color: red;
background-color: gray;
mix-blend-mode: hard-light;
left: 10px;
top: 10px;
width: 200px;
}
.button-color:hover {
color: gray;
background-color: red;
}
.container {
background-color: lightgreen;
width: 200px;
}
<div class="container">
<button class="button-color">Hi!</button>
</div>
I wanted to make a text on a transparent strip with a colored strip on the left side. As in the picture below (the gray stripe should be transparent). The gray stripe would have to expand with the length of the text. If the text did not fit the width of the container, a new line would be created, and the orange bar and the gray bar would expand with the text (new line).
I was just starting to learn CSS and I wanted to achieve that, but I don't know how.
I made this small fiddle.
I've given background color to elements so that you can see how it acts based on amount of text. Change background-color to transparent on your h2 tag to get what you want.
HTML:
<div class="container">
<div class="label">
<h2 class="label-text">
Sample text
</h2>
</div>
</div>
and CSS:
.container {
width: 200px;
border: 1px solid Black;
background-color: gray;
}
.label {
background-color: white;
display: inline-block;
border-left: 10px solid red;
word-wrap: normal;
}
.label-text
{
display: inline-block;
padding-left: 10px;
}
Check this snippet:
#strip{
border: none;
}
#ribbon{
background-color: orange;
width: 15px;
height: 50px;
}
#strip-text{
padding-left: 20px;
background-color: #cccccc;
opacity: 0.6;
width: 185px;
height: 50px;
}
<table id="strip" cellspacing="0" cellpadding="0">
<tr>
<td id="ribbon">
</td>
<td id="strip-text">
EXAMPLE TEXT
</td>
</tr>
</table>
We have used CSS property opacity to add transparency to our strip.
Not sure what you've checked already (please share some code), but I think you want to use border CSS property, e.g.
border-left: 5px solid #ffdd00
EDIT:
Ok, since somebody downvoted this answer without clarification, I've realized by myself that probably OP is looking for total solution for his/her problem (so not only ribbon) - please check solution below then:
.ribbon {
color: #fff;
display: inline-block;
padding: 5px 10px;
border-left: 5px solid orange;
background: rgba(0, 0, 0, 0.25);
}
<div class="ribbon">Some text here</div>
You can achieve transparency by using rgba instead of opacity - it's supported by all modern browsers already.
This solution contains no hacks (or oldschool <TABLE> nodes!), requires only 1 element and is being widely supported by the browsers.
I have the following background image that is half gray, and half white.
When elements such as buttons, or text are on the dark side of the background, they appear behind it.
When elements are on the light side it appears in front of the background.
How can I get elements to appear in front of the dark side of the background?
Here is the button code, located outside of the body tag (which my background is located in)
<div class="container">
<div class="row">
<div class="col-xs-12" align="center">
Go
</div>
</div>
</div>
Here is the CSS for the button.
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
z-index:1000;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 100px !important;
z-index:1000;
}
Here is the code for my background:
.background-picture {
background-image: url("../img/background.png");
background-size: cover;
z-index:1;
}
If you look very closely, you can see that the button actually is above the black part as well. (Depending on the quality of your screen and its calibration, you might actually not be able to see it, but I clearly do.)
The reason is that you have a transparent background color defined (a 60% transparent black) - that's why the "black" button appears grey-ish in front of the white background, but nearly invisible in front of the very dark background.
Simply change it to be an opaque grey, and you're done.
.btn-dark {
/* background-color: rgba(0,0,0,0.4); */
/* about the same color: */
background-color: #999;
}
Also, you definitely should change the font color of the buttons for the dark background to white or a very light grey.
main{position:relative;display:inline-block;border:1px solid red;}main > div{width:200px;height:150px; display:inline-block;}.white{background:#fff;}.black{ background:#000;}button{position:absolute;left:calc(50% - 50px);width:100px;border:none;color:#fff;border:1px solid #ccc;}
#one{
background:#999;
top:10px;
}
#two{
background:rgba(0,0,0,.4);
top:60px;
}
<main>
<div class="white"></div><div class="black"></div>
<button id="two">
Test with rgba color!
</button>
<button id="one">
Test with opaque color!
</button>
</main>
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
z-index:1000;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 100px !important;
z-index:1001;
}
more the z-index is higer more the button is hover try this code
used background-color: rgba(0,0,0,0.4) for button and make the background black in cause the button will be black and not appear
you can add border or use different background color like gray red ..etc
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(30,30,30,0.4);
border:none;
z-index:10000;
border:1px solid gray;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
.customWidth {
width: 300px !important;
height:30px;
display:block
}
<div class="container">
<div class="row">
<div class="col-xs-12" align="center" style="background:black">
Go
</div>
<br>
<div class="col-xs-12" align="center" style="background:white">
Go
</div>
</div>
</div>
It is not appearing behind the image, it is on the image only, your colour combination is such that you are seeing the buttons like that. However, if you check the same image uploaded by in some other system with maximum brightness you will see what I'm saying over here. I think if you can just change your colour combination everything will be fine.
I'm having trouble figuring out how to apply a split border on an element using CSS.
The effect I'm trying to achieve is this:
Where the red line and the grey line take up a % of the elements width. Preferably, I would like to apply this effect to an element using a single class.
Edit: for those asking for a code sample:
<!-- spans width 100% -->
<div id="wrapper">
<h1 class="title">DDOS Protection </h1>
</div>
Red text and a red underline? There's some simple CSS for this.
<span style='color:red; border-bottom: 1px solid red;'>DDOS</span>
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span>
Well, assuming that you want to use a single class, and without seeing your exact markup, this will work:
<div class="message">
<span>DDOS</span>
<span>Protection</span>
</div>
And then your CSS could look like this:
.message span {
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
color: #ccc;
}
.message span:first-child {
border-bottom-color: red;
color: red;
margin-right: 10px;
}
Here's a jsFiddle demo.
You can also try to play with :before and :after:
.line {
background-color: #DDD;
padding: 5px 10px;
position: relative;
}
.line:before, .line:after {
content: '';
width: 10%;
height: 2px;
background-color: red;
position: absolute;
bottom: 0;
left: 0;
}
.line:after {
width: 90%;
background-color: green;
left: 10%;
}
http://jsfiddle.net/DHDuw/
Ok I've made a similar one but that was asked for vertical, but now am changing the gradient direction so that it will help you
Demo (Works On Chrome, If Anyone Knows Cross-Browser, Please Feel Free To Edit, Because Am Using Old Browsers So Won't Be Able To Test)
CSS
div {
font: 40px Arial;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}