12 Exciting New Magic CSS3 Selectors You Need To Know In 2018

Here is a list of 12 CSS3 selectors you need to know in 2018. These simple, yet useful CSS3 selectors will save you time when designing for the web and ultimately make your life easier.

First, we will start out with interval and multiplier selections.

#1 :first-of-type – CSS3 Selectors You Need to Know in 2018

CSS3 introduced the incredibly useful :first-of-type selector. In the case you ever wanted to select the first paragraph of a block of text, you’ll know what I mean. Of course you could also use p:first-child but where’s the fun in that?

For example:

#contents > p:first-of-type {
  border-left: solid #000 3px;
  padding-left: 15px;
}

#2 :only-child and :only-of-type – CSS3 Selectors You Need to Know in 2018

:only-child is one of the CSS3 selectors you need to know if you want to make single elements really stand out. For instance, if you have a container holding only one paragraph and you want it to have a larger font to show importance. This would be the pseudo selector you want to use in that case.

Both :only-child and :only-of-type will check for if the target element has only one child of a specific element, class or ID. However, :only-of-type will work when there are more than a single type of element inside a container.

To illustrate:

#contents > p:only-child {
  font-size: 3em;
}

#3 :nth-child – CSS3 Selectors You Need to Know in 2018

Family Guy's Peter Griffin pulling blind curtains

:nth-child makes it easy to iterate through X amount of elements. If you wanted to make every other paragraph styled differently, use :nth-child(2n). There are other methods of selection using :nth-child, such as :nth-child(n+2) or :nth-child(n-2). :nth-child(n+2) would select all elements after the first.

:nth-child(n-2) would select all elements until the last. :nth-child(-n+1) or :first-child would select the first element, whereas :nth-last-child(1) or :last-child would select the last element. See more examples of the nth-child selector at CSS-Tricks.

It may take some playing around with these selectors until you finally get them down. However, these selectors are a great time saver and therefore one of the most important CSS3 selectors you need to know.

For instance:

#contents > p:nth-child(2n) {
  background-color: #EEE;
}

#4 background-size – CSS3 Selectors You Need to Know in 2018

CSS3 introduced the background-size property to allow for an easier method to make images responsive to their containers. I found that in most cases, “background-size: cover” works exceptionally well in responsive design. Here is a list of other possible background-size values introduced in CSS3.

  • Cover: Scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). Images will expand to cover the entire container.
  • Contain: Scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). However, the image is letter-boxed within the container.

For example:

#banner {
  background-image: url('http://unsplash.it/1000/350');
  height: 250px;
  width: 100%;
}

#5 box-shadow Property – CSS3 Selectors You Need to Know in 2018

box-shadow is a great addition to the style of elements in CSS. By simply adding the box-shadow property you can create all sorts of cool effects. Using box-shadow, you could easily add a hover effect to an element or add an inset to give the appearance of depth.

For example:

#contents {
  box-shadow: 0 1px 10px rgba(0,0,0,0.35);
}

box-shadow uses 4 arguments to define the position of the shadow and the blur amount. That first argument “0” represents the X-offset, the second argument “1px” represents the Y-offset, the third argument “10px”represents the blur amount and the last argument is the defined color for the shadow.

It’s a great effect, even Google’s taken a liking to using box-shadow in their material design.

Google's material design animation using CSS3 selectors you need to know

#6 text-shadow Property – CSS3 Selectors You Need to Know in 2018

Text shadow isn’t too useful in normal web design practice. However, it is one of the CSS3 selectors you need to know just in case. A great example of a use case and the text-shadow CSS property is when you have light text on a light background. By using a dark text shadow, the text will still remain legible due to the outline.

Another cool use is of text-shadow is to create a blurred text effect or colored text outline effect.

For instance:

#contents {
  text-shadow: 1px 0 1px #000;
}

As has been noted, text-shadow follows the same argument format as box-shadow. In both cases, the spread does not have to be defined. For the same reason, you could simple define the X and Y-offset and a color.

#7 RGBA Colors – CSS3 Selectors You Need to Know in 2018

In CSS3 we now have the ability to have alpha transparency in colors. Thus, using RGBA you can have text colors that blend in better with the background color of the parent element. In addition, background colors can also easily be blended into the parent’s background color using the RGBA alpha channel. What’s more, RGBA colors can also be used with border and outline colors as well.

For example:

#contents {
  color: rgba(0,0,0,0.85);
}

In fact, when following Google’s material design approach, they recommend using a text color that is about 85% darker or lighter than the content’s background (depending on light or darkness). This color recommendation makes reading content easier on your eyes. Using RGBA in the text color like the above example, makes this task easier to accomplish.

