implementing basic background shapes #204
Conversation
|
I believe we would want to save this particular decoration for the home page (which is okay to do). |
|
@mansona please refer to the background shape work I already shipped, I would want us to make sure we are being consistent with ourselves. |
|
@MelSumner where is the work "already shipped"? Is it in the Navbar PR? |
mansona
force-pushed
the
background-shapes
branch
from
fce8ec0 to
ea304fa
Compare
|
Also if anyone is interested in seeing what this actually looks like on the landing page you can check out https://deploy-preview-387--ember-website.netlify.com |
addon/styles/background-shapes.css
Outdated
| background-size: contain; | ||
| } | ||
|
|
||
| .swipe-bottom { |
There was a problem hiding this comment.
We can use css instead of using an .svg-
- use a linear-gradient for the background-image
- set the transform skew
- set the transform origin
There was a problem hiding this comment.
The thing with CSS gradients is the missing anti-alias for sharp edges, I'm not sure if I would go that direction, especially when the svgs in question can be further compressed.
There was a problem hiding this comment.
I didn't know about that @pichfl, you learn something new every day! I was thinking about it a little bit and it makes sense (I think) to use the same technology for all background shapes especially if there are limitations to doing it in CSS 🤔
| @@ -0,0 +1,16 @@ | |||
| <?xml version="1.0" encoding="UTF-8"?> | |||
| <svg width="178px" height="125px" viewBox="0 0 178 125" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> | |||
There was a problem hiding this comment.
I think it would be okay to add role="presentation" to mark this as decorative.
There was a problem hiding this comment.
@MelSumner this is not required as the svgs are used as CSS backgrounds anyway.
There was a problem hiding this comment.
I was going to ask about this too, is this needed at all since they are in the background?
There was a problem hiding this comment.
All svg images need to be compressed. The output from Sketch is way too verbose for images that are pure decoration. I do recommend svgo over other tools, even if it might be a little aggressive, it should provide good results.
addon/styles/background-shapes.css
Outdated
| background-size: contain; | ||
| } | ||
|
|
||
| .swipe-bottom { |
There was a problem hiding this comment.
The thing with CSS gradients is the missing anti-alias for sharp edges, I'm not sure if I would go that direction, especially when the svgs in question can be further compressed.
mansona
force-pushed
the
background-shapes
branch
4 times, most recently
from
d2ad96b to
bd584d9
Compare
mansona
force-pushed
the
background-shapes
branch
from
bd584d9 to
b92b9b2
Compare
|
I think I have covered all of your feedback @MelSumner and @pichfl 🤔 Let me know if there is anything else before we can get this merged 👍 |
This is a first pass on the generic background shapes for the new redesign, I was inspired to work on it this evening but I would much prefer that it was reviewed by @ghislaineguerin and/or @pichfl before we merge it.
I will add a screenshot in a bit but you can see the docs page that I added to the field-guide