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.
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. :)
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?
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.
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.
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.
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.
:)
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. :)
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?
I would say that such animations are really hard on battery life for mobile devices.
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.
yes its easy for a web designer, so they use it, but developer never used it, because they can produce better effects by coding.
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.
Thanks for the responses.
:)