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>
Related
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>
so I'm trying to add a gradient text to my website, however, it doesn't work when there's a background color.
#maintitle {
background-image: linear-gradient(90deg, red, blue);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
display: inline-block;
}
* {
background-color: #1c232d;
font-family: 'Montserrat', sans-serif;
}
<div class="title" id="maintitle">
<h1>
Welcome!
</h1>
</div>
What is causing it?How do I fix this?
If you define a gradient as a background-image and a background-color for the same element, only one of them will be displayed if they both cover the complete element (which they do as long as no clipping is added, and if it's added, both are clipped).
For an additional background color you need to add an additional parent element that gets that background color:
(note after edit of question snippet: also the * selector applies to the #maintitle element in your snippet, so although there are two CSS rules, the background-image and background-color settings in them apply to the same element, for which the above also applies: the background-color overwrites the background-imge/gradient)
#maintitle {
background-image: linear-gradient(90deg, red, blue);
background-clip: text;
color: transparent;
display: inline-block;
}
.wrapper {
background-color: green;
}
<div class="wrapper">
<div class="title" id="maintitle">
<h1>
Welcome!
</h1>
</div>
</div>
Is it possible to create a fancy text in HTML with the help of CSS only?
I am putting a link where you can see a better example of fancy text. https://www.ultimatebeaver.com/modules/fancy-text/
This is one neat CSS style that forces a background image to show through letters on the page.
You can simply put any background in the .knockout class in css given in fiddle, also set different font and style as required.
See the fiddle
.knockout {
background: url(https://media.istockphoto.com/photos/christmas-lights-defocused-background-bokeh-gold-blue-picture-id613518332?k=6&m=613518332&s=612x612&w=0&h=Own5MdgJXjNhFd0YUyED1UP3mQsHeNhfML9F-DQYdYw=) -80px -80px;
color: red;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-weight: bold;
font-size: 100px;
font-family: arial, helvetica;
width: 600px;
margin: 50px auto;
text-align: center;
}
body{
background: #444;
}
<div class="knockout">gaurav</div>
I want to make a text with red wavy underline and blue dashed overline using text-decoration.
This is my code: (working only in Mozilla Firefox) (don't works, because display only overline)
span {
font-size: 40px;
text-decoration: underline wavy red;
text-decoration: overline dashed blue;
}
<span> Some Text </span>
How can I do that effect using only text-decoration? (I know, it will work only in Mozilla Firefox)
Thanks for help.
You can not have two values for one css property at the same time.
Workaround: wrap yout text in another span and add separate text-decoration to each span:
span {
font-size: 40px;
}
.wavy {
text-decoration: underline wavy red;
}
.dashed {
text-decoration: overline dashed blue;
}
<span class="wavy">
<span class="dashed">Some Text </span>
</span>
Try This:
span {
position: relative;
text-decoration: underline wavy red;
border-top: 2px dashed blue;
}
<span> Some Text </span>
Aswer your comment is here:
span {
position: relative;
text-decoration: underline wavy red;
}
span:after {
position: absolute;
width: 100%;
height: 100%;
display: block;
content: '';
border-top: 2px solid blue;
top: 10px;
}
<span> Some Text </span>
A text will need to span over multiple lines, even a heading will do with narrow viewports found on smartphones.
Here's a multiline solution done with a linear gradient (well, 2 of them to reproduce the dashes):
Codepen in Scss (simply using 2 variables for font-size and line-height)
span {
font-size: 40px;
line-height: 1.5;
text-decoration: underline wavy red;
/*text-decoration: overline dashed blue;*/
background-image:
linear-gradient(to right, white 0, white 50%, transparent 50%, transparent 100%),
linear-gradient(to bottom, blue 0, blue 1px, transparent 1px, transparent 100%);
background-size:
8px 100%,
100% 60px;
background-position: left top, left top;
background-repeat: repeat, repeat;
}
<p><span> Some Text </span></p>
<p><span>Also<br>multiline</span></p>
Dashes can be freely modified (it's a gradient between transparent and white color, size them however you want)
You can specify multiple lines using text-decoration-line. You would think that you could specify a different colour and a different style for each line, however, this does not work, as you can see for yourself here:
span {
/* This does not work! */
text-decoration-line: underline overline;
text-decoration-style: wavy dashed;
text-decoration-color: red blue;
}
<span>Some Text</span>
This is what MDN says:
CSS does not provide a direct mechanism for specifying a unique color for each line type. This effect can nevertheless be achieved by nesting elements, applying a different line type to each element (with the text-decoration-line property), and specifying the line color (with text-decoration-color) on a per‐element basis.
So here is the solution using nesting:
.parent {
text-decoration: underline wavy red;
}
.child {
text-decoration: overline dashed blue;
}
<span class="parent"><span class="child">Some Text</span></span>
This question already has answers here:
Is it possible to apply CSS to half of a character?
(20 answers)
Closed 8 years ago.
Is it possible in css make a single character in 2 colors?
I mean for example character "B" The first upper half in RED and the second half in BLUE
h1 {
font-size: 72px;
background: -webkit-linear-gradient(red 49%, blue 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Fill in your own vendor prefixes.
One solution would be:
HTML:
<span class="half" title="B">B</span>
(see that you have to set an attribute value)
CSS:
.half {
font-size: 90px;
font-weight: bold;
position: relative;
color: blue;
line-height: 1em;
}
.half:before {
position:absolute;
content:''attr(title)'';
color: red;
height: .5em;
overflow: hidden;
}
The problem is that every browser calculates the .5em value differently