Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Cool CSS Effects.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #39793
    BibCra
    Participant

    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.

    :)

    #109858
    Kitty Giraudel
    Participant

    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. :)

    #109868
    BibCra
    Participant

    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?

    #109870
    Paulie_D
    Member

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

    #109871
    Kitty Giraudel
    Participant

    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.

    #109876
    market
    Member

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

    #109911
    tmcconechy
    Member

    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.

    #109936
    BibCra
    Participant

    Thanks for the responses.

    :)

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.