There is an ever-growing library of properties and selectors added to the CSS specification maintained and released by W3C ( www.w3c.org ). The current standard is CSS3, yet as you can imagine, CSS4 is already in the works.
Each of these CSS properties and selectors is supported to varying degrees by different browsers such as Internet Explorer, Firefox (Mozilla), Chrome Safari, and Opera. This means, that while you may implement a cool whiz-bang combination of CSS effects like the ones we’ll cover in this post, your web page may not display as intended all the time. This web page shows an up-to-date list of compatibility: http://www.w3schools.com/cssref/css3_browsersupport.asp
So what are the new features of CSS3?
The exciting additions are:
• Border effects – Assign rounded corners, drop shadows, and images at patterns
• Gradient fills – Fill objects with a gradient instead of solid colors
• Opacity control – Adjust the transparency of images
• Text effects – Add drop shadows, inner shadows, bevel and emboss effects
• Font control – Use custom fonts outside of those available on the computer
• 2D and 3D Transformations – Scale, skew, and rotate elements
• Animations – Apply CSS effects in a controlled series
• Advanced selectors – Target elements contextually as well as directly
Cool New Graphics Properties
The newly introduced border effects, gradient fills, and opacity controls allow designers to create visual effects and bitmap-looking graphics like you might expect to see from Photoshop, all with the power of simple code—that’s easy to change and update. Here’s a look at some of these properties and sample values, and how you deploy them in a web page.
Border radius
It is now possible to specify rounded corners for your box elements. You cannot, however, just use the “border-radius” property alone. You must first define a solid border property and assign a width to make a border visible:
div {Once that’s established, you can add the rounded corner effect. Here a color is also assigned. Below shows the visual result:
border-style: solid;
border-width: 14px;
}
div {
border-style: solid;
border-width: 14px;
border-radius: 18px;
color: #e2972c;
}
Note that it is also possible to make just one or more of your corners rounded, leaving the rest of them square. Variations are bottom-right, bottom-left, top-right, and top-left. In this example, “ems” are used instead of pixels to determine the amount of rounding:
div {
border-style: solid;
border-width: 14px;
border-bottom-right-radius: 2em;
color: #e2972c;
}
As you learned in this post, the CSS styles you define can either live in an external document named with the .css extension, or can live within the web page up in the <head> section by opening and closing a <style> tag like this:
<head>To deploy the effect in your web page, you write HTML code in the <body> section. Note that at this point, every div element you add to the web page will assume the same styling. To differentiate styling from div to div, you’ll need to use different selectors, as covered in this post and discussed later in this next post.
<style type=”text/css”>
div {
border-style: solid;
border-width: 14px;
border-bottom-right-radius: 2em;
color: #e2972c;
}
</style>
</head>
<body>Border image
<div>
<p>
<span class=”headline”>Daily Special</span>
<br />
Split Pea Soup
</p>
</div>
</body>
Instead of assigning a solid color to your element, you can also assign a graphic as a repeating pattern. To do so, you use the border-image property. This one is a little more tricky because each browser has it’s own preference for interpreting the code, so you need to include all of them to cover your bases. Notice in the example below, the name of the browsers appear before the property:
Webkit (Safari), Moz (Mozilla Firefox), and O(Opera). As with the border-radius property, you first need to give the border visibility by setting a border-width property. Below shows the visual result. The code looks as follows:
div {
border-width: 14px;
-webkit-border-image: url(border1.png) repeat;
-moz-border-image: url(border1.png) repeat;
-o-border-image: url(border1.png) repeat;
border-image: url(border1.png) fill repeat;
}
Box shadow
Applying a soft drop shadow effect to an element is possible through the box-shadow property in CSS3.
The syntax is as follows:
box-shadow: 6px 6px 10px #888888;
The first 6px value represents the right-side offset. The second 6px value represents the bottom offset. The third 10px value represents the amount of blurring, and the final hex value represents the color of the drop shadow. Below shows how this code looks.
To make the drop shadow appear on the left side instead as shown in below, simply input a negative value for the first number as follows:
box-shadow: -15px 6px 10px #888888;
Gradient Fills
CSS now offers designers the ability to fill objects with a gradient instead of a solid color using the background-image property. You can even specify the angle of the gradation, and use several colors that you transition between. Like the border pattern fill property, however, you will need to accommodate different browsers by including all the browser-specific CSS syntax for Firefox, Opera, and Safari as shown in below.
For a simple gradient between a set of colors, you simply list the colors in the parenthesis separated by a comma. This will create an equidistant transition between each color, starting at the top of the object.
background-image: -moz-linear-gradient(#5f72e8, #172576);To affect the starting location, specify either “top,” “bottom” or “left” at the beginning of the parenthesis. To change the angle, enter a value such as “-45deg”.
background-image: -moz-linear-gradient(-45deg #5f72e8, #172576);Unless you specify where the colors actually change, they will automatically transition equally. To control the point of change, enter a percentage after each color. The percentage pertains to where inside the gradient the color starts. The whole gradient is 100%, going left to right. Therefore, if the first color starts at 0%, it starts at the very beginning. If it starts at 10%, then the first 10% of the gradient will be solid before starting to transition to another color. See below for a visual representation of this gradient code.
Background-image: -moz-linear-gradient(-45deg, #1e5799 10%, #2989d8 50%, #207cca 50%, #7db9e8 100%);
Opacity Control
A handy feature in CSS3 is the ability to assign transparency values to images. This can be useful, for example, in your user interface design when you want an element to go from grayed out (semi transparent) to fully visible upon rollover. To accomplish this, CSS assigns a value from 1.0 (being fully visible) to 0.0 (being completely invisible). Values in between determine the degree of transparency such as .6 equating to 60% opacity. You can either assign an entire object to be semi-transparent, or just the color fill.
In the example code for below, the whole overlay box (.transparentbox), including the border and the internal text, displays at 60% transparency. Notice how you need to include a special line just for Internet Explorer 8.
.transparentbox {
width: 400px;
height: 120px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border: 8px solid #3e3e3e;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
To only change the opacity of the background color, the code for .transparentbox would look as follows, as
shown in below. As you can see, the background property is set to “rgba” followed by RGB color values and 0.5 to set a 50% opacity display.
.transparentbox {
width: 400px;
height: 120px;
margin-left: auto;
margin-right: auto;
border: 8px solid #3e3e3e;
background: rgba(255,255,255,0.5);
}
Next - CSS 3 - Part 2
No comments:
Post a Comment