Submitted about 2 years ago
Article Preview Component Vanilla HTML CSS and Javascript
@CrypticMango
Design comparison
SolutionDesign
Solution retrospective
I have a few questions about how to achieve the correct look on this project;
- How do I change the color of an SVG when it's in an image tag?
- How do I get the "speech bubble" look on the share panel in desktop view? Is creating a new div, styling a triangle, and using position to place it correctly the only way?
- In desktop view, how do I make it so the share panel is always going to be above the share button when clicked no matter how big or small the user's screen size is?
Community feedback
- @Daniel77aprPosted about 2 years ago
Hey, Shawtii!
- You need to use an
svg
tag, not animg
tag. You can then set thefill
property in CSS to change its color. - What I did is make a
div
element with the desired weight and height, setrotate
to45deg
and adjust its position. There are ways to make triangles by changing a div's border like shown on this video, but this works just fine since you can cover half of the square when positioning it to make it look like a triangle. - You can use
position: absolute
andtranslate
which lets you set its x and y position relative to itself so it is always at the right place. I did the same with the trianglediv
that we talked about in the second question.
I hope this helps!
0@CrypticMangoPosted about 2 years ago@Daniel77apr
Hello!
Thank you for this, this helps me a lot so I can get my project looking like it should.
1 - You need to use an
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord