Grow your CSS skills. Land your dream job.

Cool CSS Effects.

  • # September 12, 2012 at 5:58 am

    Creating logos and graphics just isn’t one of my strong points so I rely heavily on typography. This morning I came across the following link posted in a tweet by CSS-Tricks; http://bradfrost.github.com/this-is-responsive/index.html?utm_source=dlvr.it&utm_medium=twitter. Creating similar effects to this will certainly help liven up my sites. I wondered if anyone can share any other cool CSS tricks or could point me in the direction of any tutorials.

    :)

    # September 12, 2012 at 6:07 am

    I don’t really know what you are looking for, but I’m holding a suite of (I say useful) webdesign and webdev links, including a bunch of CSS tricks : http://wildwebwatch.com/.

    Links are classified in tags (Tutorials, Demos, Code, Tools, Libraries, etc.) and categories (HTML, CSS2, CSS3, JS, PHP, Design, Responsive, etc.) to ease the search.

    Maybe you will find what you need.

    You might also want to check CodePen (http://codepen.io) and dig into the code to learn how to do some tricky things. :)

    # September 12, 2012 at 6:43 am

    Thanks Hugo, nice suite of links. I’m looking at creating something very similar to the animation in the posted link. Maybe using different shapes and colors though?

    # September 12, 2012 at 6:58 am

    I would say that such animations are really hard on battery life for mobile devices.

    # September 12, 2012 at 7:26 am

    Such animation is pretty easy to do. You create N elements of various size. Then you change the scale (X, Y or both) of each element according to your needs in a CSS animation looping infinitely.

    # September 12, 2012 at 8:40 am

    yes its easy for a web designer, so they use it, but developer never used it, because they can produce better effects by coding.

    # September 12, 2012 at 2:14 pm

    What they are doing in the example is use css transitions.

    Basically you just specify the transition css property (with vendor prefix) along with which other css property you want to animate and some settings like easing and speed.

    This seems like a pretty good tutorial: http://www.the-art-of-web.com/css/css-animation/

    I started to use this frequently even tho older browser will ignore it that’s fine with me. I think its much better than coding the animations as the animation will be part of the style not the code and is probably more optimized and easier to do with less overall code.

    # September 12, 2012 at 8:51 pm

    Thanks for the responses.

    :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".