This is the second part in a three-part series about CSS illustrations and animations. In this part, we will build a CSS Polaroid and then learn ho...
For further actions, you may consider blocking this person and/or reporting abuse
Hey Agathe, I really love this series, it's very informative. Thanks a lot.
I finished part 1 so before diving into this one, I tried my initial take on it first to check if I learned something from it, as you challenged as well.:) You can check it here if you have time: codepen.io/analizapandac/pen/KxbqOV.
I haven't read the full article yet so I don't know how you proceed with this but I'll check this out tomorrow and see.
Great job!! I love how you have a completely different take on this, yet the result is identical.
Glad you enjoyed the series :)
Thanks. I finished part 3 last night. It was an awesome read as well.
Hope to see more of your posts here.:)
Tried my hand at doing this myself before coming back to the article for assistance and I think I actually did alright! Still struggling a bit to understand how/when to use pseudo-elements but I had a lot of fun building this. Thanks Agathe!
Glad you had fun Tolu! I tend to use pseudo selectors whenever an element is made of several parts. If an element needs at least one child to recreate the different parts, then its a good candidate. The flash for example is made of two rectangles, so we can use the actual .flash div to create one rectangle, and use one of its pseudo selectors to create the second one. However, I wouldn't use a pseudo selector of .flash to create an unrelated element, say, the blinker. Just like you would have the .blinker element be a child of flash. This doesn't make a lot of sense.
But don't worry to much about pseudo selectors if you are not comfortable with them just yet. You can use plain html divs too!
Thank you for your great article!
I found an errata about CSS animation.
animation-iteration-count: infinite;
is right.Shorthand
animation: rotation 5s linear infinite;
works thoughGood catch, and thanks for reporting it. I'll edit the post.
Hey, Agathe! Thanks for such an in depth look at CSS art! This is so well written and detailed, it really does seem like the perfect place to start for so many people!
One thing I noticed though, on the first code example targeting .polaroid you set the height to 280px and then to 50%. Plus, translating and giving a top position of 50% doesn't seem to center the .polaroid container for me. It sits half way between the left side and the center. Any ideas or was this not the desired outcome?
Thanks Adam! Oops, that's an error from my part. It should read "left: 50%;", and not "height:50%". This will fix your issue. I've amended the post now, good catch :)
Hi Agathe,
Thanks for your tutorial. I finally played around with it some, and I wanted to fix one thing that was annoying me: The lens shadow turning with the lens. That makes me feel like the light source is moving every time there is a zoom. I just detached the shadow from the zoom element.
Here: codepen.io/aldorr/pen/BMPWEK
Thanks,
Allan
This is so cool! I have not thought much of CSS but thank you for sharing this. I think I will play around with some logos and animations this weekend.
Thanks! Looking forwards to seeing what you come up with :)
Hey Agathe, It's really awsome thanks a lot for this!
I worndering about html file in that you put
.polaroid
.button
.flash
.polaroid-body
.blinker
.zoom
.stripes
how it's will work? there we want to added some html code for that? or this is a class's names?
This is pretty cool! It'd be awesome to try and hook this up to the WebRTC to take a webcam selfie.
Hey Agathe, great walkthrough. One thing: In the blinker animation you are using a Sass variable you haven't declared
$red
.Thank you so much for this. I learned a lot. Excited to create something on my own.
Thank you for the helpful tutorial. I have applied it but using only one html div.
I hope you take a look codepen.io/norhanms/pen/BOJwop
May be it is not look perfectly done.
Nicely done! I haven't experimented with single div css images yet but it's on my list