Is there anyway that i can make a text gradient? I have this
<p>TEXT</p>
Can somehow make the text gradient from top to bottom with css?
I want the same result you get for
background: linear-gradient(#fbfbfb, #f2f2f2);
but only for text not the whole background. I am looking something like that:
color: linear-gradient(#fbfbfb, #f2f2f2);
For Webkit browsers, you can use background-clip and text-fill-color like so:
h1 {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }
source
Unfortunately there is at present no way to do it in other browsers using pure CSS.
For gradient
background-color: #efefef;
background-image: -webkit-gradient(linear,left top,left bottom,from(#efefef),to(#ffffff));
background-image: -webkit-linear-gradient(top,#efefef,#ffffff);
background-image: -moz-linear-gradient(top,#efefef,#ffffff);
background-image: -ms-linear-gradient(top,#efefef,#ffffff);
background-image: -o-linear-gradient(top,#efefef,#ffffff);
background-image: linear-gradient(top,#efefef,#ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#efefef',EndColorStr='#ffffff');
Only works in Webkit from what I can see, though it does work - http://css-tricks.com/snippets/css/gradient-text/
I have the solution but it only works on chrome for me.
Here you are.
p {
background: linear-gradient(to bottom, #F00 0%,#630000 100%);
background: -moz-linear-gradient(top, #F00 0%,#630000 100%);
background: -webkit-gradient(linear, left top,left bottom, color-stop(0%,#F00 ), color-stop( 100%,#630000));
background: -webkit-linear-gradient(top, #F00 0%,#630000 100%);
background: -o-linear-gradient(top, #F00 0%,#630000 100%);
background: -ms-gradient(to bottom, #F00 0%,#630000 100%);
/*i.e */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F00', endColorstr='#630000', GradientType=0 );
/* gradient targets only on letter and not on the background*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;*/
Obviously
0% means that the gradient starts right from the top
100% means that the gradient ends at the end of the letter.
you can use something like that as well
background: linear-gradient(to bottom, #F00 33%,#630000 100%);
if you want to apply it to specific area.
As i wanted a solution to work in all browsers i eventually used a jQuery plugin. I used this one http://www.codefocus.ca/goodies/gradienttext
HTML:
<div id="example1">TODO write content</div>
JS:
$(document).ready(function(){
$('#example1').gradienttext({
colors: [
'#FF0000',
'#FF6600',
'#CCFF00',
'#00FF00',
'#0066FF',
'#FF00FF'
],
style: 'horizontal'
});
});
and included the appropiate js (jQuery and GradientText v0.1)
But there are so many other plugins to use. You can check:
-http://jquery-plugins.net/tag/gradient
-http://mrnix.ru/pxgradient/index_en.html
-https://github.com/Se7enSky/jquery-text-gradient
P.S. thank you for your answers that showed me that there is not a way to achieve what i wanted with pure css.
Related
I'd like a divs opacity to decrease in direction left, top, right or down just like a linear-gradient does it in the background-image, but just for the whole appearance (not just the background). Is there any way of doing it?
I've tried doing it with this code:
html
<body>
<div id="outer">
<div id="content">
<!-- content -->
</div>
<div id="inner">
</div>
</div>
</body>
css
#outer {
height: 500px;
width: 500px;
padding-left:20px;
}
#inner {
position: absolute;
height: 500px;
width: 500px;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1));
z-index: 999;
}
#content {
position: absolute;
height: 500px;
width: 500px;
}
As expected it worked really well with colors, but now I'd like to insert an image as background of the body and obviously it won't work like this, how would any of you do this?
Edit:Some of you marked it as a duplicate of css gradient opacity slide image left to right color white but It's not the same;I'm not talking about making the background-image get a linear-gradient over it, I'm talking about making a part of the whole div disappear like a gradient.
Use a mask:
.mask {
-webkit-mask-image: linear-gradient(to left, transparent 30%, black 100%);
mask-image: linear-gradient(to left, transparent 30%, black 100%);
}
I am changing background color after 50% height with 175deg angle.So, I want the text color to become white, when the background-color is blue. Fiddle
.bg {
background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
color:#000;
}
<div class="bg">
<h1>
Hiii, My Name is John, I love Stackoverflow. I really don't know, how to do this, Can someone help me? If Background = Blue, Text Color = White
</h1>
</div>
</div>
New answer:
Set the background of the h1 element using linear-gradient in the same shape, but the colors you want for the text. Than make the text color transparent, and use background-clip: text (note the browser's compatibility) to color the text.
.bg {
background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
color: #000;
}
h1 {
color: transparent;
background: linear-gradient(175deg, #435289 50%, white 50%);
-webkit-background-clip: text;
background-clip: text;
}
<div class="bg">
<h1>
Hiii, My Name is John, I love Stackoverflow. I really don't know, how to do this, Can someone help me? If Background = Blue, Text Color = White
</h1>
</div>
</div>
Original answer:
If you need the contrast, and not the exact colors, you can use mix-blend-mode to dynamically change the color according to the background:
.bg {
background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
color: #000;
}
h1 {
color: #fff;
mix-blend-mode: difference;
}
<div class="bg">
<h1>
Hiii, My Name is John, I love Stackoverflow. I really don't know, how to do this, Can someone help me? If Background = Blue, Text Color = White
</h1>
</div>
</div>
you can specifically apply that color. see
https://jsfiddle.net/h7jhcbm0/2/
.bg {
background: linear-gradient(175deg, #e2e2e2 50%, #435289 50%);
color: #000;
}
h3 {
color: #fff
}
I have a custom page header set within a WordPress theme which simply displays a background image and some custom text that is added on top of the image.
Currently the header looks like this:
I would like to add a skewed background bar to the text that is imposed on top of the background image so that it looks like this:
The skewed div would give gradient backgrounds to both the header and subheader text. I am trying to created the graient divs using the CSS pseudo selector ::before tag.
My issues are that the text is actually contained within a Container div which sets the width of the containing div.
I am trying to get the Summer Sale div background to but up close to the left hand browser window edge. This would mean it would have to break out of the container. I would like to do the same for the subheader text.
Also I am finding that currently the width of the summer sale spans the whole width of the containing div as pictured. I am not after this. I would like it to only span the width of the summer sale text.
Here are my code snippets:
HTML Code
<div class="container">
<div class="row">
<div class="col span_6">
<h1>Summer Sale</h1>
<span class="subheader">Save big on selected products</span>
</div>
</div>
</div>
CSS Code
#page-header-bg h1::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 6px;
background: rgba(0,0,0,0.4);
border-color: rgba(0,0,0,0.5);
border-right-width: 4px;
border-right-style: solid;
-webkit-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
-webkit-transform: skew(20deg);
-ms-transform: skew(20deg);
transform: skew(20deg)
}
#page-header-bg h1::before, #page-header-bg .subheader::before {
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0,0,0,0)), color-stop(60%, rgba(0,0,0,0.35)));
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#40000000', GradientType=1 );
}
#page-header-bg .subheader, #page-header-bg h1 {
position: relative
}
#page-header-bg .subheader::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #000;
background: rgba(0,0,0,0.7);
z-index: -1;
padding: 0px 5px 5px 10px;
border-radius: 6px
}
I thought about setting the width of the #page-header-bg h1::before tag however I cannot do that as the text will change and I can;t know what the width will be.
Any help would be greatly appreciated.
I don't know if you made any changes to your site after charlietfl's suggestion but as per the current code in your site you don't need to set the h1 to display: inline-block and width: auto because the h1 and the .subheader are already floated to the left. (Based on your last comment it does seem like you did.)
The reason why the skewed gradient element doesn't expand till left edge of the window is because the .container element has got padding: 0 90px set (meaning, there is a padding of 90px on the left and right). We can easily remove or override this setting to fix the issue but that would result in a lot of alignment changes within your webpage. Hence the simplest option would be to add a negative left position (equal to the padding) to the h1 and .subheader elements like below:
#page-header-bg .subheader,
#page-header-bg h1 {
left: -90px;
}
Alternately, you could also use transform: translate(...) to shift the h1 and .subheader to the left by the same no. of pixels as the padding on .container. Generally, I would prefer the positioning approach because transforms aren't supported by older browsers but since you are already using skew transforms, either of the approaches should be fine.
#page-header-bg .subheader,
#page-header-bg h1 {
transform: translate(-90px);
}
I have not added any demo because there are quite a lot of settings that require to be copied from the actual webpage.
Change the h1 to display:inline-block and width:auto so it doesn't run full width and your :before should then adjust also based on text width
I have this javascript on click to remove div on click, but it doesnt work at all :(
Can you please help me ? I would be so happy (I already tried to search over the other questions)
There is JS
onclick="setTimeout('$('#wait').remove()', 11000);"
Wrong syntax and quotes usage.
This:
onclick = "setTimeout(function() { $('#wait').remove() }, 11000);";
would be correct.
Note the nested single quotes in your handler. That won't end well. What's the browser supposed to do with this?
'$('#wait').remove()'
You really want to define a function and use that instead. You avoid all of the pitfalls of passing a string to setTimeout(), multi-level quoting, etc.
function hideit() {
$('#wait').remove();
}
// ...
<button onclick="setTimeout(hideit, 11000);">click me</button>
I think pretty much all of these solutions would work. Here is another perhaps more elegant version of what you are doing up there, Chymmi.
JsFiddle Demo: https://jsfiddle.net/kvvbbz6e/4/
Javascript
$(document).ready(function(){
//--------------------------------------------------------------
// this is what you would need
var waitButton = $('#wait'),
waitButtonTimer;
waitButton.on('click',function(){ // clicking this a second time will reset the timer.
clearInterval(waitButtonTimer);
waitButtonTimer = setTimeout(function(){
waitButton.off('click');
$('.infolabel').text('click event unbound');
}, 4000);
});
//--------------------------------------------------------------
});
HTML
<div id="wait" class="button">Wait Button</div>
<span class="infolabel">Click event bound</span>
CSS
.button {
display: inline-block;
color: #666;
height: 24px;
font-size: 9.5pt;
font-weight: bold;
line-height: 22px;
border: 0;
padding: 0 5px;
margin: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 4px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 60%, rgba(245,245,245,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(60%,rgba(255,255,255,1)), color-stop(100%,rgba(245,245,245,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 60%,rgba(245,245,245,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 60%,rgba(245,245,245,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 60%,rgba(245,245,245,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 60%,rgba(245,245,245,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f5f5f5',GradientType=0 ); /* IE6-9 */
box-shadow: 0px 1px 1px #fff;
cursor: pointer;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Rather than have some javascript inline in an onclick you should use .delay and .queue from jQuery.
$('#clickme').on('click', function(){
$('#wait').delay(11000).queue(function(){
$(this).remove().dequeue()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wait">Gone in 11 Seconds</div>
<button id="clickme">Click me to start the countdown</button>
I have a colorful background. Over this background there is an white transparent image or white transparent color is applied which covers entire screen. What i need is, on top of this two i need to write text and this text color automatically should be replaced from the colorful background color which is behind the text as shown in the image below. Also the background color varies. How can i do this? I m sorry i m not giving any jsfiddle because i am not sure of how to do this.
Here is a solution...
HTML:
<div class="bg">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
CSS:
.bg {
height: 100%; min-height: 20em;
padding: 2em;
/* Could be any background, including an image */
background: -webkit-linear-gradient(bottom left, green 0%, blue 50%, red 100%);
}
.overlay {
background: rgba(255,255,255,0.4); /* translucent white */
}
.text {
padding: 1em;
font-family: 'Arial Black';
font-size: 3em;
text-align: center;
/* Same background as bg */
background: -webkit-linear-gradient(bottom left, green 0%, blue 50%, red 100%);
/* The magic happens here... */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
...BUT it has the downside of only working with webkit at the moment.
Here is the jsfiddle, but make sure you're in the latest Chrome.
Here's another example of using background-clip and text-fill-color.
Ultimately - unless this design is critical to your website - I would recommend that you not go with this method, and instead look for a more simple solution that will work cross-browser.