Website Tips – Favorite CSS3 Properties Border-Radius, Transparency & Text Shadow

posted in: Websites | 0

Creating websites that are not only flexible but beautiful can be tricky just using CSS. CSS3 properties opens up a whole new range of options that make your site more flexible and beautiful. Here are my favorite CSS3 Properties as of this writing.

Border-Radius

Back in the day I remember using the photoshop slicing tool to create this effect. It was very tedious! I would have to make the graphic and then slice out the corners separately. A lot of work! Now with CSS3 we do this in code without the headache. Here how we use Border-Radius:

In my example I want to have my border to be curved on the top right and bottom left.

border-radius: 0px 30px 0px 30px;


Marketing

Tim Millaway thrives on creative solutions that tackle strong marketing strategies and exceed goals. Celebrated for excellence in creative categories of advertising, design and online platforms. Tim can build campaign that yield relationships with your audience.

Branding

Here professional talent leads brands into the next era of communications. With full-service from corporate identity creation to state-of-the-moment online campaigns, clients become better equipped for the future. But don’t take my word for it, check out my portfolio.


In this example you can see how using adding a simple border-radius code in your css styles can make a box more stylish. But we can hardly see the head tags, this leads to another favorite CSS3 property…Transparency


Transparency

The transparency property is a little tricky. The CSS code is in the background-color property. Instead of using a hex value for the background property you use the “rgba” (red, green, blue, alpha)value instead. alpha being the transparency value. So instead of using:

background-color: black or #000 (hex value for black); we would use:

background-color: rgba(0,0,0,.5);

Now look at our example when we put .5 or 50% transparency to our background-color:


Marketing

Tim Millaway thrives on creative solutions that tackle strong marketing strategies and exceed goals. Celebrated for excellence in creative categories of advertising, design and online platforms. Tim can build campaign that yield relationships with your audience.

Branding

Here professional talent leads brands into the next era of communications. With full-service from corporate identity creation to state-of-the-moment online campaigns, clients become better equipped for the future. But don’t take my word for it, check out my portfolio.


Text Shadow

Let’s add a little more style to our box. I used to think adding drop shadow to text was only reserved to Photoshop. Now CSS3 allows to add style and readability to our text by adding text-shadow.

In this example I added text-shadow to the h1 tag:

text-shadow: 5px 5px 5px rgba(51,51,51,1);
The first number is the horizontal shadow, second number is the vertical shadow, third number is the amount of blur, and the last property is the color with the alpha.


Tim Millaway

Marketing

Tim Millaway thrives on creative solutions that tackle strong marketing strategies and exceed goals. Celebrated for excellence in creative categories of advertising, design and online platforms. Tim can build campaign that yield relationships with your audience.

Branding

Here professional talent leads brands into the next era of communications. With full-service from corporate identity creation to state-of-the-moment online campaigns, clients become better equipped for the future. But don’t take my word for it, check out my portfolio.


Leave a Reply

Your email address will not be published. Required fields are marked *