I'm looking for a glass effect with a linear-gradient like in . I've tried several effect and the one that most resembles is:
background: linear-gradient(#1f87ab, #004961 50%, #004961 90%);
I've also looked at:
Creating a Two-Color Sharp Gradient on Text With CSS3
Horizontal sharp background gradient with specific length of first color
But they didn't help
I solved using
linear-gradient(#2396bf, #0d5b77 40%, #004961 3%, #004961);
And it even looks a little bit better
Related
<-- see image with imperfect pixel here.
When using skew in CSS I get a imperfect pixel where the skewed grey border meets the grey bottom border. Looks like some sort of outline or box-shadow. But using outline:0;box-shadow:0; does not effect it. Does anyone know how I can solve this? Cheers and thanks in advance! ✌️
Edit, relevant code: https://jsfiddle.net/acnodrfe/
The blue background color of that element was causing this. The grey border did get a little bit of blue from the bg with it. Changing the background with: background: linear-gradient(270deg, #0b19ba 0%, #0b19ba 99%, #cccccc 100%); solved the problem. Because it gives the edge close to that border a grey value.
PS: This was only possible because I have the light blue element on top of it so you don't see the gradient. Be aware of that if someone might need and find this later on in time. 🚀
This question already has an answer here:
Footer consisting of two right triangles
(1 answer)
Closed 1 year ago.
I'm trying to create a footer for a site that has this split color design, where's there's two triangles almost overlapping one another. Any ideas would be greatly appreciated!
Thanks!
I attempted something like this:
background: linear-gradient(120deg, #ba5459 48%, #97444c 48%);
Its not overlapping triangles its a special CSS property called clip-path which is used to clip the rectangular div into various shapes.
Create a div first and then in CSS paste the following property. Play with the values to understand its behavior.
clip-path: polygon(0 24%, 100% 0%, 100% 99%, 0% 100%);
You can learn more about clip path over there.
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);
}
I really like the look of crisp background images with a text overlay. However, I always seem to find the text is drowned out by the background image when I do them. So I am always looking for the correct solution or industry standard for using this background -> text technique.
Looking at this image from Adobe, the background image appears darker than the actual image. Using inspect element I cannot see what is causing this- no opacity or gradients. What technique are they using to darken this and what should be used in situations like this?
http://www.adobe.com/uk/products/experience-design.html
A quick look at the CSS of the element and here is your answer:
.hero2-fx-frame-2[class*="hero2-theme-1"]::after {
background-image: linear-gradient(rgba(0, 0, 0, 0.95), transparent 53%), linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent 53%);
}
It's basically a black layer with 53% of opacity.
Use independent divs. Don't nest the text div inside the image div. Then test different gradients on both divs until you get what you are looking for.
I'm building a little SCSS library of responsive isometric shapes (kind of like IsomerJS but DOM-based) for practice and fun architecture. One of the shapes I'd really like to make is an arch. Here's an example of what I mean:
http://codepen.io/anon/pen/ogqWKY
As you can see, my arch is just a prism with a transparent radial gradient on one side:
background: radial-gradient(ellipse at bottom, rgba(darken($color, 20%), 0) 0%, rgba(darken($color, 20%), 0) 60%, rgba(darken($color, 20%), 1) 60%, rgba(darken($color, 20%), 1) 100%);
It works pretty well in Webkit so far. I'm about 80% there, but if you look at it, the hole looks a little...flat. How can I add some depth illusion to the hole? I've tried multiple radial gradients, but I can't figure out a way to offset the inner gradient to form that 3d-like illusion. Any ideas?
While I'm asking, I'd also like to ask if anyone can give me a cone shape. A pyramid is easy (two triangles rotated 60deg around a square), as is a cylinder (the "tube" is just a rectangular shape with border-radius on one end and a horizontal linear-gradient for the illusion of depth). I started with this for a cone, but it really needs a gradient to give the illusion of depth, and as far as I know there's no easy way to apply this to the triangle shape in pure CSS (as triangles are usually built with borders, not backgrounds, and I can't selectively apply a border-image to only one border while keeping the others transparent).
Thanks in advance for your help!
I'd suggest that you add a div.depth inside the arch's div to control the effect.
OR you could add conic-gradient at arch's after pseudo element. This should be the final result:
<strong>background</strong>: radial-gradient(ellipse at bottom, rgba(25, 96, 144, 0) 0%, rgba(25, 96, 144, 0) 60%, #196090 60%, #19608F 100%), conic-gradient(from 141deg at 82% 89%, transparent 60%, #196090 50%);
It's not perfect, but it's something ¯_(ツ)_/¯