Experimentation with CSS3

I’ve been experimenting on different ways to make e-cards using CSS3. I found a way to make a 3D cube that can be moved by using the arrow keys on the keyboard. Here are some screenshots of what I’ve created… a birthday “greeting card” using my monster illustrations.
http://erin-good.com/ErinGood_Ecard/monsters_ecard.html

The cube is created by using “faces” as div’s. The script uses 3D transforms with yAngles and xAngles. By changing the degree of the angle, the shape changes. In the CSS, the cube is transformed with rotateY (to get it to the right side of the cube where it belongs) and translateZ. I couldn’t really figure out how to manipulate the speed, must be set somewhere in the Javascript that I don’t understand

For the second card I created, I changed the letters using and manipulating the script Lettering.js. The letters each had a container and a span with different properties. I was able to set how the letters are in their regular state, and then transition, and transform states using skew properties, shadow properties, and color/font style properties. The speech bubble is an additional “CSS3 Trick” created with border properties to make the large curve of the bubble, the smaller curve of the bubble, the shape at the bottom where the two sides meet, and the white inside part of the bubble. There are standard properties like position, margin, color, etc. but there are more complex properties like z-index, position, and radius properties.

http://www.erin-good.com/TypographyEffects/index.html

For the third card, I also used the script Lettering.js to create change in text. I could change the letters uses the same concept, but instead of manipulating the container properties, I created a mask for over the letters that creates a rollover type effect. There are also animation properties that go along with this effect, putting a delay on the animation changes the speed when the letters come in at the beginning and the rate at which they change when rolled over.

http://www.erin-good.com/TypographyEffects/index3.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s