Menu
iThemes
WordPress Backup, Security & Maintenance
  • Products
    • iThemes Security Pro
    • BackupBuddy
    • Kadence WP
    • Restrict Content Pro
    • iThemes Sync
    • Why buy from iThemes?
  • Bundles
    • Essentials Bundle
    • Plugin Suite
    • WordPress Web Designer’s Toolkit
    • Customer Spotlights
  • Resources
    • Blog
    • WordPress 101 Tutorials
    • WordPress Ebooks
    • Weekly WordPress Vulnerability Report
    • The Ultimate Guide to Starting a Web Design Business
  • Training
    • Upcoming Webinars
    • Free Webinar Library
    • Premium Courses
    • Become a Member
    • Member Login
  • Support
    • Documentation
    • Get Help
    • Product Updates
    • Upgrade Policy
    • Contact
    • Our Mission: Make People’s Lives Awesome
  • Log In
WordPress News and Updates from iThemes
Categories
  • Product Updates
  • WordPress Backup
  • WordPress Block Editor
  • WordPress Ecommerce
  • WordPress for Freelancers
  • WordPress Security
  • WordPress Tutorials
  • WPprosper

WordPress CSS Tricks: CSS Typography Mask, Clip Paths & More

Written by Saylor Bullington on February 15, 2017

Last Updated on March 13, 2017

Each time I build a new WordPress website, I learn a few CSS tricks and I want to share a few with you.

When I build WordPress websites, I use iThemes Builder. All the CSS tricks and tips I show you here can be used in the stylesheets provided in your theme folder and with all Builder layout modules.

CSS Typography Mask

If you are familiar with Adobe Photoshop or Illustrator, you probably know a thing or two about clipping masks. This CSS technique is a lot like that.

First you’ll need a bit of HTML markup.

<div class="container">
 <!-- the element whose background we're going to clip -->
 <div class="clipped">
 <h1>Earth</h1>
 </div> 
</div>

The important thing here is the class “clipped.”

If you’re using iThemes Builder, you can insert this into an HTML module in Layouts and Views.

Screen Shot 2017-02-09 at 11.53.38 AM

Now for the CSS. As I said before, we are focused on the class around the header — “clipped.” This will go into the appropriate stylesheet of your theme.

You will need an image to mask the text with. In this case my <h2> is “Earth” and I’m original, so I thought to mask that with an image of earth.

 .clipped {
background: url(.../img/earth.jpg) no-repeat center center;
background-size: cover;
background-size: 18%;
color: #fff;
text-align: center;
padding 2em;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

Here we are using two -webkit tags to accomplish the desired effect.

-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

These are what actually create the masked type effect. The -webkit- prefix is used for CSS properties not yet officially implemented either by the W3C specifications or by all web browsers, but are available to WebKit browsers.

Something to note: There is no need to have two background-size tags, but I wanted show you that you do have the option to set the size to “cover.” In this particular case I wanted to size the image manually. Both options are fine.

And waalaa!

type-mask

Graphic Typography

Can’t get enough typography? I feel you.

Typography seems to be growing in popularity in the web design community. Designers are focusing more on content and exploring ways to highlight it on websites. Because of this, type seems to be emerging as a graphic element in addition to communication.

That said, let’s take a look at how to add a graphic touch to some type.

To begin we have our HTML. Once again this can be placed in an HTML module or even a widget module specific to text.

<div class="container">
     <h2>Graphic</h2>
</div>

graphic-basic

Pretty basic. Time to add some interest.

The CSS:

.container h2 {
 color: #555;
 font-family: 'Oswald', sans-serif;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 200px;
 font-weight: 800;
 letter-spacing: -3px;
 line-height: 1;
 text-shadow: #EDEDED 3px 2px 0;
 position: relative;
}

basic-type

Now we add the pseudo element ::after. Notice the position on the h2 is relative, this is necessary for when we position our pseudo element absolute.

We have also added a bit of text shadow to our header, but it isn’t super visible at the moment.

.container h2:after {
 content:"graphic";
 position: absolute;
 left: 10px;
 top: 10px;
 background-image: -webkit-linear-gradient(left top, transparent 0%, 
transparent 25%, #555 25%, #555 50%, transparent 50%, 
transparent 75%, #555 75%);
 background-size: 4px 4px;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 z-index: -5;
 display: block;
 text-shadow: none;
 text-align: center;
}

Now we have this. A much more interesting header.

graphic-type

The text shadow breaks up the header from the pseudo element and once again we are using the prefix webkit for a couple of CSS tags.

Play around with different fonts and colors to see what kind of headers you can create.

Creating a Triangle with CSS

Maybe I’m late to the party and everyone knows this one, but just in case there are any poor, clueless souls like me, I have to share.

I often find myself wanting to use an arrow (triangle) for various reasons. In these cases I would always create a triangle in Illustrator and use it as a background image in my CSS.

There is a better way.

We have a square. css only triangle


width: 200px;
height: 200px;
border-left: solid 20px #f00;
border-right: solid 20px #ff0;
border-top: solid 20px #0f0;
border-bottom: solid 20px #00f;

Notice the borders meet at an angle.

Now set the width and height of the square to zero. Screen Shot 2017-02-09 at 10.55.02 AM


width: 0px;
height: 0px;
background: transparent;

Now you have four different triangles, and all you need to do is choose the direction the triangle needs to be and set the other border colors to transparent. Screen Shot 2017-02-09 at 11.00.39 AM


border-left: solid 20px transparent;
border-right: solid 20px transparent;
border-top: solid 20px transparent;
border-bottom: solid 20px #00f;

Boom. Triangle.

 .triangle {
width: 0;
height: 0;
background: transparent;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
border-top: solid 20px transparent;
border-bottom: solid 20px #00f;
}

Breaking Photos “Out of the Box”

Photos are a great addition to any website. By adding a visual, a second layer of communication is added giving your message a little extra oomph.

The majority of photos are rectangle. We are going to look at how to use clip-path to change the shape of a photo.

Let’s turn this photo into a hexagon.

Notice my photo is a square. If you use the polygon points provided, you’ll want to use a square photo as well in order to not skew your hexagon.

The HTML:

<svg class="clip-svg">
 <defs>
 <clipPath id="polygon-clip-hexagon" clipPathUnits="objectBoundingBox">
 <polygon points="0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0 0.25" />
 </clipPath>
 </defs>
</svg>

<div class="polygon-each-img-wrap">
 <img src="https://saylor.dev.ithemes.com/wp-content/uploads/2017/02/
example-img.png" class="polygon-clip-hexagon">
</div>

Now the CSS:

.clip-svg {
 width: 0;
 height: 0;
 }
 
 img {
 max-width: 100%;
 height: auto;
 }

 .polygon-clip-hexagon {
 -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 
0% 75%, 0% 25%);
 clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%,
 0% 25%);
 -webkit-clip-path: url("#polygon-clip-hexagon");
 clip-path: url("#polygon-clip-hexagon");
 }

