w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Effects

Masked & Skewed

September 30, 2020
in Effects

Playing with artificial perspective and clipping-masked image and text, inspired by a vintage travel poster and a very stubborn Collie

See the Pen Masked & Skewed by Jason Pamental (@jpamental) on CodePen.

You might also like

24 Free CSS Scroll Effect Examples

36 Free CSS 3D Text Effects

13 Beautiful CSS Button Hover Effects for Your Website

13 Free Blob Effects Using CSS3

CSS in CSS with a lot of C and S

Box Shadow Patterns

Created on April 2, 2020 Updated on April 2, 2020. A Pen by Jason Pamental on CodePen. License.

Download

index.html

<div class="poster">
  <div class="subtitle-reverse">
    <h2 class="subtitle-clipped--title">Reservoir</h2>
  </div>
  <div class="title-clipped">
    <h1 class="title-clipped--title">Dog</h1>
  </div>
  <div class="tagline">
     <p>The story of a dog who loved standing in the water bowl</p>
  </div>
</div>


@font-face {
  font-family: "Work Sans";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/WorkSans-VF-subset.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Bild";
  src: url("https://rwt.io/_demo_fonts/bild/BildVariableV2-VF.woff2")
    format("woff2-variations");
  font-stretch: 60% 100%;
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
}

p {
  color: #ffffff;
  font-family: "Work Sans", Helvetica, sans-serif;
  font-size: calc( 1.5vw + 1rem );
  font-weight: 525;
  letter-spacing: -0.025em;
}

h1 {
  font-family: "Bild", Helvetica, sans-serif;
  font-stretch: 60%;
}
h2 {
  color: #dadaf0;
  font-family: "Bild", Helvetica, sans-serif;
  font-stretch: 85%;
}


.title-clipped {
  margin-left: 10vw;
}
.title-clipped--title {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IMG_8982.jpeg);
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: -12vw 3vw;
  color: transparent;
  font-size: calc(35.5vw + 1em);
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
  transform-origin: center left;
  transform: perspective(20cm) rotateY(30deg);
}

.subtitle-reverse {
  margin-top: 3rem;
  margin-bottom: -15vw;
  margin-left: 20vw;
}
.subtitle-clipped--title {
  display: inline-block;
  font-size: calc(8.5vw + 1em);
  letter-spacing: -0.015em;
  margin: 0;
  transform: perspective(10cm) rotateY(-30deg);
}

.tagline {
  margin-left: 50%;
  margin-top: -28vw;
  width: 48%;
}

.poster {
  background-color: #dfefff;
  border: solid 3vw #f0efef;
  min-width: 65vw;
  max-width: 70rem;
  min-height: 35vw;
  margin: 1rem auto;
  padding-bottom: 8vw;
  background: 
    radial-gradient(1.5em 6.28571em at 1.95em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.005) 55%, rgba(255, 255, 255, 0) 55%) 0 0, 
    radial-gradient(1.5em 6.28571em at -0.45em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 55%) 1.5em 5.5em, 
    radial-gradient(2.3em 4.57143em at 2.99em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.01) 55%, rgba(255, 255, 255, 0) 55%) 0 0, 
    radial-gradient(2.3em 4.57143em at -0.69em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0.075) 55%, rgba(255, 255, 255, 0) 55%) 2.3em 4em, 
    radial-gradient(3.5em 6.28571em at 4.55em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 55%) 0 0, 
    radial-gradient(3.5em 6.28571em at -1.05em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 55%) 3.5em 5.5em, 
    radial-gradient(rgba(#102359,.85), rgba(#043b3c,.95));
  background-color: #dfefff;
  background-size: 1.5em 11em, 1.5em 11em, 2.3em 8em, 2.3em 8em, 3.5em 11em, 3.5em 11em, 100% 100%;
  background-repeat: repeat;
}
@font-face {
  font-family: "Work Sans";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/WorkSans-VF-subset.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Bild";
  src: url("https://rwt.io/_demo_fonts/bild/BildVariableV2-VF.woff2") format("woff2-variations");
  font-stretch: 60% 100%;
  font-display: swap;
}
body {
  margin: 0;
  padding: 0;
}

p {
  color: #ffffff;
  font-family: "Work Sans", Helvetica, sans-serif;
  font-size: calc( 1.5vw + 1rem );
  font-weight: 525;
  letter-spacing: -0.025em;
}

h1 {
  font-family: "Bild", Helvetica, sans-serif;
  font-stretch: 60%;
}

h2 {
  color: #dadaf0;
  font-family: "Bild", Helvetica, sans-serif;
  font-stretch: 85%;
}

.title-clipped {
  margin-left: 10vw;
}

.title-clipped--title {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IMG_8982.jpeg);
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  background-position: -12vw 3vw;
  color: transparent;
  font-size: calc(35.5vw + 1em);
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: uppercase;
  transform-origin: center left;
  transform: perspective(20cm) rotateY(30deg);
}

