5 ridiculously easy CSS tricks to make your site more dynamic

Squarespace has done an incredible job at bringing aesthetically-pleasing, minimal design to website building. It’s also really difficult to make one of their sites look bad considering the simplicity of each theme.

But what if you want a site that is a little more open-ended? Or what if you simply want to code a single page, such as your portfolio?

Taking the best from what Squarespace has capitalized on, I’ve compiled a list of what I believe makes for an extremely clean, dynamic site — one that you can be proud of, knowing that you built it yourself!

 

You can see all of these examples implemented in my own online portfolio!

 

Change opacity with :hover selector

img:hover {

opacity: 0.8;

}

 

When scrolling through a page full of content, it becomes hard to decipher which elements are interactive. For example, not all images are links to other webpages. In order to help the viewer navigate your site more easily, try utilizing changes in opacity with the :hover selector.

As mentioned, this is best used for elements that are linked to other webpages.

*Pro tip: I’ve found that adding a transition-duration of 0.2s is the perfect speed for and types of transitions, such as opacity, size or color.

 

 

Dynamic parallax scrolling

.container {

height: 500 px;

background-image: url(‘…’)

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

 

Of all the website trends at the moment, parallax scrolling is definitely at the top. It’s a near guarantee the site you are viewing is a bit more up-to-date. It’s also subtle enough that it doesn’t detract from the overall experience the webpage.

I suggest using an image with similar colors as the entire page’s background so the entire scrolling process is more seamless.

 

Customize hyperlink text-decoration

a, a:visited {

text-decoration: none;

color: black;

}

 

a:hover {

color: orange;

transition-duration: 0.2s;

}

 

Similar to the image opacity transitions, the hyperlink hover selector is another small treat for the user. But because hyperlinks have default settings, there is an extra step you will have to go through. The text-decoration property will get rid of the underline, and the color property will remove the automatic blue color.

Note that visited hyperlinks also default to a purplish color, so make sure to include the :visited selector when removing text decorations and colors.

We will use the :hover selector again here. All you have to do is choose whatever color you like. I recommend visiting Kuler by Adobe for some of the best website color pallets. The 0.2s transition-duration speed also applies here!

 

 

Add a skewed <div>

div {

transform: skewY(-7deg);

height: 500px;

}

 

div .container {

transform: skewY(7deg);

}

 

After studying some of my favorite online portfolio examples, I found that many of them had skewed <div> elements. I found several ways to go about creating this effect — I’ll admit, some of them were way over my head, and seemed like an unnecessary amount of code.

I finally landed on the transform property. It is simple and it works just fine — you just have to make sure that you have sectioned off the inner HTML from the surrounding <div>, as all content will be skewed. Simply changing the skew of the inner HTML to the exact opposite of the <div> will fix this issue.

*Pro tip: Keep your CSS clean by not randomly labeling <div>/<span> elements. ID tags are best for items you intend to only appear in your HTML once. Class tags are best left for items you intend to appear multiple times, so you only have to code the CSS once.

 

 

Optimize your page for mobile!

div .container {

width: 70%;

}

 

Of course, any solid, dynamic webpage must be just as functional on mobile devices as well. The best way to ensure your site doesn’t get all wonky when shrunken down is to define widths by percentages rather than pixels.

This is especially helpful when you are dealing with images and blocks of text. It’s also what the popular Bootstrap framework is based on.

*Pro tip: When you go below a certain percentage, your elements will be too small on a mobile device. You can fix this using media-queries.

Leave a Reply