- This topic is empty.
September 12, 2012 at 5:58 am #39793
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 #109858Kitty GiraudelParticipant
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 #109868
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 #109870Paulie_DMember
I would say that such animations are really hard on battery life for mobile devices.September 12, 2012 at 7:26 am #109871Kitty GiraudelParticipant
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 #109876marketMember
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 #109911tmcconechyMember
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 #109936
Thanks for the responses.
- The forum ‘CSS’ is closed to new topics and replies.