Take Your CSS Up a Level with Some Tips & Tricks

You Don’t Have to Rely on Javascript for Everything!

There’s something of a craze in the web development world surrounding Javascript and jQuery effects. But at the same time, there’s also a movement to use less of it. Lots of scripts can slow down the load speed of a page, and not every browser or mobile device completely supports these languages. Thankfully, there’s a lot you can do with CSS alone! People often underestimate this language, but there are tons of tips and tricks that can create amazing effects.

Calculate Values

First up isn’t a super glamorous effect, but one that can eliminate the need for quite a few JavaScript functions once you master it. Essentially, CSS has the ability to calculate values! Gone are the days of trying to fine-tune  set values for different screen sizes, or having to create unnecessary rules for one-off elements that create extra code.

This is especially true when you start incorporating view height and view width into your calculations! CSS can set an element’s width or padding or anything to a certain portion of the user’s browser window, basing off of height, or width, or both. This is perfect for responsive design, and makes keeping your code organized and responsive that much easier.

Here’s a quick example of how to use calculates (and view width!):

div.my-half-section {
     width: calc(50vh - 20px);
}

The above code will set the the width of the div to half of whatever the width of the user’s window is, minus 20px to automatically put some extra margin around it for space.

Target Child Elements

Ever come across a plugin or theme you want to customize, but some of the elements don’t have HTML IDs or classes you can target? Fear not, CSS has the ability to target the child elements of any element! This starts simply, with simply targetting every child element that qualifies. As an example, the example below will target every link inside of a paragraph with the custom class:

p.my-custom-class a {
     font-style: italic;
}

Nice, right? But it gets better. Add in the :first-child or :last-child qualifier and you can hit, as expected, only the first or last child element. This is great for adding or removing spacing around the entire element as your needs arise. Need to target something in the middle, or a pattern of child elements? Enter the :nth-child() qualifier. You can put any number into the parenthesis to target a specific element, or the words even or odd to create a pattern of distinction between elements.

table.my-custom-class tr:nth-child(odd) {
     background: #f2f2f2;
}

The above code will make every other table row in the specified table have a background, making the table a little easier to read by separating the data.

Specify Element States, or Psuedo-Classes

Similar to the :nth-child qualifier elements above, you can specify states for your targetted element with all kinds of conditions. One of the most common is the :hover state, which applies to any element. Say you want a certain image to grow when a user hovers their mouse over it:

img.grow:hover {
     transform: scale(1.1);
}

While hover is the most common, there are tons of other selectors, some of which are specific to certain elements. Links, for example have :active and :visited along with :hover. Form inputs have a ton as well, relating to their validation. You can check out the list of all states, or psuedo-classes, on W3 Schools.

Use Before and After Psued0-Elements

Like psuedo-classes above, psuedo-elements are created using the : separator. But psuedo-elements do more than target specific elements; they create whole new elements where you can set the content along with the different styles. While the single : will work, we recommend using double :: to help clarify the distinction. The double will work with psuedo-elements, but not with psuedo-classes.

When it comes to psuedo-elements, ::before and ::after are the most common. As the name implies, these allow you to add in content before or after the selected element. This can either be text, or an image you can pull from a URL.

img.trademark::after {
     content: url(trademark-image.jpg);
}

The above code will add a trademark after any image you add the right class to. This makes management much easier, since now instead of having to change the trademark everywhere if you ever wanted to make a change, you only have to change it in one place and you’re good to go. While ::before and ::after are the most commonly used, there’s also ::first-letter and ::first-line to create psuedo-elements out of existing content.

Create Animations

Last, but certainly not least, is the ability to create your own custom animations using CSS properties! No longer do you have to rely on Javascript or jQuery for simple fade-in animations. Nor do you have to rely on it for more complex animations either: as long as you’re affecting a CSS property, a custom animation will do the job. But as an example, here’s the fade-in animation mentioned earlier:

@keyframes fadeIn {
     from: { opacity: 0; }
     to: { opacity: 100%; }
}

This defines the animation frames for an animation we’ve named “fadeIn.” You don’t have to use the from and to frames either, you can set percentages for specific things to happen at specific times. From and to is essentially 0% to 100%, but you can add something to happen in the middle with a 50% or 90% or any percentage. The length of the timeline is covered in the animation-duration property that we’ll cover in a moment.

Note you’re not limited to only changing one CSS field, either. The internal brackets are their own little CSS rules, and you can have as many different properties change at once as you’d like. But this is how we’d use the animation:

img.my-custom-class {
     animation-name: fadeIn; /* The name of the animation, specified above */
     animation-duration: 1s; /* How long the animation takes to play out */
     animation-timing-function: ease-in-out; /* Optionally slow down the animation at the beginning and/or end */
     animation-delay: 100ms; /* Optionally delay the start of the animation */
     animation-iteration-count: 1; /* How many times the animation runs */
}

You can specify each element of the animation separately as above, or compact into one property in the same order:

img.my-custom-class {
     animation: fadeIn 1s ease-in-out 100ms 1;
}

Be sure to play around with everything you can do, and you’ll be creating beautiful and responsive pages that load snappier than ever since it’s all with CSS! Need some extra help getting started, or trying out the more advanced options? Don’t hesitate to reach out to us at Mr. WPress for a free quote!