CSS3 Rookie

image: negativespace.co

http://www.hongkiat.com/blog/beginners-guide-to-css3/

I consider myself a beginner at CSS3, but this website helped explain the basics of the cascading style sheet on background, opacity, size, etc.

To start, the website explains the use of the border-radius property. Which makes it easy to utilize rounder corners in the design elements, without the need for corner images or the use of multiple div tags. So, let’s say we want to define, in order, the horizontal and vertical radii of a quarter ellipse, which in turn determines the curvature of the corner of the outer border edge. The code would look like this,

border-top-left-radius: 10px 5px;
border-bottom-right-radius: 10% 5%;
border-top-right-radius: 10px;

Another way to make your website unique is to use the property for text shadows. This gives text an effect that can add depth and and dimension to content on the page. The text shadow CSS property is used to add shading to any text related HTML element. The syntax is made up of figures for the X-offset, the Y-offset, the blur amount and the color of the actual shadow.

For example:

text-shadow.png

So, if there were to be a neon effect for a header, it would look like this:

text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de

This can lift the element from the page and pop out to the viewer.

CSS allows for web designers to get creative and practice beautiful elements of web design. If used correctly, there can be a great amount of contrast, depth, light, colors, font, typeface, and texture involved. However, there are wrong ways to use CSS, which will be explained in my next blog post.

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