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%;
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.
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.