#8 ::before and ::after – CSS3 Selectors You Need to Know in 2018

CSS3 added support for pseudo classes, in addition to pseudo-elements established in CSS2. However, because some browsers don’t support the ::before and ::after pseudo-class notation yet it’s best to use the pseudo-element variant. Moreover, all elements contain a reserved portion of space before and after an element’s display. :before and :after give the ability to target those areas.

For instance, say you wanted to add some text to the end of every paragraph or heading – Simply target the :after pseudo-element and use the CSS content property to write out the text.Ffor instance:

#contents > h1:after {
  content: " - sitename.com";
}

In the example above, you can see how easy it is to include your website name in the content of every H1 title of your content.

On the other hand, one caveat to the CSS content property, is it does not allow any HTML.

#9 CSS Attribute Selectors – CSS3 Selectors You Need to Know in 2018

It is now possible to design based on element attributes. First, simply place an attribute in square brackets after an element tag, class or ID. Further, combine it with :before and :after to extend the selector even more.

For example:

#content a[href^='https://']:after {
  content: ' (secure link)';
}

As a result, this will append a string of ” (secure link)” to all links that begin with “https://” — notifying visitors that the link is an external link leading to a secure connection site.

#10 Transform Property – CSS3 Selectors You Need to Know in 2018

a transform effect of a blue rectangle rotating clockwise using CSS3 selectors you need to know

CSS transforms allow movements in the X and/ or Y axis. In any case, a great use case of CSS transforms is triggered animation for an on click or hover event. Hover.css has a great showcase of all the different effects possible using the CSS transform property.

As I have noted, here are some popular functions for the CSS3 transform property:

  • translateX()
  • translateY()
  • scale()
  • skew()

Further, see the full list of available CSS transform values at MDN Web Docs.

#contents button {
  transform: rotate(5deg);
}

#11 transition property – CSS3 Selectors You Need to Know in 2018

Out of all CSS3 selectors you need to know, transitions will become your best friend when creating animated elements. Summing up, CSS transition controls the speed of which your animation plays from start to finish and it’s one of the easiest selectors to remember.

CSS3 transitions require the property, followed by the value of speed in seconds.

For example:

#contents button {
  transition: background 0.2s;
}

In addition to CSS3 transitions, there exists the transition-timing-function property. In brief, values for transition-timing-function include:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out

In this case:

#contents button {
  transition: background 0.2s, color 0.2s;
}

Another way of including a transition-timing-function with your CSS3 transition can be accomplished by placing the transition-timing-function value after the targeted property value.

Note: Add more than one property to transitions by separating them with commas.

In another case:

#contents button {
  transition: background 0.2s ease, color 0.2s ease-in;
}

#12 :empty – CSS3 Selectors You Need to Know in 2018

:empty introduced an easy way to style elements that have no content in CSS. In most cases, it would be more efficient to use client side or server side logic to avoid rendering the element altogether. However, in the rare case you cannot :empty is a great fallback.

To illustrate:

#contents p:empty {
  display: none;
}

#13 :not – CSS3 Selectors You Need to Know in 2018

Without a doubt, the :not selector is truly in a league of its own. First, the CSS3 :not selector finally gave us a way to target the element, class and ID exceptions. For instance, say you had a content area with elements which were mostly given a “success” class. Due to this, the base text color may have been set to green. Now, you can target other elements that were not given that class and change the text to red in response to an error.

For example:

#contents > :not(.success) {
  color: red;
}

To take it further, this could be extended with the attribute selectors. For instance, if you had a bunch of class names that may have started with “col-“.

In this case:

:not[class*='col-'] {
  background-color: #FFF;
}

This will give all elements that don’t contain a class starting with “col-” a white background.

15 Web Design Trends 2018 (Stuff You Should Know)

Here’s a list of 15 web design trends you will see in year 2018. Everything needed to prepare for new card design, minimalist web design and scroll stories.

Let’s get this show on the road

1. Big Images

You may have seen a blog or two with HUGE cover images – such as my blog’s posts ?.

Some may call them hero images…

In this day age, people are more visual beings. As a web designer, take advantage of this by giving your viewers great visual content.

man standing on a mountain, staring off to a mountain
Photo by Joshua Earle.

By using larger images, you grab the readers attention and give them a preview of what the article’s about.

Take your viewers to a whole new world with your images.


Photo by Mahkeo.

Here are some examples of using big images in web design.

A screenshot of sweetbasil.com using a hero image on their landing page

Above is a screenshot of sweetbasilvail.com.

Sweet Basil’s website takes advantage of the screen real estate, by using real photos of their restaurant as advertisement.

See how diymag.com uses big images in the screenshot below.

