I would like to overlay a text with pattern.
current text:
desired result:
Here is what I tried:
<p style="background: url(http://i.imgur.com/kODqYvS.jpg);>International experiance</p>
Direct link to pattern picture:
http://i.imgur.com/kODqYvS.jpg
Here you go, exactly how you wanted it: DEMO
<p class="bnd">International experiance</p>
.bnd
{
font-size: 48px;
font-weight: bold;
background: url(http://i.imgur.com/kODqYvS.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Fiddle
h1{color: white; /* Fallback: assume this color ON TOP of image */
background: url(http://i.imgur.com/kODqYvS.jpg) ;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 months ago.
Improve this question
I have a part of a website that involves text with a gradient inside of it. I have tried searching how to do it but nothing is working for me.
What is the efficient way to do this?
.gradient-text {
background-color: red;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
font-family: "Archivo Black", sans-serif;
font-weight: normal;
font-size: 6em;
text-align: center;
margin-bottom: 0;
margin-bottom: -0.25em;
}
This will add gradient text to all h1 tags:
HTML:
<h1>Gradient text</h1>
CSS:
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
To add a gradient background, not text:
HTML:
<h1>Gradient background</h1>
CSS:
h1 {
background-image: linear-gradient(45deg, #f3ec78, #af4261);
}
Been looking for a solution but no prevail, so I thought I'd ask here.
I am trying to apply a linear gradient to the input field as I have for the buttons as seen in this picture.
I have played around with different CSS options but have not been able to succeed.
The best version is where the placeholder is styled, but the input value is not. If I try to style the input value then things go wrong.
And advice would be greatly appreciated.
button{
background-color: dodgerblue;
height: 60px;
width: 60px;
border-radius: 50%;
font-size: 32px
}
button i{
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
input{
background-color: dodgerblue;
height: 60px;
width: 360px;
font-size: 32px
}
input::placeholder{
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*
input:focus {
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
*/
<button><i>X</i></button>
<hr />
<input placeholder="SEARCH"/>
You will need two background layer. One for the text and one for the background-color.
Unfortunately this won't work on Firefox due to known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1571244
input {
background-color: dodgerblue;
color:transparent;
height: 60px;
width: 360px;
font-size: 32px
}
input::placeholder {
background: linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
input:not(:placeholder-shown) {
background:
linear-gradient(#ffffff70, #ffffff),
dodgerblue;
-webkit-background-clip: text, padding-box;
background-clip: text, padding-box;
-webkit-text-fill-color: transparent;
}
<input placeholder="SEARCH">
For firefox you can consider an extra div for the background:
input {
color:transparent;
height: 60px;
width: 360px;
font-size: 32px;
background: linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.input {
display:inline-block;
background-color: dodgerblue;
}
<div class="input"><input placeholder="SEARCH"></div>
if your trying to set a gradient on the placeholder text,
your best option is to omit or remove the placeholder completely and set another div over the top of the input with your chosen font, and the text gradient.
<div id="InpCont">
<input type="text" id="UsrInp">
<div id="InpOverlay">
<p id="PsudoPlcHlder" class="OverlayTxt" contenteditable="true" onchange="PsudoPlcHlder.value=UsrInp.value" max-length="44">Search</p>
</div>
</div>
#InpCont{
// Position Where you want this element
}
#UsrInp{
position:absolute;
top:8px; left:50%;
transform:translateX(-50%);
width:64%; height:calc(28px + 1.87vh);
background:linear-gradient(-33deg,#ffffff70, #ffffff);
z-index:20;
}
#PsudoPlcHlder{
position:relative;
top:-40px; left:calc(20px + 25%);
width:240px; height:29px; padding:2px;
background:linear-gradient(23deg,red,green,blue);
overflow-x:hidden;
background-clip:text;
color:transparent;
z-index:25;
}
(document.addEventListener('DOMContentLoaded', function(){
const UsrInp = document.getElementById('UsrInp');
const PsudoPlcHlder = document.getElementById('PsudoPlcHlder');
PsudoPlcHlder.addEventListener('click', (function(){
PsudoPlcHlder.innerText = '';
}))
})
Just tried this on my own app and it seems to be working, but i'm not sure about the form submission part as I haven't got it hooked up to a db at the moment, might have to play around with the positioning a bit as I only tested this at the very bottom of my app, but might be a good starting point for you to mess around with.
in testing this, the gradient seems to stretch to fit, however many characters there are even if there like 120, which is a bit weird. will play around with this more and edit later on if I find any better methods..
I'm having problems with removing the style from a piece of text under ::after selector and I were unable to find a solution from the internet. The design is basically a linear Gradient towards the left side.
.txt {
background: -webkit-linear-gradient(left, #E27822,#E2224C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold ;
}
.txt::after {
content: " - More Sample Text";
background: none;
-webkit-background-clip: none !important;
-webkit-text-fill-color: none !important;
color: green;
}
<span class="txt">Sample Text</span>
<p>The "<b>More Sample Text</b>" should be coloured <span style="color: green;"><b>Green</b></span>.</p>
-webkit-text-fill-color only accepts colors, and none is not a proper color.
It seems you want to reset to the initial value, which is currentColor.
.txt {
background: -webkit-linear-gradient(left, #E27822, #E2224C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.txt::after {
content: " - More Sample Text";
color: green;
-webkit-text-fill-color: currentColor;
}
<span class="txt">Sample Text</span>
<p>The "<b>More Sample Text</b>" should be coloured <span style="color: green;"><b>Green</b></span>.</p>
Some minor reminiscences of the old background may still appear around the text, probably due to antialiasing. To prevent that, you can add a white background.
.txt {
background: -webkit-linear-gradient(left, #E27822, #E2224C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
.txt::after {
content: " - More Sample Text";
-webkit-text-fill-color: green;
background: #ffffff;
}
<span class="txt">Sample Text</span>
<p>The "<b>More Sample Text</b>" should be coloured <span style="color: green;"><b>Green</b></span>.</p>
Im still making a reponsive menu, with scroll controls. I added a gradient on my menu, but I want to, that gradient goes in front of my links and hide them behind it. There's is JSFiddle, you can test it.
There you can see my gradient CSS on my menu
#page .page-nav {
background: white -webkit-linear-gradient(left, transparent 50px, red);
background-size: 40% 100%;
background-repeat: no-repeat;
background-position: right;
}
Any solutions, how to do that?
As far as I know,
You can do it with vendor prefixes and it's not supported in IE (even IE 11)
Unless someone here knows a better way to implement it, I would advise against this.
body {
background: #111;
width: 50%;
margin: 0 auto;
font-size: 50px
}
.page-nav {
background: linear-gradient(to right, #900, #999);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
<body>
<p class="page-nav">Sample Sample</p>
</body>
I am trying to achieve a gradient + text shadow effect in Chrome/Safari using CSS text-shadow and a combination of text-shadow and background-image: -webkit-gradient, see example blw. I can only make one of the effects apply(if I add the shadow the gradient disappears. What am I doing wrong?
h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}
The gradient "disappears" because the text-shadow is on a level above the background.
The text (which is transparent)
The shadow
The background.
We can work around this by copying the text and put it below the original layer, then apply the shadow there, for example:
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 10px 10px 11px #fff;
color: transparent;
}
#hello:after {
content: 'Hello World';
}
<h1 id="hello"><div>Hello World</div></h1>
With no extra HTML markup or pseudo elements you can achieve this effect using the filter property and drop-shadow function. This method also works with a background image vs gradient.
h1 {
font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
background-image: linear-gradient(#787878, #484848);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-filter: drop-shadow(2px 2px #333);
filter: drop-shadow(2px 2px #333);
}
Fiddle: https://jsfiddle.net/eywda89g/
This answer is similar to the answer by #KennyTM above, except his answer has the shadow hard-coded into the CSS, which is not suitable for dynamic text such as in a CMS. Also, his method requires a separate ID for each instance, which would be very tedious if you plan to use this effect a lot. The example below uses a class instead, and allows dynamic text.
Try this:
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: linear-gradient(teal, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 2px 2px 2px #000000;
color: transparent;
}
.gradient-shadow:after {
content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}
And then in your HTML:
<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1>
Just make sure that the text in the <div> matches the text in the title attribute.
Here is a Codepen example of this method:
https://codepen.io/mprewitt/pen/gexypd
These answers helped me a lot in getting to my final result. Thank you.
So I figured I would share it. Seeing the colour of my text is light, I needed a darker "border" at the top to make it pop.
Also while 'ems' are harder to work with (as opposed to px), I found that the transition of colours for the text-shadow looks a lot smoother as I wanted to make it a gradient as well :)
Works on Edge, Chrome, Vivaldi and FireFox, a little blurry though.
<h1 class="text3d">Privacy Policy</h1>
.text-3d{
background-image:linear-gradient(to bottom,#f7eb3b 30%,#f5d839 40%,#eead34 50%, #eb9531 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter:
drop-shadow(-0.015em -0.015em 0 #ffff00)
drop-shadow(-0.015em -0.015em 0 #bf290c)
drop-shadow(0 -0.005em 0 #bf290c)
drop-shadow(0.010em 0.025em 0 #bf290c)
drop-shadow(0.015em 0.030em 0 #b6240b)
drop-shadow(0.020em 0.035em 0 #a91d0b)
drop-shadow(0.025em 0.040em 0 #8d0d09)
drop-shadow(0.030em 0.045em 0 #830708)
drop-shadow(0.035em 0.050em 0 #680a07)
drop-shadow(0.01em 0.08em 0.01em rgba(0,0,0,0.10))
}