Design comparison
Solution retrospective
Hello, everybody! 👋
This was a fun, simple challenge which I enjoyed! I added a cool little (and surprisingly simple) 3d hover effect to the card component (thanks to Dev Ed, once again). 😆
And for those tricky background SVGs? I ended up using a combination viewport width and height units and percentages to have the SVGs subtly change their position when the screen is resized. IDK if they match the design exactly but they look okay! 😂
Feedback is welcome and appreciated, of course! 😊
Happy coding! 😁
Community feedback
- @mesutcifciPosted about 4 years ago
Hi. Congratulations.
I'm trying to do this challenge too. I trouble with background images position 😄 Your solution is perfect.
I want to use this in my code but i don't want just copy paste. Also i want to understand what's the idea on this solution.
Could you explain me how your code(background-position) works.
Thanks.
2@ApplePieGiraffePosted about 4 years ago@mesutcifci
Thanks, mesutcifci!
I used
vwandvhunits and combined them with percentages for thebackground-position property. The reason I did this is that if you set thebackground-positionproperty in justvwandvhunits, the SVG backgrounds won't move around when the page is resized, but if you use just percentages, they move around too much (at least, I think so). I combined them usingcalcso that the SVGs would mostly stay in their place but move around just a little bit when the page is resized. 😊However, that really isn't necessary. Simply using
vworvhunits to position the background SVGs is totally fine and works great. You can also use good 'olrems orpxvalues instead. 😉Here's a nice article from MDN on backgrounds and borders in CSS, and this article (also from MDN) goes into more depth on the
background-positionproperty. They might help you!Keep coding (and happy coding, too)! 😁
6 - @somaye-beiranvandPosted about 2 years ago
Hi APG
The way you managed the position of background bubbles is amazing. congratulation
1@ApplePieGiraffePosted about 2 years ago@somaye-beiranvand
Thank you very much! 😊
0 - @thomashertogPosted over 3 years ago
Hell yeah, wasn't sure it could be done with background (and background-position) and really wanted to spend lots of time to get those values right. Matt pointed me into this one, and I must say, this is effing impressive! haven't looked at everything code-related, but the background-solution is really nice!
1 - @brasspetalsPosted about 4 years ago
APG back at it again - that 3D hover effect is trippy! I can always count on you to add a fun addition to your solution! 😄
Cool effects aside, it looks essentially pixel-perfect to me, and you have nailed those pesky background images it seems most people (I haven't done this one yet) have struggled with. 🙌
4 - @mattstuddertPosted about 4 years ago
Love this, APG! 😍
Awesome to see you going above and beyond in these challenges and experimenting with additional effects.
You’re doing an amazing job!
2 - @artimysPosted about 4 years ago
Hands down APG, It's great that you took the time to properly calc the size of those bg images without media queries. The effects are always the cherry on top.
Awesome work 👍
2@ApplePieGiraffePosted about 4 years ago@artimys
Thanks, artimys! I guess all that messing around with
calcwas worth it! 😅0 - @ironheart93Posted over 3 years ago
This looks really good. I am currently doing this challenge and could not really figure out the CSS background images unfortunately and (I did not want to use a div).
1@ApplePieGiraffePosted over 3 years ago@ironheart93
Hey, alexandria! 👋 The background images in this challenge can be a little tricky, I know! Consider adding and positioning the background images with CSS background images. It's what I did in my solution and it seemed to work out pretty well. 👍
0 - @AgataLiberskaPosted over 3 years ago
Hi @ApplePieGiraffe, how did you come up with the values to position the circles? Was it trial and error or is there a secret behind it? :D
1@ApplePieGiraffePosted over 3 years ago@AgataLiberska
Hey, Agata! 👋 It took a bunch of trial-and-error for me to find the values that I ended up settling with for the circle shapes in the background. At first, I was pretty sure positioning the background images would be easy, but I ended up spending well over an hour just fidgeting with the values for the position. 😅 Eventually, I found something I liked, and I went with it. 😀
3@AgataLiberskaPosted over 3 years ago@ApplePieGiraffe thanks, it's really helpful to know the process behind it. Those circles are my nightmare, this design looks so simple and then it's like hitting a brick wall :D
2@ApplePieGiraffePosted over 3 years ago@AgataLiberska
Haha, I know right? 😉 Best of luck with this challenge! 👍
1 - @laarnibPosted almost 4 years ago
Wow! I love the effect that you added on the card! 🙌 And nice work on the background bubbles. Still couldn't make mine to stay where they're supposed to 😃
1 - @janegcaPosted almost 4 years ago
Thanks APG, for fixing those pesky background bubbles in their positions, been scratching my head trying to figure it out for a few days now. Nice work :)
1 - @tedikoPosted about 4 years ago
Hello, ApplePieGiraffe! 👋
I'm not gonna lie, can't wait to steal this 3D effect idea and put it in one of my project! Amazing work!
Happy coding! 😄
1@ApplePieGiraffePosted about 4 years ago@tediko
Thanks tediko! Happy coding to you, too!
0
Please log in to post a comment
Log in with GitHub
Join 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