Is there a way to make gradient like this with css only?
I've tried to use background-position tag
But it didn't work for me probably because I don't know how sprites work.
It's a straightforward radial gradient. This should put you on the right track.
circle 150px says it's a circular gradient with radius 150px
at 25% 33% defines the origin (I've eyeballed it 1/4 from the left and 1/3 from the top) You can also use px or other lengths.
Finally give the colors from the center out.
div{
height: 200px;
border: 1px solid;
background-image: radial-gradient(circle 150px at 25% 33%, white, yellow, lightyellow, aqua);
}
<div></div>
Radial gradients are quite easy. Here's an example -
#gradient {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}
Documentation here - http://www.w3schools.com/css/css3_gradients.asp
three{
width:100%;
height:300px;
border:1px solid white;
background-image:radial-gradient( circle 80px at 25% 25% , rgb(255,255,255) 10%,rgba(251, 255, 185, .7), rgb(255,255,255) 60% 70%,rgb(2,153,218) 200%);}
If you want , change its position as your wish.
Related
I'm looking to create this white arrow that goes inside the image with the HTML you can find in the snippet in a pure CSS way, not editing any HTML code.
.foto {
width: 100%;
float: left;
min-height: 215px;
background:
linear-gradient(to bottom right,transparent 50%,#fff 0) bottom right/10% 50% no-repeat, linear-gradient(to bottom left,#fff 50%,transparent 0%) top right/10% 50% no-repeat, url(https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg) center/cover
}
<div class="foto bg_fix"><img src="https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg" itemprop="image" width="724" height="230" style="display: none;"></div>
If you do not need to support Edge, you can get away with the clip-path. It's by far the easiest solution to your problem.
You can check the support on CanIUse
Also, amazingly helpful tool for this is Clippy, but don't forget to read about this technique on MDN - CSS clip-path.
.foto {
width: 100%;
float: left;
min-height: 215px;
-webkit-clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
clip-path: polygon(100% 0%, 85% 50%, 100% 100%, 0 100%, 0% 50%, 0 0);
}
/* first value is X, and second value is Y coordinate. Feel free to experiment with percentages according to your needs. */
SOLUTION 2:
Old "trick" which has much much better support => CSS shapes.
You would basically need to create a new element (which is going to be your white triangle) and then put it on top of that image. Here's a sample code for a triangle that you need:
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red; /* red is just for display puproses */
border-bottom: 50px solid transparent;
}
<div id="triangle-left"><div>
Btw, you have both background-image and img tag in your html. Decide which one you want to use, and if you have problem with cropping the image, you may want to look into background position and/or object-fit.
You can correct you gradient like below. You were almost good, simply switch the position of both making the bottom one on the top and the top on on the bottom:
.foto {
min-height: 200px;
background:
linear-gradient(to bottom right,transparent 49.8%,#fff 50%) top right/10% 50%,
linear-gradient(to top right,transparent 49.8%,#fff 50%) bottom right/10% 50%,
url("https://s3.pagegear.co/1/contents/blog/2016/imagen_cachorro_comprimir.jpg") center/cover;
background-repeat:no-repeat;
}
<div class="foto bg_fix" ></div>
I know I can make a linear gradients as a background of a div element. But is it possible to make intersecting line gradients? See image below:
Yes, it is very much possible to create such patterns by using two linear-gradient images. When multiple background images are assigned to an element, the UA would by default set them as layers where the first one from the right is the lowermost layer and last one from right becomes uppermost.
Below is a sample snippet for both the patterns.
(Note: In the angled lines pattern, I've set the color stop points differently to avoid jagged lines. The angled linear gradients always tend to produce them.)
div {
height: 200px;
width: 200px;
margin: 10px;
border: 1px solid;
}
.checkered {
background: linear-gradient(to right, black 1px, transparent 1px), linear-gradient(to bottom, black 1px, transparent 1px);
background-size: 10px 10px;
background-position: 5px 0px, 0px 5px;
}
.angled {
background: linear-gradient(45deg, transparent 7px, black 7px, transparent 8px), linear-gradient(315deg, transparent 7px, black 7px, transparent 8px);
background-size: 10px 10px;
}
<div class='checkered'></div>
<div class='angled'></div>
Not sure if this is what you are after:
HTML
<div id="red2blue"></div>
<div id="blue2red"></div>
CSS
div{
width:100px;
height:100px;
opacity: 0.5;
position:absolute;
top:0;
left:0;
}
#red2blue{
background: linear-gradient( 45deg, red, blue );
}
#blue2red{
background: linear-gradient( -45deg, blue, red );
}
https://jsfiddle.net/9na275fn/
I ran into a problem using a linear-gradient on a particularly large element.
On smaller elements, a hard edge can be achieved with the following:
background-image: linear-gradient(180deg, #000, #000 33%, #0f0 0);
However when the element has a very large height, the edge is soft. You can see in the following image and example below, the second version has a soft edge when the element is very large and the same gradient is applied.
I have tried many variations on the linear gradient and have been unable to achieve a hard edge on the large version. Is there a way to apply a gradient with a hard edge on a large element?
HTML example:
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
div:first-child {
height: 100px;
}
<div></div>
<div></div>
Edit
The goal of this gradient is for use with another background image, so I prefer techniques that are compatible with the following (don't cover the image):
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: url(http://placehold.it/600x20), linear-gradient(180deg, #000, #000 20px, #0f0 0);
}
<div></div>
Edit 2
Thanks to #Tarun, this appears to be browser related. The above image is a screenshot from Chromium 45. Safari and Firefox appear to render correctly.
Edit 3
There is an open bug report for chromium about this issue.
I've found an alternative using gradients to achieve the same effect, however I think it should be possible to achieve this with 1 gradient, so I consider this a work-around.
The trick is to use multiple backgrounds with 2 gradients that don't change color. Then just define background-size to achieve the hard edge effect. See the working snippet:
div {
height: 5000px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image: linear-gradient(#000, #000), linear-gradient(#0f0, #0f0);
background-size: 100% 20px, 100%;
}
div:first-child {
height: 100px;
}
<div></div>
<div></div>
This works for me.
background: linear-gradient(to bottom, black 0% ,black 20% ,green 20% ,green 100%);
edit: I've tried to do exactly what you're doing in the question, and I'm getting a hard edge on both boxes. Your problem must be related to your browser.
edit 2: confirmed
You could use box shadow for the same effect.
div {
height: 5000px;
}
div {
background: #0f0;
box-shadow: inset 0 100px 0 0 #000;
}
<div></div>
You need to repeat each color, and each percent rate of linear-gradient in a tricky, but expressive way. Let's see it in a six colors sample to understand the principle.
This approach works for any size of block.
div {
height: 100px;
background-repeat: no-repeat;
margin-bottom: 1em;
background-image:
linear-gradient(90deg,
red,
red 17%,
orange 17%,
orange 34%,
yellow 34%,
yellow 51%,
black 51%,
black 68%,
green 68%,
green 85%,
blue 85%);
}
<div></div>
You could use a bit more codespace and set up your gardient like following:
background: #4c4c4c;
background: linear-gradient(to bottom, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
The solid background setting is there to make sure your page is showing some color if the browser somehow fails to support this type of gardient or its filter.
It is also preferred to include -moz, -o and other browser-based fixups to make sure.
I'm trying to make a gradient which would be faded on the left and right, but solid in the middle. Is this possible? I've made my research, but couldn't find any tutorial online.
P.S. This is for Internet Explroer
You question is a little vague but it's just a matter of applying color stops as and when required.
If you apply two color stops at different points but the color is the same at both...you get solid color in the middle.
JSFiddle Demo
CSS (unprefixed)
.box {
width:25%;
height:200px;
border:1px solid lightgrey;
display: inline-block;
}
.one {
background: linear-gradient(to right,
rgba(255,255,255,1) 0%,
rgba(0,0,255,1) 25%, /* intermediate color stop */
rgba(0,0,255,1) 75%, /* second intermediate stop */
rgba(255,255,255,1) 100%)
; /* W3C */
}
Use the Gradient Editor for this
I'm working on a HTML/CSS/JS project where the app is a fixed size and elements must be positioned precisely, based on the designs. Because the window size is fixed, I can easily work with pixel dimensions in CSS and not worry about resizing the browser. I also have the luxury of not worrying about IE or Opera: the app must work in webkit and firefox only.
In a few places, I need to have a gradient background going over specific number of pixels. This would be easily accomplished with something like
background-image: linear-gradient(to top, #666666, #000000 60px);
(and its -webkit- and -moz- counterparts.) This does the trick for most elements. However there are a couple where I need to have the top and bottom pixel positions for colour stops. If these were percentage points, then it could be done with something like:
background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666);
(from grey to black over 60px, then transparent and then black to grey over the last 10%). However I need to accomplish the same with pixels, as the element in question is sized differently at different times. I'd like to avoid having to use JS to re-apply the gradient at different dynamically calculated percentage points if needed.
So, my question: is there a way to specify a colour stop x pixels (not percentage) from the end?
I just came over this via search engine, i think the best solution was already given by vals with using multiple background images - but instead of using background-size and background-position i think it's a lot more flexible and stable to use alpha colors here (with rgba()), like in the example below:
background-image:
/* top gradient - pixels fixed */
linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px),
/* bottom gradient - pixels fixed */
linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px),
/* background gradient - relative */
linear-gradient(to bottom, #eee 0%, #ccc 100%) ;
This gives me exactly the behaviour I was initially searching for. :)
Demo: http://codepen.io/Grilly86/pen/LVBxgQ
It works with calc(), but unfortunately not in MS browsers:
First row of each pairs has the solution with 2 background stacked, 2nd row has calc in use. Does not work with Internet Explorer and Edge browsers.
div {
margin-left: auto;
margin-right: 0;
width: 200px;
height: 20px;
animation: sweep 5s ease-in-out alternate infinite;
text-align: center;
color: white;
font-family: sans-serif;
font-weight: bold;
line-height: 20px;
will-change: width;
}
div:nth-child(odd) {
background-image: linear-gradient(to right, red, green 100px, transparent 101px), linear-gradient(to left, red, green 100px);
border-bottom: 1px solid gray;
}
div:nth-child(even) {
background-image: linear-gradient(to right, red, green 100px, green calc(100% - 100px), red);
margin-bottom: 10px;
}
div:nth-child(n+3) {
width: 300px;
}
div:nth-child(n+5) {
width: 400px;
}
div:nth-child(n+7) {
width: 500px;
}
div:nth-child(n+9) {
width: 600px;
}
#keyframes sweep {
100% {
width: 600px;
}
}
<div> 200 </div>
<div></div>
<div> 300 </div>
<div></div>
<div> 400 </div>
<div></div>
<div> 500 </div>
<div></div>
<div> 600 </div>
<div></div>
I don't think this is possible, but overlaying 2 objects, one with opaque pixels from bottom and the other with pixels from top, would still avoid using JS
.background {
position: absolute;
background-image: linear-gradient(to top, #666666, black 60px, transparent 60px);
}
.overlay {
position: relative;
background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px);
}
In the line of the previous answer from po228, but in the same element background.
Set 2 different gradients, one starting from top and the other from bottom
.test {
background: linear-gradient(to top, red 10px, white 10px),
linear-gradient(to bottom, blue 10px, white 10px);
background-size: 100% 50%;
background-repeat: no-repeat;
background-position: bottom center, top center;
height: 150px;
width: 300px;
}
<div class="test"></div>