Explore Posterous

SPECIAL BONUS: 画像を回転

画像を回転させます。

対応ブラウザ

Safari4, Fx3.5, Chrome1

view plaincopy to clipboardprint?
-webkit-transform: rotate(-15deg);  
-moz-transform: rotate(-15deg);  

Deliciousへのリンクテスト。

The simpler and quick solution I know to draw rounded corners in every browser is to use a mix of CSS3 and JavaScript. CurvyCorners is a free JavaScript library for creating gorgeous rounded corners for HTML elements. The final result looks like this:

The big advantage of this script is that lets render rounded borders in Safari, Chrome and Mozilla (which support rounded borders via -webkit-border-radius and -moz-border-radius) natively with CSS3 property and in IE and Opera with JavaScript.

When Tim and I were discussing the redesign of this site last year, one of the clear goals was to have a graphical style without making the pages heavy with a lot of images. When we launched, a lot of people were surprised that the design wasn’t built with PNGs. Instead we’d used RGBA colour values, which is part of the CSS3 specification.

Cool article about using transparency with RGBA - a must read!

Quite a nice screencast by Techmic.com that discusses HTML5, Microformats and CSS3. This 15 min video is ideal for a coffee break. You need QuickTime to watch it. Go to http://www.techmic.com/screencasts/html5-microformats-css3-1/ and click on the blue button on the left side of the screen.

Top web browser (such as Firefox 3.5 and Safari 4) have introduce some cool features you can already use. Now, with just a few lines of css you can do things you used to do with images and javascript.

Cool article by Smashing Magazine about CSS3 and HTML 5 layouts and how they will change things for Web Design in the future.