It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs…
Articles in the ‘Tutorials’ Category
-
Take Your Design To The Next Level With CSS3
Posted: 3 years ago in Tutorials
Read More: Take Your Design To The Next Level With CSS3
-
The 6 Most Important CSS Techniques You Need To Know
Posted: 3 years ago in Tutorials
Trevor Davis has compiled a quick tutorial, with examples, of the 6 most important CSS techniques that you need to know:
- Get a Consistent Base Font Size
- Get Consistent Margins
- Set a Float to Clear a Float
- Image Replacement
- Faux Columns
- CSS Sprites
Read More: The 6 Most Important CSS Techniques You Need To Know
-
Working with HSL in CSS
Posted: 3 years ago in Tutorials
RGB can be a real pain to work with. It’s hardware-oriented, non-intuitive difficult to use without an external reference. Coding colors by hand shouldn’t be that hard. Fortunately, CSS3 offers support for the HSL color space that is much easier to work with as a human…
Read More: Working with HSL in CSS
-
Two simple ways to create text embossing effect
Posted: 3 years ago in Tutorials
Embossing is very popular trend in web design (the actual term for this effect is “inset”, although many people call it embossing). It is very simple to create. This short tutorial will show you how to create this effect using pure CSS…
-
How to Create a CSS Menu Using Image Sprites
Posted: 3 years ago in Tutorials
Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique…
Read More: How to Create a CSS Menu Using Image Sprites
-
Beautiful fonts with @font-face
Posted: 3 years ago in Tutorials
While Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, and multiple weights along with support for rendering complex scripts, authors are still limited to using commonly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today. Safari has supported this type of font linking since version 3.1, and Opera has announced that they plan to support it in Opera 10…
Read More: Beautiful fonts with @font-face
-
CSS Transparency Settings for All Browsers
Posted: 3 years ago in Tutorials
Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need 4 separate CSS statements. Fortunately they don’t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free…
Read More: CSS Transparency Settings for All Browsers
-
Styling buttons to look like links
Posted: 3 years ago in Tutorials
It actually isn’t hard to make a submit button look like a link using CSS so you should never find yourself in a position where you have to sacrifice forms for links purely for the sake of the design…
Read More: Styling buttons to look like links
-
Adaptive CSS-Layouts: New Era In Fluid Layouts?
Posted: 3 years ago in Tutorials
Fluid web designs have many benefits, but only if implemented correctly. With proper technique, a design can be seen correctly on large screens, small screens and even tiny PDA screens. With bad coding structure, however, a fluid layout can be disastrous. Because of this, we need to find ways to work around most, if not all, of the cons of fluid design.
If you as a designer are going to go through all the extra work of creating a functional fluid layout, why not go a bit further and make it compatible with all resolutions, instead of just most? You can use a few techniques to create an incredibly versatile, adaptive layout that will stay perfectly functional with the constantly changing screen sizes…
-
How To Use Multiple CSS Backgrounds
Posted: 3 years ago in Tutorials
An article showing how you can use multiple divs and therefore multiple background images to create your web designs. Is that the right thing to do? From a web standardista’s point of view, probably not. But the technique is there if you ever need it…
Read More: How To Use Multiple CSS Backgrounds