A screenshot of diymag.com displaying a large hero image in their web design

2. Video

Now that video has taken over the internet, designers have began incorporating it into their banners, hero images and backgrounds.

Awwwards.com has great examples of websites with video as part of their design.

Look:

A gif animation displaying the video background hero image of hellodesign.com.

Above is a screenshot of hellodesign.com.

And here’s another great example I found of a web design with video for you.

A gif animation displaying the video background on neematic.com.
Above is a screenshot of neematic.com.

Find free stock videos for your website at Free stock videos – Pexels Videos. These videos are all free to use for personal or commercial use (attribution not required.)

3. Custom Illustrations

Below is a screenshot of flexmize.com.

A screenshot showing custom illustration of fleximize.com

Notice, you can use digital art to attract your visitors to a button. Art can be used to convey your company’s mission, while gaining attention from the community.

Here’s another great example at keepearthquakesweird.com.

A screenshot of keepearthquakesweird.com showcasing custom illustration.

Both of these website examples have used digital art, as well as animation in their web designs.

This type of web design causes a natural discussion about your website and can even give you free publicity.

4. Scroll Stories

An animating gif of everylastdrop.com showing how scroll stories can be used in web design.

Above is an animated gif of everylastdrop.co.uk.

And here’s another animated gif of hegartyonadvertising.com.

An animated gif of hegartyonadvertising.com using scroll stories in web design.

If these example gifs are taking to long to load, just follow the links and check them out yourself.

Keep in mind, these scroll story type web designs may take up more bandwidth than an average site for your user.

Learn how these are made:

If you want to build scrolling web designs, check out scroll magic.io. They have a JavaScript library that you can use, along with multiple scrollmagic examples to learn from.

5. Fancy Typography

Below is a screenshot taken of primeandfire.com.

A screenshot of primeandfire.com showcasing bold typography on the web.

Here’s another example from the same site:

A screenshot of primeandfire.com showing how big typography can be used in web design.

 

Lastly, check out how the website ilovemy.de uses typography in their design.

A screenshot taken of ilovemy.de/blog showing typography on the web.

6. Gradients

As seen in the screenshot below, stripe.com uses gradients in their website’s homepage.

A screenshot of stripe.com's landing page.

Similarly, check out how unbounce.com uses web gradients in the screenshot below.

A screenshot of unbounce.com's use of gradients in their web design.

As seen with stripe.com bold gradients can be used to make certain elements pop and place attention on them.

Learn how to use gradients in your web design at w3schools.com and developer.mozilla.org.

Personally, I have used w3schools.com to learn web gradients. With that being said, I feel it could be a great resource for you to start with too.

7. Vibrant Colors

In 2018, vibrant colors in web design will become way more popular amongst designers.

Below are some awesome examples of web design using vibrant colors.

A screenshot of vibrant colors on KIKK Festival's web design.

Above is a screenshot of the KIK Festival’s website at kikk.be.

The KIKK Festival uses artful vibrant digital illustrations on their website, as symbolism of the artistic community they represent.

And another great example is insidethehead.co.

Below is just one of their chapter illustrations. Notice how they use vibrant colors to portray their messages in a storybook fashion.

A screenshot of insidethehead.co and their use of vibrant colors in web design.

Each chapter represents the delusions, illusions and confusions of young adults.

8. Card Style Information Panels

If you’ve ever been to Wired’s website, you may have seen their use of cards to display their articles.

Check this out:

A screenshot of wired.com in 2017 showing card design on their website.

Above is a screenshot of how wired.com uses card design on their website.

They aren’t exactly the modern designed cards you may be used to seeing on the web, but they are cards nonetheless.

You may be thinking, that’s a great way to layout content for an online media company.

And you’d be right.

Here’s another great example:

Look at how awwwards.com uses card design for their blog articles.

A screenshot of awwwards.com/blog using card design in their website.

This goes to show how useful cards can be for displaying content, while maintaining a minimalist design.

How Social Networks Use Card Design

You may or may not have noticed it, but all of the popular social networks are using card design in one way or another.

Check this out:

A screenshot of a tweet using card design on twitter.com.

Above is a screenshot of how Twitter uses cards for displaying individual posts.

Notice how they incorporate things such as their branding, post title, post excerpt, source URL, timestamp, Like count and even a user list of sharers.

And look at how Facebook Pages use cards:

A screenshot showing card design at Facebook pages on facebook.com.

Above is an example of how Facebook uses card design throughout their site’s design.

Facebook Pages use cards to display content everywhere – The header, content area and even the sidebar.

When most social networks use card design, there’s a safe bet cards are great for scannability.

9. Minimalism

