Is it possible to fade the text horizontally near the end of the div using the CSS.
For example like this:
CSS gradients and rgba will do the job for this
Demo
Extended Text Version (Updated)
div {
position: relative;
display: inline-block;
}
div span {
display: block;
position: absolute;
height: 80px;
width: 200px;
right: 0;
background: linear-gradient(to right, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,.6)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,.6) 30%,rgba(255,255,255,1) 100%);
top: 0;
}
Note: I've stripped off cross-browser CSS gradient code, you can get
it from http://www.colorzilla.com/gradient-editor/
About the rgba() it's introduced recently in CSS3 spec, where I hope you know what RGB stands for and a stands for alpha, so instead of using HEX I am using RGBA and am just playing with the alpha part here
Skipping IE9-, which may require an image or SVG, you can add a position: absolute div that covers the full width and has a partially-transparent gradient that fades to white. This div must be contained by the element you want to cover, which must be position: relative.
http://jsfiddle.net/JcPAT/
Not really cross browser friendly but you can use something like:
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(left, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 20%, rgba(0,0,0,0) 100%);
Related
I have only basic knowledge on the CSS. I'm trying to give gradient color for one of my ITEM as per below guidelines and the gradient should be vertical.
I tried the below , but only the first color is coming all over the region. I dont understand that 30% and 50%. How to achieve this?
.myheader {
background: linear-gradient(to bottom, #mycolor1 85%, #mycolor2 45%, #mycolor3 10%);
}
Eveyrone is giving the to bottom solution but the trivial solution is to consider to top and keep the percentage values you are using in the picture:
linear-gradient(to top, #mycolor3 10%, #mycolor2 45%, #mycolor1 85%);
example:
body {
background: linear-gradient(to top, red 10%, purple 45%, blue 85%);
margin: 0;
height: 100vh;
}
Concerning the percentage between (50% and 30%), they are probably the color hints (also called color interpolation hints). From the new specification
Between two color stops there can be a color interpolation hint, which specifies how the colors of the two color stops on either side should be interpolated in the space between them (by default, they interpolate linearly). There can only be at most one color interpolation hint between any two given color stops; using more than that makes the function invalid.
example:
body {
background:
/* First gradient with hints*/
linear-gradient(to top, red 10%, purple 45%, blue 85%) left /45% 100%,
/* Second gradient with hints*/
linear-gradient(to top, red 10%,27.5% ,purple 45%, 57% ,blue 85%) right/45% 100%;
background-repeat:no-repeat;
margin: 0;
height: 100vh;
}
You need to specify the points in ascending order. Just invert the values you have (you don't really need the purple but could add it if desired):
body {
height: 100vh;
overflow: hidden;
background: linear-gradient(to bottom, blue 15%, red 90%) center/cover no-repeat;
}
.myheader {
width: 100px;
height: 100px;
background: linear-gradient(to bottom, blue 15%, purple 45%, red 90%);
}
<div class="myheader"></div>
The to bottom direction tells you that your gradient is going from top to bottom. So if the first color is 85%, that means that it goes down to 85% of the height of the container.
By inverting the percentage (85% -> 15%), you can achieve the result you want.
This is an example , use your rgba colors.
.myheader {
background: linear-gradient(to bottom, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%
}
The percent values must ascend in order. ( https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient )
$mycolor1: blue;
$mycolor2: purple;
$mycolor3: red;
.myheader {
background: linear-gradient(to bottom, $mycolor1 0%, $mycolor2 50%, $mycolor3 90%);
height: 200px;
width: 100px;
}
https://jsfiddle.net/qa1kLmfc/3/
For your gradient you probably could use just blue and red.
I'm trying to create a linear gradient within another linear gradient, is it possible ? example below
background: linear-gradient(to right, #color1 50%, #color2 0%)
color 1 is
background: linear-gradient(#aa0507,#e0171e,#aa0507);
color 2 is
background: linear-gradient(#f4c05b,#fcd580,#f4c05b);
the end result should be this
Simply adjust the background-position/background-size using multiple background. Basically each gradient will be half width and full height.
body {
margin:0;
height:100vh;
background:
linear-gradient(#aa0507,#e0171e,#aa0507) right/50% 100%,
linear-gradient(#f4c05b,#fcd580,#f4c05b) left /52% 100%; /*we can make this a little bigger to avoid the blank space*/
background-repeat:no-repeat;
}
You can combine the two gradients into background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507) to get the effect - note that the gradients on the both left / right sections are left to right in this answer.
See demo below:
body {
background: linear-gradient(to right, #f4c05b, #fcd580, #f4c05b 50%, #aa0507 50%, #e0171e, #aa0507);
}
I have been experimenting with a top to bottom linear-gradient for a background of a page I am making. The only problem is that there is a footer on the page and I would like to end the gradient before the end of the div.
Is this possible in CSS solely, or should the HTML be changed to create a div which ends before the footer begins? Or should jQuery calculate the percentage at which the footer begins?
The pages are all different lengths, so ending by percentage would not work for all pages. Can a linear gradient be ended, say 500px before the end of the div?
My code is here, the wrapper div extends for the full width of the page.
div#wrapper {
background: #ffdf96; /* Old browsers */
background: -moz-linear-gradient(top, #ffdf96 0%, #a67f25 50%, #000 60%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdf96), color-stop(50%,#a67f25), color-stop(60%,#000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffdf96 0%,#a67f25 50%,#000 60%); /* IE10+ */
background: linear-gradient(to bottom, #ffdf96 0%,#a67f25 50%,#000 60%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdf96', endColorstr='#a67f25',GradientType=0 ); /* IE6-9 */
}
The page in context is here: http://bit.ly/1ar6KuR
Many thanks for any help that you can give :-)
Why not reverse the gradient color stops and reverse the direction from top --> bottom to bottom --> top and have the first color stop at the required pixel value.
Codepen Example
Or am I overthinking this?
Perhaps the best way is to add :before pseudoclass and apply gradient to that, like:
#wrapper:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60%;
content: "";
... and background here ...
}
or DIV inside #wrapper as first child with the same CSS settings.
I want to make a CSS3 gradient that consists of a 1px line.
How can I do this?
I have tried the following code, but the gradient that is produced is too thick:
background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 51%);
(see here)
How can I make the line smaller, so its only 1px wide? The percentage values seem to control the positioning of the line, but no matter how much I adjust them, I can't get it to 1px wide!
(Essentially, I am using the line to act as a 'faux columns' background [i.e. to visually separate a left and right column. (Although, to keep the jsFiddle simple, I have removed the columns)] I know there are other ways of doing columns, but this method is the best for my situation)
EDIT: Just to clarify, this is for a slightly odd use case, where the width has to be 100% and no psudeo-elements can be used.
/* Opera Mobile */
background: -o-linear-gradient(left, #d1d1d1 1px, white 1px);
/* Firefox for Android */
background: -moz-linear-gradient(left, #d1d1d1 1px, white 1px);
/* WebKit browsers */
background: -webkit-linear-gradient(left, #d1d1d1 1px, white 1px);
/* new syntax: IE10, Firefox, Opera */
background: linear-gradient(90deg, #d1d1d1 1px, white 1px);
background-position: 100% 0;
background-repeat: repeat-y;
background-size: 50%;
demo
[I used 2px instead of 1px in the demo as 1px was not visible. I only tested in Chrome though.]
You should always put the unprefixed version last. There is no need for -ms-linear-gradient. IE10 now supports the standard syntax with no prefix and IE9 doesn't support gradients at all.
If you don't care about IE8 (which you probably don't if you're using gradients) you can use calc().
background-image: linear-gradient(left, transparent 50%, rgb(255,255,255) 50%, rgb(255,255,255) calc(50% + 1px), transparent calc(50% + 1px));
This is will work with any width element, whereas just using percentages will break down on smaller and wider elements.
.style {
background-image: -o-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
background-image: -moz-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
background-image: -webkit-linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 0%, rgb(255,255,255) 50.5%);
background-image: linear-gradient(left , rgb(255,255,255) 50%, rgb(209,209,209) 50%, rgb(255,255,255) 50.5%);
}
You are not dealing with pixels, you are using percentages. So 1% of your width, which must be 200 is 2px. (I think that is why this works, maybe I'm wrong.) You can use percentages decimals, so .5% == 1px.
I had use this earlier, change it according to your need. I mean change colors and angle as you want
background-image: liner-gradient(to bottom, white, white 14%,blue 1%,white 15%);
i am using this in my body code
body {
margin:50px;
text-align:center;
padding: 0px;
background: #2a6da9;
background: -moz-linear-gradient(top, #1D1D1D, #1F1F1F);
background: -webkit-gradient(linear, left top, left bottom, from(#1D1D1D), to(#1F1F1F));
}
in the background, the gradient displays in blocks that look rough and pixelated. How do i fix this to where it is smooth. I also have tried making an image the background, but had no luck. Thanks
It is browser dependent and I do not see it on mine with the same css. You could try changing it to:
background: -moz-linear-gradient(top, #1d1d1d 0%, #1f1f1f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1d1d1d), color-stop(100%,#1f1f1f));
But it is such a slight change in color, I even set the height to over 300px.
Using a 1 X 100 pixel image made the quality look much better