CSS’ clip-path property allows  you to shape things differently by changing different values. Hexagons, octagons, stars — think outside of the box.

Boom. Hexagon.

hex-img-done

You might be asking yourself how to come up with the different values for various shapes and Clippy has got you covered. Still you can set everything manually if you so choose.

For a detailed explanation of the clip-path property checkout CSS Tricks.

Reminder: Because You Can Doesn’t Mean You Should

I have zero shame saying CSS brings a lot of joy to my life. Discovering all it can do is better than the season finale of Game of Thrones — Scratch that. Let’s not get crazy.

Even so, it’s necessary to use discretion with more advanced CSS like animations. It’s easy to get carried away and lose sight of what’s important — building a polished website focused on presenting content that is clear and user friendly.

Remember, just because you can, doesn’t mean you should. If some CSS animation just adds clutter to a site and does nothing for the message, don’t use it.

Act on the side of caution when it comes to details vs. speed. I assure you the majority of users prefer speed over “special effects.”

Saylor Bullington
Saylor Bullington

Saylor writes blog posts and designs/develops various projects for iThemes. Saylor loves gardening and is currently at war with all squirrels (if anyone has tips on how to get rid of squirrels, she’s all ears). If she’s not traveling or hanging out in OKC, there’s a good chance she’s in southwest Oklahoma doing manual labor, including roofing, or as her father likes to call it – “building character.”

Share via:

  • Facebook
  • Twitter
  • LinkedIn
  • More
Other related posts
website design process
Web Design Inspiration for 2022: Top 10 Trends to Watch
Kadence Conversions
Kadence Conversions: Build Pop-ups, Slide-ins & Banners in WordPress
Hackers broke my business
GoDaddy Hacked: 5 Ways to Secure Your WordPress Site
WordPress Vulnerability Report
WordPress Vulnerability Report: November 2021, Part 2

Respond

Click here to cancel reply.

Get updates on new themes & plugins plus special discounts

About iThemes

  • The Team
  • Contact Us
  • Website Accessibility Statement
  • Sitemap

Resources

  • Blog
  • Documentation
  • WordPress Tutorials
  • Free WordPress Ebooks
  • Free Webinar Library
  • Free Upcoming Webinars
  • iThemes Training
  • Affiliates

Customers

  • Member Panel Login
  • Support
  • FAQs
  • Upgrade Policy
  • Licensing
  • Terms and Conditions
  • Refund Policy

Top Products

  • BackupBuddy
  • iThemes Security Pro
  • iThemes Sync
  • Restrict Content Pro
  • WPComplete
  • WordPress Hosting
  • WordPress Plugins
  • Content Upgrades
  • WordPress Landing Page Plugin
  • BackupBuddy Stash

iThemes Media LLC Copyright © 2022 All rights reserved | Privacy Policy

© 2022 All Rights Reserved.

[class^="wpforms-"]
[class^="wpforms-"]
Share via
Facebook
Twitter
LinkedIn
Mix
Email
Print
Copy Link
Powered by Social Snap
Copy link
CopyCopied
Powered by Social Snap