5 CSS3 Tips and Tricks That You Might Have Missed Out

Filed Under: HTML

Though, CSS3 isn’t a complex language but you’ll there are greater chances that you’ll stumble across certain new things that’ll probably leave you in a puzzled state. For instance, adding properties that you won’t have used, or adding details of the specifications that you aren’t aware of, and so on.

If you want to become a CSS3 styling expert, then below are a few tips that you should consider:

  1. Centering in CSS

    Many people find centering things in CSS pretty hard. In fact, people haven’t been able to crack the centering problem in web design. However, it’s not that hard and is rather a kind of doable thing.

    Generally, designers use absolute positioning to make the elements perfectly centered. But, when it comes to vertical centering you should use a CSS3 transform instead. Though, you’ll require a container div for offering an absolute reference, but you can auto-adjust the vertical positioning by using the transform as follows:

    div.container {
    height: however many em you want;
    position: relative }
    div.container p {
    margin: 0;           //Kills lingering offsets
    position: absolute;
    top: 50%;       //(Nearly) centre the element vertically
    transform: translate(0, -50%); }   //Nudge it up by half its height

    This is a great solution for animation, as it visually make changes to the elements by transforming their appearance. Using CSS3 transform you can apply several visual effects to your elements like move, rotate, skew and other effects. In order to center the 3D or 2D element vertically and horizontally, add or change the height and width of the element as shown below:

    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  2. Understanding CSS Specificity

    Specificity isn’t a very common word and chances are that you might not have even heard of it, but it’s a fundamental concept that any person who want to become good at styling CSS must understand. Specificity helps a browser choose most relevant property values to an element and gets them applied by the browsers. The problem with specificity is that it restricts CSS-rules to be applied to some elements, even though you think that the rules should have been applied.

    In order to resolve the problem you need to remember certain specificity rules, such as:

    • ID selectors have higher specificity in comparison to attribute selectors.
    • Rules having more specific selectors will have greater specificity.
    • The last defined rule will override previous and conflicting rules and so on.

    In case you’re facing specificity issues, make sure to avoid using !important declaration. In addition, try using minimum number of selectors required for styling an element. And put your styles in LVHA (link-visited-hover-active) order.

  3. Use HSL Over RGB

    Generally, most of the web designers make use of the age-old “RGB Hex tag system” to define colors. Define red, green and blue colors individually, include opacity if required. This approach is fine until you’re working with a color wheel, and merely want to determine complementary/contrasting hues having resembling saturations.

    In such a situation you’ll have to look for an RGB to HSLa calculator and perform plenty of conversions. Fortunately, CSS3 supports HSLa colour specs, as follows:

    background-color: hsla(120, 50%, 50%, 1);
  4. CSS3 Drop Shadows

    Rather than slicing the image and then capturing the shadow, it would be better if you could replicate the task using CSS3. For this purpose, you’ll have to include two lines of codes into your CSS, so as to make the effect work in all latest browsers:

    -abc-box-shadow: 1px 4px 10px #ccc;
    -xyz-box-shadow: 1px 4px 10px #ccc;
  5. Simplify Your Font Style

    When using @font-face, probably you’ll use different weights and styles for the same font, but make sure to tag them using font-weight:normal and font-style:normal, as shown in the snippet below:

    @font-face {
    font-family: ‘Italic name goes here’;
    src: url(‘URL-of-italic-font’);
    format:(‘Usually truetype’);

    Rather than collecting all the related fonts when typing, you should collect them into a single family at the time of loading. And then, use ‘font-weight: bold’ for elements that needs to be bold and use ‘font-style: italic’ for elements that needs to be italic, and apply them to CSS:

    body {font-family: "Name goes here"; }
    elements_that_should_be_bold: { font-   weight: bold; }
    elements_that_should_be_italic: {     font-style: italic; }
    elements_that_should_be_both: {     font-style: italic; font-weight:bold }

Let’s Wrap Up!

While working in CSS3 you’re less likely to come across obstacles, because of the its syntax. The syntax is clear and easy-to-understand for any newbie or inexperienced designer. In fact, it’s so simple that you could style your CSS just within a few hours of learning it. Even though, your site might look good in browsers like Safari and others, but what if your site doesn’t work in IE, or behave in a different manner as you’ve expected. Well, then it is recommended that you should consider the above discussed CSS3 trips and tricks.

Author Bio: Being a well known PSD to WordPress theme conversion service provider across the globe. Mike is treated as wordpress junkie who shares valuable content on markup conversion and web design aspects.

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors