I'm trying to accomplish some thing like:
Where I have the bottom of a div fading into the color of the div that comes after. Not sure what the best way to accomplish this is to use a linear gradient or an image.
I have tried this solution and it resulted in this:
Which is close but the fade begins a bit high.
.sumo-section {
-webkit-mask-image: -webkit-gradient(linear, left top,
left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
How should I modify it to get the transition to begin further down the div?
Linear gradient because is rendered by the browser, you have better control and can be dynamic (easier) if you need so. I don't think there is better a reason to use an image instead.
Related
I have a school project where i need to make a exact copy of a website.
The background is a bit tricky because i need to (what i think) add a radial ellipse but then with no sides or bottom, only the top.
when i try to make a ellipse i get a oval which covers all four sides (obviously) but i dont know hot to apply it to the top only.
can anyone help me out?
this is what is is supposed to look like
PLease pay attention to the background only
I already tried a ellipse and a normal radial gradient but i does not function how i want it to be.
this is the code i have
background-image: radial-gradient(ellipse, white, lightgrey, lightgrey,
#1b1b2e
#1b1b2e);
adjust your code like below:
html {
min-height:100%;
background-image: radial-gradient(150% 150% at bottom center, white, lightgrey, #1b1b2e, #1b1b2e);
}
So I'm trying to get my webpage to have a two tone look, one side plain and the other with a radial gradient.
I currently tried making it into an SVG and that failed horrible but I am not entirely sure how to get a triangle that goes from the top left, bottom left, and top right of the page, while also scaling to the browser size.
When I use the SVG as a background, there is a large white block around the top and bottom, and when I just simply don't use a background and just put in the svg code into the HTML it's so giant and I can't manage to get it to scale.
This photo was something I made in sketch but I am new to frontend and I've just had a rough time getting the angles color.
I can get everything else if I could just get the background to do that :c
No need SVG you can do this with CSS and multiple background:
body {
margin:0;
height:100vh;
background:
linear-gradient(to bottom right,transparent 49.8%,grey 50%),
radial-gradient(circle at top,yellow,black);
}
Is it possible to set a linear gradient to the part of the background of <html> element that is typically off screen and out of viewport, but can be "brought in to view" momentarily by trying to scroll past the limit in any of the 4 directions?
I am trying to make the color outside the viewport match my site color. This way, when the user is at top of page and tries to scroll higher, on some browsers, the space that is shown and is typically white will match the color of my site.
I want to do the same thing for the bottom of site if user tries to scroll past bottom.
If I set element's background-color to red, this works perfectly, and all the white color outside viewport, top f page, bottom of page, as well as left and right, will now be painted red instead of default white.
Problem is, my header and footer are different colors, so I need to use a linear-gradient. When I use a gradient, for example:
background: -webkit-gradient(linear, left top, left bottom, from(#f8593a), to(#000));
background: linear-gradient(#f8593a, #000) no-repeat;
it simply doesn't show up.
Am I doing something wrong, or is this simply not possible?
UPDATE
Test Case jsFiddle
Best I can do in a jsFiddle. (PS: if someone knows of a way to create a fiddle like this without jsFiddle's panels, so the actual Chrome pulling down can be tested, please suggest.)
The difference between this example and live behavior is that in the example, you can't drag the iFrame window past its boundary, thereby revealing that `out of viewport part of .' However, the blue background-color here should represent that same area here. And as can be seen, the color goes to that area without any extra work, while the linear-gradient is treated as an image and stays within some bounds.
I know there are a lot of topics covering blur caused by CSS animations, but I seem to have come across a rather unique use case where every solution I've come across simply doesn't work.
I made a codepen showing a minimalist setup of my exact issue:
Codepen
Basically, I have a div with opacity 0.95 that is skewed by 10 degrees, and whose inner content is skewed by -10 degrees (so that it appears upright). Within this content there is a paragraph at the bottom. When you hover over it, it triggers an animation of the paragraph being shifted to the right. Unfortunately this makes all the text on the page blur.
Note that removing either both skew transformations or the opacity setting make the text not blur anymore.
This is probably caused by the skew and the reverse skew that force the browser to accelerate the process. But you don't have to apply two skews to get this result, you can also use a gradient background
background:linear-gradient(170deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 164px, #a3d5d3 163px, #a3d5d3 calc(100% - 165px), rgba(0,0,0,0) calc(100% - 165px), rgba(0,0,0,0) 100%);
I'm using the Zurb Foundation framework and I'm trying to make some call-to-action buttons which are dynamic in size with text, a background gradient and a right pointing arrow.
I can think of three possible ways to do this :
Have an a element wrap another element and style both backgrounds such that one has the gradient and the other has the arrow positioned on the right.
Have just an a element with a gradient background and put the arrow as an img in my html.
Use one element with one background image including the gradient and arrow for the whole thing.
Each of these options feels wrong in some way -
I have a non-semantic div purely for style purposes.
I have an img in my html even though it is purely stylistic.
Feels like a dirty solution, especially if the button is scalable.
What is the best practice of these options, or is there a method I haven't considered ? How do I also ensure the button scales nicely with the text and arrow in the right places as the Zurb Columns scale ?
Muchos gracias ! :)
I'm not sure I understand your question exactly but if you are using Foundation then have you tried:
<div class="side-buttons">
<button id="someid" class="nice [red:green:blue:black] button" onclick="someEvent();"/>
</div>
The nice class adds a gradient similar to what I believe you are talking about. And the side-buttons class, if I remember correctly, keeps the button width inherited, i.e. from a nested div with class "two columns", but the height adjusts depending on the text.
Hope I have helped, maybe you could post some code with what you have.
For Firefox and Webkit, you can use CSS3 multiple background syntax to apply both a gradient and background image via css.
.gradAndImg {
background-image: url(image.png), -moz-linear-gradient(top, #ffcc00, #ffffff);
background-image: url(image.png), -webkit-gradient(linear, left-top, left-bottom, from(#ffcc00), to(#ffffff));
}