CSS3 is the latest standard and it is backwards compatible with earlier versions. In this article, you’ll be presented with ten foundational things you should know when working with CSS3.
1. First, Plan Your Entire Project on Paper
Planning your entire project first will demonstrate problems in your workflow that will be easier to overcome. If you begin coding without detailing the steps, it could create a major problem that could be difficult to resolve later. Once you’ve created the design on paper, you’ve essentially created your document. All you need to do is code it.
2. CSS Is Composed of Modules
CSS is made of modules. The most important ones are Selectors, the Box Model, Backgrounds and Borders, Image Values and Replaced Content, Web Fonts, 2D/3D Transformations, Animations, Multiple Column Layout, and the User Interface. Of these, the Box Model and Multiple Column Layout are foundational because they determine how your Web pages appear.
3. Make Use of an HTML/CSS Editor
You can code your CSS3 files from scratch using Notepad or another text editor, but your life would be much simpler if you made use of a program such as Adobe Dreamweaver. Dreamweaver gives you access to starter templates (see Figure 1).
Figure 1: The Dreamweaver starter templates
In this version of the program, you have starter templates, including Bootstrap. Bootstrap has many default CSS styles and setting built in. This will reduce your development time. It will also encourage good programming habits.
4. Use Commenting
Commenting is the practice of providing detailed notes in your CSS file. If you’re working on a project where others will come after you, commenting provides valuable information on your process and will make it easier for the new coder to understand.
5. Backgrounds and Borders
The CSS background properties define the backgrounds for elements. This sets the stage for the overall look of your Web pages. You can use colors, gradients (both linear and radial), images, or a combination of the these. Care must be taken when using text to make sure there is high contrast between the text and the backgrounds. If not, the text will be hard to read. Font type also makes a difference. A Thin font might be hard to read whereas a thicker font could be easier on the eyes.
With borders, there are so many options. With the border-style property, a few of your options are dotted: dashed, solid, double, and so forth. In CSS3, with the border-image property, you use an image as the border around an element. Borders give you tremendous design flexibility.
6. Control over Images
Prior to CSS3, working with images was limited. With CSS3, you now can create a wide variety of effects, such as rounded images, responsive images that scale with the browser, control transparency, create thumbnails, lay text over images. You also can control blur, saturation, and more.
7. Web Fonts
Prior to CSS3, the fonts you could use were limited. That all changed with the @font-face rule. This allows you to use Web fonts that aren’t installed on your computer. You can upload the fonts to your server and these automatically will be downloaded to the user’s browser. This allows you to create elaborate designs with a wide variety of fonts. Although there is a wide variety of fonts, check to make sure your browser supports the type you want to use.
8. 2D/3D Transformations
CSS3 gives you control over 2D and 3D transformations. This allows you to translate, rotate, and skew elements. You also can change the shape, size, and position and activate these effects when you move your cursor over any given element. You can create effects, such as buttons that rotate around the x, y, and z axes, which can create attractive 3D effects. Some 2D options are translate(), rotate(), scale(), and so on. In 3D, some options are rotateX(), rotateY(), and rotateZ(). Beyond that, you can control perspective, transform-origin, transform-style, and more.
With CSS3, you can animate elements where they gradually change from one style to another. You can change as many properties as you want and you would do so by making used of the @keyframes rule. Even though you can create animations working with CSS3 code directly, that is a cumbersome approach. A better way is to make use of any one of various programs designed for that purpose. Doing so will save you a lot of time and allow you to produce professional quality animations for your layouts. Some of these tools are free; others are commercial.
Testing is the last step in the coding process. It’s important to test the code to see if there are any issues. If there are, testing will bring that out.
An article of this type can only give you a taste of what can be done. CSS3 is immensely powerful and gives you incredible control over your Web page designs. Once you try it out, you’ll be hooked.