I know minimalism web design has been around for awhile now, but it will get even more minimal in 2018.

Take a look at these more recent examples of minimalist web designs.

Screenshot of minimalist web design on unified-theory.co.
The above screenshot is of unified-theory.co.

Screenshot of Igotchamedia.com using minimalism in their web design.

Above is a screenshot of igotchamedia.com – A digital marketing agency.

Notice their web design still conveys what they do, while being minimalist.

And below is an example of how they use minimalism on their website’s “Services” section.

Screenshot of igotchamedia.com minimalism design use in their Services section.

Minimalism works because it forces you to be more detail oriented in your design.

You may think minimalism is for artsy fartsy type web designers only…

Not exactly

With time and dedication, I know you can learn minimalist design too.

If you’re interested in learning the basics to minimalist web design, check out this minimalism basics article by TutsPlus.

Also, here’s a great video by TutsPlus I found for you to learn the core concepts of minimalism in web design.

10. Flat Design

Before Flat 2.0 was announced, in 2013-2014, Apple and Google began using flat design in their products.

Google even developed their own design language for flat design called Material Design for developers in 2014.

Flat design really took off after mobile operating systems began using it in 2016.

And you know what?

After being refined all these years since 2014, Flat 2.0 will be a key component in web design of 2018.

For instance, take a look at how clean betttter.com looks.

Screenshot of betttter.com and use of flat design on their website.

It’s a very friendly yet simple design.

Here’s another example – thehappyprints.com:

Screenshot of thehappyprints.com using flat design on their website.

Notice, their message is clear.

By using flat design, Happy Maps was able to give you clear instruction, while using less than 40 characters in their copy.

Now, you may think Flat design is awfully similar to minimalist web design. You may be right, or these designers may just have combined the two trends.

Anyhow, Flat design is all about using basic color palettes with shadows and highlights for depth. Which leads me to my next two web design trends…

11. Shadows

Take a look at how dona.ai uses shadow to draw in attention to fill out their email form.

Screenshot of dona.ai use of shadows in their web design.

12. Highlights

When light bounces off an object, it will normally catch your attention and put your focus onto the object.

Well, you can use highlights in your web design to get that same effect.

Look:

Check out how purelansing.com uses highlighting to put emphasis onto their “Learn More” button.

Screenshot of purelansing.com using highlights in their web design.

Use highlights to draw attention to an element, like the example below.

Screenshot of dribbbox.com using highlights and gradients.

As seen in the screenshot above, dribbbox.com uses purely a highlighted border to draw attraction to their “Live demo” button.

13. Attention Span Content Widths

The width of your web design content matters.

Here’s why:

Nowadays, you and I scan for content and it’s becoming harder and harder to keep focus on longer strips of text.

To get around this, keep a width constraint on your content. I found 780px to be a good width.

Diagram of attention span content width constraint on the web.

Site’s like medium.com and copyblogger.com use constrained widths for their blog article content.

Below is a screenshot of Medium’s blog.

Screenshot of medium.com using a content width constraint.

And here’s a screenshot of Copyblogger’s blog.

Screenshot of copyblogger.com using a width constraint in their blog article content.

14. Hover Effects

Hover effects in web design can be used on anything from whole boxes of content to buttons, to simple text links.

You could use hover effects to make animations, display tooltips or even make whole drop down boxes.

Check this out:

A dribbble design of a hover effect in a web form input.

Above is an example of using a hover effect to display the input field of a web form.

And here’s an example of using a hover effect to display a tooltip.

Animated gif of a hover tool tip effect in web design.

15. Actionable Landing Pages

Tesla.com is a great example of an actionable landing page.

For example, there’s a clear message advertisement in the center, following with a list of simple two word buttons below.

See for yourself:

Screenshot of tesla.com showing an actionable landing page on the web.

If you visit their website, you’ll notice they even use a background video, as I described in my post – 6 Common Magazine Design Trends Found in Today’s Web Design.

So you want to increase conversion on your landing page?

All you need to do is give your viewers simpler actions to take. Give them a select few obvious options to choose from.

That’s how these actionable landing pages work so well for conversion.

Take a look at paypal.com in the screenshot below.

Screenshot of paypal.com using an actionable landing page in their design.

See how they give you two very clear choices on their landing page. Either start with a personal or business account.

In addition, theres an alternative message below that reads “Gift money with ease” following with a simple link to “Gift money now.”

By not making the viewer think, they are more likely to follow through with one of these options.

Wrapping Things Up

That’s it

In essence, you have now learned the 15 web design trends to prepare for year 2018. Keep these trends in mind when designing for the web in the new year.

Feel free to share this article and let me know in the comments below if you have other trends that we should see in year 2018.