Ripples Day 35



After the last couple of days, I wanted to take a chill day. I saw a couple of people do really awesome stuff with CSS [some time codepen can be a motivational killer, but it’s still the coolest!] I wanted to do a pure CSS project. There was a nice tutorial I followed on codeplayer. Where we make a coffee mug with ripples. so let’s get started.

first, we start with the base

Then we start styling the mug. Here’s the process [by images]




Then we start positioning the ripple

whew. Okay and now for the final touch of adding the animation

I then tried to do my own [which wasn’t that good at all] ripple effect as in a water pond ripple. So I opted to use these color pallets

Well it’s the same approach but with experimentation with box shadows so what you will see is the process of me trying [and obviously failing] at making a ripple

and then the animation

I know this was a bit simple but it made me learn how to manipulate box shadows so all is good. You can check the coffee mug here, and the water pond ripple here.

So I think I improved a bit so I thought why not try to improve my homepage a bit. So with user interaction in mind, I decided to make the links a bit more interactive. I started with the menu links. This is what it looks like now

So now I want to have a bit of interaction on hover so instead of it jumping to an underline style, I’ll have it appear from the middle and expand. With a bit of CSS, it looks much better. This is how it turned to now

now step two are the links to the projects. for now, they’re [just like the menu] blah. Have a look for yourself

Now again with CSS. Here I used the data attribute in html5 [here’s a link if you’re interested] and making use of the:: before and:: after pseudo content [again a link if you fancy, and another] we now have an awesome effect [pretty proud of myself]


now we move on to the about page. There are two links that I would like to style as you can see just as with the previous two here’s how it looks like

the same approach with default links but with a different transition we have

Well, you look at that. I love it! You can check it out for yourself here.  I’ll keep adjusting, and add stuff to the site as I go along. But for now, it looks nice. [or so I think] What are your thoughts guys? What was your favorite project thus far? I guess that is it for today, till then happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *