w3tweaks
  • 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
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • 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
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home Effects
Masked & Skewed

Masked & Skewed

W3TWEAKS by W3TWEAKS
September 30, 2020
in Effects
0

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

CSS in CSS with a lot of C and S

CSS in CSS with a lot of C and S

October 12, 2020
3.2k
Box Shadow Patterns

Box Shadow Patterns

October 1, 2020
3.3k

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

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

CSS in CSS with a lot of C and S

CSS in CSS with a lot of C and S

by W3TWEAKS
October 12, 2020
0
3.2k

Giulia Cardieri crafts a cascade of Cs and Ss with SCSS. Phew! See the Pen CSS in CSS with a...

Box Shadow Patterns

Box Shadow Patterns

by W3TWEAKS
October 1, 2020
0
3.3k

Manan Tank shares a selection of fun patterns: "Each pattern is created using a single div, each square or circle...

Fit Text with CSS Variables

Fit Text with CSS Variables

by W3TWEAKS
September 29, 2020
0
3.2k

Fit text to the viewport with CSS variables! All you need is to know the number of characters, which a...

Buttons popper

Buttons popper

by W3TWEAKS
September 21, 2020
0
3.2k

These unassuming buttons all have a surprise inside! Click for a little pop of particle fun, from Louis Hoebregts. See...

Next Post
Box Shadow Patterns

Box Shadow Patterns

Discussion about this post

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
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube

Welcome Back!

Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In