.subtitle-reverse {
  margin-top: 3rem;
  margin-bottom: -15vw;
  margin-left: 20vw;
}

.subtitle-clipped--title {
  display: inline-block;
  font-size: calc(8.5vw + 1em);
  letter-spacing: -0.015em;
  margin: 0;
  transform: perspective(10cm) rotateY(-30deg);
}

.tagline {
  margin-left: 50%;
  margin-top: -28vw;
  width: 48%;
}

.poster {
  background-color: #dfefff;
  border: solid 3vw #f0efef;
  min-width: 65vw;
  max-width: 70rem;
  min-height: 35vw;
  margin: 1rem auto;
  padding-bottom: 8vw;
  background: radial-gradient(1.5em 6.28571em at 1.95em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.005) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(1.5em 6.28571em at -0.45em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 55%) 1.5em 5.5em, radial-gradient(2.3em 4.57143em at 2.99em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.02) 50%, rgba(255, 255, 255, 0.01) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(2.3em 4.57143em at -0.69em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.075) 50%, rgba(255, 255, 255, 0.075) 55%, rgba(255, 255, 255, 0) 55%) 2.3em 4em, radial-gradient(3.5em 6.28571em at 4.55em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 55%) 0 0, radial-gradient(3.5em 6.28571em at -1.05em, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 55%) 3.5em 5.5em, radial-gradient(rgba(16, 35, 89, 0.85), rgba(4, 59, 60, 0.95));
  background-color: #dfefff;
  background-size: 1.5em 11em, 1.5em 11em, 2.3em 8em, 2.3em 8em, 3.5em 11em, 3.5em 11em, 100% 100%;
  background-repeat: repeat;
}
Tags: masktext effectstext masking
Previous Post

Clipped Overlapping Grid Items

Next Post

Box Shadow Patterns

Related Stories

CSS Scroll Effects
Effects

24 Free CSS Scroll Effect Examples

November 23, 2022
Collection of Free CSS 3D Text Effects
Effects

36 Free CSS 3D Text Effects

November 11, 2022
Beautiful CSS Button Hover Effects
Effects

13 Beautiful CSS Button Hover Effects for Your Website

November 5, 2022
Free Blob Effects Using CSS3
Effects

13 Free Blob Effects Using CSS3

October 31, 2022
CSS in CSS with a lot of C and S
Effects

CSS in CSS with a lot of C and S

October 12, 2020
Box Shadow Patterns
Effects

Box Shadow Patterns

October 1, 2020
Fit Text with CSS Variables
Effects

Fit Text with CSS Variables

September 29, 2020
Buttons popper
Effects

Buttons popper

September 21, 2020

Discussion about this post

Follow Us

Popular Posts

100 Creative CSS Cards

44 Free Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

49 CSS Tables

20 HTML & CSS pricing tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

55 Useful handpicked CSS Buttons with examples and demos

89 Best CSS Toggle Switches

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools