background preloader


Facebook Twitter

CSS3 Transforms & @font-face Experiment. Wednesday, March 31st, 2010 This is the first of what I hope are num­ber of exper­i­ments I plan on work­ing on over the next few months, all in an effort to get acquain­ted with some of the new CSS3 fea­tures out in the wild that seem to be gain­ing some traction.

CSS3 Transforms & @font-face Experiment

The last few months have been pretty excit­ing, with all the talk about new CSS3 fea­tures and how browsers are adding sup­port for them, it’s a great time to be a designer for the web. It’s a lot easier these days to exper­i­ment with dif­fer­ent typefaces, lay­outs and tech­niques pre­vi­ously not available. Take a look at the image below: No, it’s not a poster. How’s it done? Pretty easy actu­ally, I used basic CSS pos­i­tion­ing and some of the newer CSS3 fea­tures to put it together. @font-face Trans­forms -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); Text-Shadows & Box Shadows text-shadow: 2px 8px #b5c1b8, -1px -1px #fff; box-shadow: 4px 6px #b5c1b8; Works in these browsers Indeed. CSS3 Background-Clip Text & @font-face. HTML5 Live Conference. CSS3 Image Styles. When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly.

CSS3 Image Styles

However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I'm going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.

View Demo Image Styles Problem (see demo) Take a look at the demo and note that there is border-radius and inset box-shadow applied in the first row of images. Workaround. 20 Things I Learned About Browsers and the Web. IllustrationChristoph Niemann Writers/EditorsMin Li Chan, Fritz Holznagel, Michael Krantz Project CuratorMin Li Chan & The Google Chrome Team DesignFiPaul Truong DevelopmentFi Very Special Thanks To.

20 Things I Learned About Browsers and the Web

HTML5, browsers, and books, twenty years later. Update: Thanks for all the interest and feedback on 20 Things I Learned about Browsers and the Web!

HTML5, browsers, and books, twenty years later

We hope to open-source the code in the coming months and will post an update when we do. Stay tuned. Twenty years ago this month, Tim Berners-Lee published his proposal for the World Wide Web. Since then, web browsers and web programming languages have come a long way. A few of us on the Chrome team decided to write an online guide for everyday users who are curious about the basics of how browsers and the web work, and how their evolution has changed the way we work and play online. In building an online book app, HTML5, JavaScript and CSS3 gave us the ability to bring to life features that hearken back to what we love about books with the best aspects of the open web: the app works everywhere, and on any device with a modern browser.

This illustrated guidebook is best experienced in Chrome or any up-to-date, HTML5-compliant modern browser. By Min Li Chan, Google Chrome Team. Stunning CSS3: A Project-based Guide to the Latest in CSS. Get a peek into the book's content with these free excerpts.

Stunning CSS3: A Project-based Guide to the Latest in CSS

You can also see a brief table of contents, images of some of the book's pages, and links to related resources. Sample of Chapter 1: The CSS3 Lowdown [external article] Read the case study of a real web page that was made more efficient by using CSS3 instead of its existing, older styling methods in this short excerpt from Chapter 1. Sample of Chapter 2: Speech Bubbles [PDF] Learn how to create the appearance of speech bubbles without using any images.

Sample of Chapter 6: Different Screen Size, Different Design [PDF] HTML5 Techniques - Ultimate Collection of Tutorials. As my experience we always close to the latest technologies as we have one step ahead on web development techniques as HTML5.

HTML5 Techniques - Ultimate Collection of Tutorials

HTML 5 is the advanced version of HTML. HTML 5 is giving new techniques and advanced features/structure in designing. These new features and tags makes designing very easy to create a web page. CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. When saying about HTML5, developers mean the new semantic structural tags, API specs like canvas or offline storage, new inline semantic tags, etc. In an front-end development effort to encourage our respected visitors and readers to do the same and to prepare you for the future, we’ve rounded up “HTML5 Techniques – Ultimate Collection of Tutorials“.