background preloader


Facebook Twitter

10 Amazing Examples of Innovative CSS3 Animation. CSS3 has brought about a number of aesthetically impressive new features.

10 Amazing Examples of Innovative CSS3 Animation

Perhaps the most fun of these to play with is CSS animation, which allows you to perform many motion-based functions normally delegated to JavaScript. Join me on my epic quest to discover the coolest, most innovative, and more importantly, nerdiest use of CSS animation on the web. Begin! Warning: These animations are pretty browser specific, so if you’re surfing in IE6, it’s time to stop watching Saved By The Bell, ditch the dial-up connection and download a modern browser.

Rotating Polaroids This tutorial shows you how to create an amazing, animated pile of photographs utilizing a ton of new CSS3 commands. Click to View Demo The Matrix Follow the white rabbit.. err I mean, check out this awesome Matrix animation. Click to View Demo. 50 Brilliant CSS3/JavaScript Coding Techniques - Smashing Magazi.

Advertisement CSS3 is coming.

50 Brilliant CSS3/JavaScript Coding Techniques - Smashing Magazi

Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features. 45 Powerful CSS/JavaScript-Techniques - Smashing Magazine. Advertisement CSS and JavaScript are extremely powerful tools for designers and developers.

45 Powerful CSS/JavaScript-Techniques - Smashing Magazine

However, sometimes it’s difficult to come up with the one excellent idea that would solve a problem that you are facing right now. Good news: almost every day designers and developers come up with fresh and clever CSS tricks and techniques and share them with other developers online. We regularly collect all these tricks, filter them, sort them, revise them and prepare them for Smashing Magazine readers. In this post we present 45 useful CSS/JavaScript-techniques that may help you find clever solutions to some of your problems or just get inspired by what is possible with CSS. Please notice that this is the first part of our large round-up of fresh CSS/JavaScript-techniques. Interesting CSS Techniques Building the New Visual AnnotationsThese note overlays are composed of two main elements, an overlay with the shine and a border with the transparency. CSS3 animations and their jQuery equivalents. As you might know already, I'm not a big fan of animations that are added in CSS3.

CSS3 animations and their jQuery equivalents

Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too. At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents. This tutorial/these examples will show the use of the same HTML, with different classes for CSS3 and jQuery. Anti Tables » Custom Web Fonts in CSS3. Ce que nous réserve CSS3 en 2010 - Alsacréations. L'écriture des spécifications CSS progresse à grands pas, et la version 3 comporte déjà plusieurs modules implémentés dans les navigateurs récents.

Ce que nous réserve CSS3 en 2010 - Alsacréations

Make Your Mockup in Markup. We aren’t designing copies of web pages, we’re designing web pages.

Make Your Mockup in Markup

Andy Clarke, via Quotes on Design The old way I used to think the best place to design a website was in an image editor. I’d create a pixel-perfect PSD filled with generic content, send it off to the client, go through several rounds of revisions, and eventually create the markup. Does this process sound familiar? That process is whack, yo! Recently, thanks in large part to the influence of design hero Dan Cederholm, I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser. Die Photoshop, die Some of you may be wondering, “what’s so bad about using Photoshop for the bulk of my design?” The application Adobe Photoshop CS4 has unexpectedly ruined your day. Photoshop’s propensity to crash at crucial moments is a running joke in the industry, as is its barely usable interface. Text rendered in Photoshop (left) versus Safari (right). Nice Web Type – How to use CSS @font-face. Code up top for quick reference, details down below—we’ll prepare typefaces for use on the web, go through @font-face CSS line-by-line, and get the experts’ take on browser support.

Nice Web Type – How to use CSS @font-face

Updated May 2010 with new syntax from Paul Irish. The CSS: The HTML: <h2>This headline is typeset in <em>your typeface</em>. Nice And Simple Toolbar For Your Website With CSS3 And jQuery. During these months I’ve learned an important lesson as blogger.

Nice And Simple Toolbar For Your Website With CSS3 And jQuery

If you want to start an activity on the web with a blog, magazine or a general website, you must plan a clever action on the Social Networking and Bookmarking websites. Often it’s an hard thing to interface a website with the many available social services, but recently there are some famous blogs, like Abduzeedo and Mashable, that are using a fixed toolbar on the bottom of the page with useful button for the sharing. CSS3 : la transparence de couleur avec RGBa - Alsacréations. Le module de couleurs de CSS3 introduit la notion de transparence dans les valeurs associées à une couleur, l'écriture RGBa.

CSS3 : la transparence de couleur avec RGBa - Alsacréations

Cette composante de la couleur permet de jouer sur les effets d'opacité entre les différentes couches d'éléments HTML. Contrairement à ce que l'on peut croire, le principe de la transparence RGBa est radicalement différent de la propriété opacity (également CSS3 mais assez ancienne déjà) : cette dernière est une propriété qui s'applique à l'élément dans son intégralité (ainsi qu'à tous ses descendants) tandis que RGBa est une valeur qui s'applique à une propriété de l'élément sélectionné uniquement. De ce fait, RGBa est susceptible de s'appliquer à toutes les propriétés dont la valeur peut être une couleur : background-color, color, border-color, box-shadow, text-shadow, etc. Les ombrages en CSS3 - Alsacréations.

Blog HTML5 – Également sur CSS3, le design Web et les standards. Our Solar System — An experiment with CSS3 border-radius, transf.