My portfolio
and some web techniques I have used and collected.
Use any amount of text with any photo.
If you shrink the window width you'll see that when the image height is smaller than the text height, the two elements will remain vertically centered with each other.
This is a modified version of ...
The Holy Grail of CSS Centering
The HTML structure per row is consistent - image block followed by text block.
You can accomplish this alternating alignment of elements with floats, but in this case, floating elements removes their ability to be vertically centered - Boo!
Thus, I employed some ol' RTL trickery. I had to include one additional div to make this happen, but in the end, I think it is worth it … especially since it works in all modern browers.
I snagged the initial code from Mark Lee, then made it work for me.
NOTE: If you use the CSS image rotator you'll want to make sure that your photos (of the same group) use the same aspect ratios.
Mark's PenFirst off, both Kilian Martin and Brett Novak are incredible at what they do. Much respect.
Lifted from the Smashing Magazine article describing how to make iframes responsive.
Smashing Article
A subtle, but classy way to add that extra shine to your site is to use different transitions for hover on vs. hover off. The links in this demo have a transition duration of .1s for the hover on, but .5s for the hover off. You have to be careful with this as it can be an unexpected behavior that leads to the impression that something isn't working correctly, but I believe that misperception can only be fought with good design decisions and time.
Also, if you are unaware of Chris Coyier, you have either been living under a rock or you are not a web designer.
CSS-Tricks Article