This is a simple example showing how to design a cool page using css skew property and icon-fonts.
Please note that I have learned this from the udemy course by Jonas Schmedtmann.
Let’s first take a look at the example picture we are going to build
As you can see, the background image is skewed but not the contents inside. And background-clip text is also used to have a color in the icon-fonts. Let’s see how we can do that
Download icon-fonts
You can use any of your favorite icon-fonts but I downloaded mine from this website – https://linea.io/
HTML Code
The icon-fonts I downloaded are icon-basic-word, icon-basic-compass, icon-basic-map, icon-basic-heart
<section class="section-features">
<div class="row">
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-world"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Card 1</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe esse dolor repudiandae
</p>
</div>
</div>
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-compass"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Card 2</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe esse dolor repudiandae
</p>
</div>
</div>
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-map"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Card 3</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe esse dolor repudiandae
</p>
</div>
</div>
<div class="col-1-of-4">
<div class="feature-box">
<i class="feature-box__icon icon-basic-heart"></i>
<h3 class="heading-tertiary u-margin-bottom-small">Card 4</h3>
<p class="feature-box__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe esse dolor repudiandae
</p>
</div>
</div>
</div>
</section>CSS Code
Please note that I used SCSS for the style. You can still use CSS but just make sure to replace all the SCSS variables properly.
Let’s take a look at feature-box first.
$color-primary-light: #add8e6;
$color-primary-dark: #00008b;
$color-white: #fff;
$color-black: #000;
.feature-box {
background-color: rgba($color-white, .8);
font-size: 1.5rem;
padding: 2.5rem;
text-align: center;
border-radius: 3px;
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
transition: transform .3s;
&__icon {
font-size: 6rem;
margin-bottom: .5rem;
display: inline-block;
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
&:hover {
transform: translateY(-1.5rem) scale(1.03);
}
}- In the feature-box class, I used & which means to use the parent path up to this point – feature-box__icon.
- In &__icon, I used background-clip to have colors on icon-fonts. Please note that you need to set color transparent.
- Although you cannot see in the picture, if you hover over the card, you will see it scales up little bit and translate upward for some visual effects.
Now let’s take a look at section features where the image is loaded and skew is applied
.section-features {
padding: 20rem 0;
background-image: linear-gradient(
to right bottom,
rgba($color-primary-light, 0.8),
rgba($color-primary-dark, 0.8)),
url("../img/nat-4.jpg");
background-size: cover;
transform: skewY(-7deg);
margin-top: -10rem;
// every direct child
& > * {
transform: skewY(7deg);
}
}In order to skew the background image, you simply can use transform: skewY(degree). In the above example, I skewed 7 degrees counter clockwise. But if you only skew once, you will see everything is skewed including all the texts. To prevent that we skew back all the direct children – & > * 7 degrees to make it even.
I did not post the column css class here as it’s explained in this post – https://nycomdorics.com/sass-float-grid/