Take one.

The sample speaks by itself, for a first-take.
I havent made it cross-browser yet, which could be just a single image, scaled up and down, but it works fine this way, no images, no javascript.

I started with webkit animation, but it could be made with javascript.
The corner diagonal fill could be replaced with a box rotated with jQuery… but I’d rather use no javascript and make it mobile-compatible (webkit).

I haven’t seen anything like this on the web so I’m sharing it with you looking forward for your comments.

I’ll post an update with cross browser compatibility.

Oh… and valid markup. I know there’s a lot of extra markup here, but as soon as webkit animations work on pseudo-elements (created by css), I’ll reduce the amount of code too.

Click Here



Watch live video from socialblogsite on Justin.tv

Aunque llegué tarde, había muy buena onda en el Centro Cultural Recoleta, y Anaclara Dalla Valle presentó sus proyectos, todos para el bien de nosotros, beneficiarios del social media.

En vivo en http://justin.tv/socalblogsite

Con esos videos ya solucioné el tener que contarte todo lo que vi, sin ser novedad, y sólo contarte…

(more…)

Web 2.0 style is taking over the new standards for web development, and complex buttons are difficult to create. When the button has reflections, refraction, shadows, glow, lighting… composing new shapes and rollover states is very time comsuming.

How to streamline the process

The big “how” here is “downloading the native files linked below”.

Fortunately Adobe Illustartor can handle multiple fills and outlines with their mutiple effects for each on them, all for the same path. So you’ve just got to move one node, one path, to change all the fills, all the effects, at the same time.

That, combined with multiple path effects (exclusion, subtraction, etc.) that allow new effects applied on top and so on… makes possible the Siamese button.

Here’s a video that shows you how easy is to change the button’s shape, with one single stroke (I used nudges at first, so you can see it with antialiased rendering. Ai doesn’t refresh the preview while dragging a curve, until it’s released)

(more…)

There are many CSS techniques to get specific features on a submit button, but here is one that uses a single image, and no extra markup (like b or i tags) for a transparent (no opaque patches) elastic css button. I named this version:

Levitating Submit Button

Tutorial Levitating Submit Button Diagram by Sergio Zambrano

(more…)

Ready to own a Social Blogsite?

Learn More