11 CSS Tips For Advanced Layouts And Effects

Opublikowano - Ostatnią modyfikację wprowadzono

CSS is regarded as one of the simplest languages for web development, but it still requires a lot of creativity and knowledge when it comes to creating layouts and effects. There have been considerable changes in website development with the introduction of Content Management Systems (CMS) such as Wordpress, Magento and Joomla, to name a few. These CMSs have made it easier for any average Joe to change the layouts and effects of their site to that of predefined templates. However, the web front-end has remained the same with HTML mark-up styled with CSS. This means that adequate CSS skills are still necessary for web development purposes.  

Here are 11 useful tips on how you can achieve advanced layouts and effects through the knowledgeable use of CSS!

1. 100% div height stretch

One of the problems that designers usually face is stretching a div to 100% of the window height. This problem is quite common since having the CSS of your div set to height 100% just doesn’t solve it. The solution requires that you define the height of the body and HTML itself. Therefore your CSS should have:

Html {
    Height: 100%
}
Body {
    Height: 100%
}

On top of this, you should specify the height of your div to be min-height: 100% instead of height: 100%. This means that whenever the content of the div stretches beyond the height of the body, the background expands as well.

2. Width element

You can also define an element’s width to be directly proportional to its height. This is applicable for containers that usually change their width as their height changes. In order to solve it, make use of font-size as well as height and width in CSS. For example, an element that has font-size: 40px, width: 2em and height 1em directly translates to an 80px width (40*2) and a 40px height (40*1).  

3. Sizing HTML elements

Whenever you browse some sites from different browsers, you might find notable differences in their HTML sizes. This inconsistency can now be solved easily by using the box-sizing CSS function. You can simply add:

html {
    Box-sizing: border-box;
}

Although it does not follow design standards, the end result of this is more logical than having to mess around with your element’s properties in order to have a consistent HTML size. This can prove to be a nifty skill for your next freelancer project.

4. Centering an HTML element vertically inside another

Another problem that is quite common for web designers is vertically centering elements of different height while inside another element. A simple solution to this is by setting the outer element to display: table while having the inner converted to a table-cell. However, you can vertically centre one line of text by adding the line-height property to it.

If you are handling more than 1 line of text, you should set the outer element’s display to table and have the inner element’s text set us display: table-cell and vertical-align: middle.

5. Creating same-height columns

Sizing columns can be quite frustrating especially when the content in one column is longer than another. To solve this, use a large negative value for margin-bottom, followed by an equally large padding-bottom value. You can then add overflow: hidden to .row and have the margin-bottom for columns set as 99999px and the padding bottom as 100009 (99999px + 10px). 10px is the padding set for the column’s sides.

A much simpler solution is through the use of flex box. Be aware: it will still show errors in some versions of Internet Explorer.

6. Night Mode

At times some developers just want to have the night mode feature in their web design projects without having to create a new stylesheet. You can solve this simply by including CSS filters into your pre-existing stylesheet. One such filter is invert i.e

#element {
    Filter: invert(1);
}

The feature “Invert” inverts all colors inside that particular element.

7. Making use of sibling selectors

Sibling selectors are great especially when you are involved in a list of items. It is common design knowledge that the first and last items in a list should be treated differently. However, most web designers usually think of pseudo CSS selectors as first instinct (i.e :first-child and :last-child), instead of making use of sibling selectors.

Having trouble understanding how sibling selectors work? You can find thousands of freelancers here who are willing to help you out.

8. Resizing images based on browser window size

It is easy to format text in order for it to fluidly adjust to your browser size. The same can’t be said for images as they are considered a ‘static’ element. There are a few techniques to get around this. You can maintain the aspect ratio of your images by adding

#element {
    Max-width: 100%;
    Height: auto;
    Width: auto\9;
}

With this fix, whenever you resize your browser window, the images will also adjust accordingly. The downside is that horizontal images can get resized to ugly proportions. It is therefore not a recommended fix for dynamically generated images.

9. Adaptable view

Adaptable view is a user interface design that allows users to change the layout of their site’s contents to their own liking. It is implemented by allowing users to be able to switch styles, thereby giving your users more control over the content they get to see, and how it is formatted.

In order to effect this, you will have to create CSS classes for particular views, and use jQuery to switch between them. Take the example where you want your site users to be able to choose between one or two column views whenever they visit your site. This means you will have to have the CSS classes for both one column and two columns. You can switch between the two classes by using jQuery e.g.:

$("#switch1").click(function() {
    $("#list").removeClass("two_column");
}
);
$("#switch2").click(function() {
    $("#list").addClass("two_column");
}
);

Site users can now toggle between reading the contents in single-column or two-column mode.

10. Full page background image

There are times when you need to have a full page background image for your site. Some solutions lead to distorted image proportions, uneven scaling or white spaces around the page. The good thing is that this can be easily achieved through CSS3 with its background-size feature. It is also important for you to use the HTML element, because it is almost the same height as the browser window, unlike the body element. You can then set a fixed and centred background image with its background size set to cover, e.g.

html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

The good thing about this fix is that it is supported across all modern web browsers including IE9.

11. Follow sidebar

Have you ever tried to implement a sidebar that follows you whenever you scroll? Well, here is the CSS solution to it. To implement this through CSS, you will need to use fixed positioning. The sidebar is then positioned inside another element e.g. #pagewrap with a relative position. You can then push it into place using margin. This ensures the sidebar always stays in place whenever a user scrolls through the page.

CSS is quickly replacing jQuery and JavaScript in a number of ways. These tricks maximize the use of CSS and open up new possibilities, and avenues of implementing web front-end solutions.  Some of these tweaks are even better than their jQuery/ JavaScript equivalents.

We'd love to hear from you if you have any CSS 'secrets'. Drop us a comment in the section below. In the meantime, we wish you all the best in your web development projects!

Opublikowano 17 sierpnia, 2017

LucyKarinsky

Software Developer

Lucy is the Development & Programming Correspondent for Freelancer.com. She is currently based in Sydney.

Następny Artykuł

Draw Attention To Your E-Store With Magento