i have an image with text involved but uploading it and displaying it doesnt help on google search to really find it so i was wondering if i can get specific gradient style on my text.
this is how the text should look.
Can somebody help me on achieving this?
i found this but i dont really know how to adjust it.
.h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
<span class="h1">Ανανέωσε ONLINE & πάρε ΔΩΡΟ MB</span>
Thanks in advance.
You should google for linear gradient or find in it w3c
.h1 {
margin: auto;
font-size: 52px;
font-weight: bold;
background: linear-gradient(to right, #438f3a , #19acdf);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.h1h {
background: black;
}
<div class="h1h" ><div class="h1">Ανανέωσε ONLINE & πάρε <br/>ΔΩΡΟ MB!</span></div>
.black-background {
background: #408e38;
}
.top-clip {
background: #0d0d0d;
-webkit-clip-path: polygon(10% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 20%);
clip-path: polygon(10% 0, 100% 0, 100% 100%, 50% 100%, 0 100%, 0 20%);
padding: 20px;
}
.h1 {
font-size: 72px;
background: linear-gradient(to right, #4cab49 , #1eacce);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<div class="black-background">
<div class="top-clip">
<span class="h1">Ανανέωσε ONLINE & πάρε ΔΩΡΟ MB</span>
</div>
</div>
Related
This question already has answers here:
How can apply multiple background color to one div
(8 answers)
Generate solid colors using CSS linear-gradient (not smooth colors)
(3 answers)
Closed 1 year ago.
.heading {
background-color: #FFC20E;
font-size: 23px;
font-weight: 600;
padding: 5px 0px 5px 22px;
font-family: "Open Sans";
}
<h3 class="heading">Heading</h3>
I have a heading with 3 background color, how do I do please suggest, for reference I attached image, please help
You can use CSS gradient for this. To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. Here for more information
.heading{
padding:2px;
background: linear-gradient(to left,
#fffb0e 25%, #ffe30e 25% 50%, #FFC20E 50% 100%);
}
<h3 class="heading">Heading</h3>
Use CSS gradient
.heading {
background: #fcc601;
background: -moz-linear-gradient(left, #fcc601 0%, #fcc601 46%, #ffdb71 46%, #ffdb71 73%, #fff0c5 73%, #fff0c5 100%);
background: -webkit-linear-gradient(left, #fcc601 0%,#fcc601 46%,#ffdb71 46%,#ffdb71 73%,#fff0c5 73%,#fff0c5 100%);
background: linear-gradient(to right, #fcc601 0%,#fcc601 46%,#ffdb71 46%,#ffdb71 73%,#fff0c5 73%,#fff0c5 100%);
font-size: 23px;
font-weight: 600;
padding: 5px 0px 5px 22px;
font-family: "Open Sans";
}
<h3 class="heading">Heading</h3>
You could define a CSS gradient with sharp colour boundaries for the background as
eg: background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
But only a few browsers support that at the moment
See also http://www.webkit.org/blog/1424/css3-gradients/ for an explanation CSS3 gradients, including the sharp colour boundary trick.
.heading {
font-size: 23px;
font-weight: 600;
padding: 5px 0px 5px 22px;
font-family: "Open Sans";
background: linear-gradient(to right,
#ffe30e 50%, #fffb0e 33% 80%, #FFFF8A 33% 100% );
}
<h3 class="heading">Heading</h3>
You can create a div and inside that div, place three spans with a unique background to them and appropriate widths. Now, In the 1st span place your h3 tag.
Here's the code,
HTML ->
<div id="heading-div">
<span id="span1">
<h3>Heading</h3>
</span>
<span id="span2"></span>
<span id="span3"></span>
</div>
CSS ->
#heading-div{
display: flex;
}
#span1{
width: 50%;
background-color: #feab1e;
}
#span2{
width: 25%;
background-color: #ff8059;
}
#span3{
width: 25%;
background-color: #fff;
}
The following is a minimal (ish) example in which a chequered gradient fill pattern is glitchy in Firefox (version 74) i.e. it is not pixel perfect. There are line artefacts. Why is this? Is that normal? Is there a fix, other than using an image for the background?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<style>
.r{width:20px;height:20px;background:white;float:left;}
.w{overflow:hidden;}
#p75{
width:80px;
height:20px;
background-position:0px 0px,10px 10px;
background-size:20px 20px;
background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%,#ccc 100%),
linear-gradient(45deg,#ccc 25%,white 25%,white 75%,#ccc 75%,#ccc 100%);
float:left;
}
</style>
</head>
<body>
<div class="w">
<div class="r">0</div>
<div id="p75"></div>
</div>
</body>
Rotating gradients have always had that problem for more on that check this question
One way to fix the issue is to not use angles at all, and make use of repeating gradients.
html {
height: 100%;
background:
repeating-linear-gradient(90deg, #fff 0px 10px, transparent 10px 20px),
repeating-linear-gradient(0deg, #000 0px 10px, #fff 10px 20px);
background-blend-mode: difference;
}
Edit: thanks to #Temani Afif without repeating gradient.
html {
height: 100%;
background:
linear-gradient(90deg, #fff 50%, transparent 0) 0 0/20px 100%,
linear-gradient(0deg, #000 50%, #fff 0) 0 0/100% 20px;
background-blend-mode: difference;
}
you can overlap them a tiny bit , here i added 0.1% to the color start/stop setup , chrome use to be the one.
.r {
width: 20px;
height: 20px;
background: white;
float: left;
}
.w {
overflow: hidden;
}
#p75,
.p75 {
width: 80px;
height: 20px;
background-position: 0px 0px, 10px 10px;
background-size: 20px 20px;
background-image: linear-gradient(45deg, #ccc 25%, transparent 25.1%, transparent 75%, #ccc 75.1%, #ccc 100%), linear-gradient(45deg, #ccc 25%, white 25.1%, white 75%, #ccc 75.1%, #ccc 100%);
float: left;
}
.p75 {
margin:0 1em 1em;
height: 200px;
width:100%;
background-size: 19px 19px;
<div class="w">
<div class="r">0</div>
<div id="p75"></div>
</div>
<p>or decrease background-size of 1px</p>
<div class="p75"></div>
Another solution is to set the whole pattern from triangles and pretune values via css custom properties :
div {
--bgsize: 40;
--sq1: 0 0;
--sq2: calc(var(--bgsize) / 2 * 1px) calc(var(--bgsize) / 2 * 1px);
--sq3: var(--sq2);
--sq4: calc(var(--bgsize) * 1px ) 0px;
}
#a20:checked ~ div { --bgsize: 20; }
#a50:checked ~ div { --bgsize: 50; }
#a150:checked~ div { --bgsize: 150;}
#a100:checked~ div { --bgsize: 100;}
div {
height:200px;
background:
linear-gradient(45deg, gray 25% , transparent 26%),
linear-gradient(225deg, gray 25% , transparent 26%),
linear-gradient(45deg, gray 25% , transparent 26%),
linear-gradient(225deg, gray 25% , transparent 26%)
;
background-position:
var(--sq1) ,
var(--sq2) ,
var(--sq3) ,
var(--sq4);
background-size: calc(var(--bgsize) * 1px) calc(var(--bgsize) * 1px );
}
reset bg-size:<br>
<label for=a20>20px</label><input type=radio name=test id=a20>
<label for=a100>100px</label><input type=radio name=test id=a100>
<label for=a150>150px</label><input type=radio name=test id=a150>
<div></div>
demo with option to reset --bgsize and color
https://codepen.io/gc-nomade/pen/GRJGXwv
I would like to achieve the following effect in a div box. What CSS would do the trick? Thank you in advance for your answers!
Using the linear-gradient function in CSS3, the code will be +- like this:
.box{
height: 100px;
width: 100px;
background: linear-gradient(to top, blue, white, blue)
}
as stated in the first answer, use css gradients, and combine with border-radius for your rounded corners.
.box{
height: 200px;
width: 150px;
background: linear-gradient(to top, #4690ff, #ffffff, #4690ff);
border-radius:15px 0px 0px 15px;
}
<div class="box"></div>
You can use CSS3 with linear gradient. Something like this:
.demo {
width: 150px;
height: 150px;
}
.gradient {
background: #508cf4; /* Old browsers for fallback */
background: linear-gradient(to bottom, #508cf4 0%, #ffffff 50%, #508cf4 100%);
}
<div class="gradient demo"></div>
You could also google for "css3 gradient generator" to have a GUI. For example cssgradient.io
You might test run a few css gradient tools like ColorZilla and GradientFinder to work with gradient colors.
Also, by combining a low opacity radial gradient with a linear gradient you can get a more rich look that might get closer to your original image.
.box {
display: block;
width: 182px;
height: 229px;
background:
radial-gradient(ellipse at center, rgba(252,253,255,.2) 54%,rgba(212,229,255,.2) 66%,rgba(212,229,255,.2) 66%,rgba(153,193,255,.2) 79%,rgba(153,193,255,.2) 79%,rgba(57,136,255,.2) 100%),
linear-gradient(to top, rgb(57, 136, 255) 0%, rgb(153, 193, 255) 13%, rgb(212, 229, 255) 23%, rgb(252, 253, 255) 43%, rgb(252, 253, 255) 57%, rgb(212, 229, 255) 77%, rgb(153, 193, 255) 87%, rgb(57, 136, 255) 100%);
border-radius: 16px 0 0 16px;
}
<div class="box"></div>
<p>original <img src="https://i.stack.imgur.com/OJ5Z6.png" /></p>
What I am trying to do is I want to keep the top 50% of the html button to have a gradient say from #FFF to #BBB and the bottom 50% should remain in one color lets say #111. I can't figure out a way to do it, any help would be largely appreciated.
The code of my button is:
<button class="Button1" type="submit">Submit</button>
The css:
.Button1 {
background-image: linear-gradient(to bottom, #fff 0%, #bbb 50%, #111 50%);
}
This should do the trick in latest browsers. It's up to you to make it cross-browser compatible. (I personally like the Photoshop-esque interface of http://www.colorzilla.com/gradient-editor/)
Here is a sample from Bootstrap that should help you out with button gradients. This also covers most modern browsers.
.btn-info {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
background-color: #49afcd;
background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
background-repeat: repeat-x;
border-color: #2f96b4 #2f96b4 #1f6377;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
Hope that helps.(these are sort of teal, so you'll have to change that part)
So I am trying to setup the fadeout css3 hr tag, it works on JSFiddle but I can't solve it on my site.
My CSS class on site:
.about-sidebar{
margin: 25px 0;
height: 1px;
background: black;
background: -webkit-gradient(linear, 0 0, 100% 0, from(#1F1F1F), to(#FFD700), color-stop(50%, black));
}
HTML:
<hr class="about-sidebar" />
I have tried taking the class out of the HR tag and surrounding it with a div but doesn't solve.
Site: http://travisingram.net/ it is the "Welcome to my Blog" on the sidebar.
Jsfiddle working:
http://jsfiddle.net/ZTz7Q/1633/
The reason it wasn't working on your website was because the <hr> didn't contain the class with the gradient styling. Currently, you just have <hr> which should be changed to <hr class="line"> or whatever class you're using.
Aside from that, the linear-gradients needs some tweaking and cross browser prefix vendors for more support.
jsFiddle example
I don't know what colors you want.. but here is black to transparent.
.line {
margin: 25px 0;
height: 5px;
background: black;
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 2%, rgba(255,255,255,0) 90%);
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 2%,rgba(255,255,255,0) 90%);
}