Typography with Text

Developer
Dang Van Thanh
Size
2,587 Kb
Views
22,264
  1. Typography with Text Previews
  2. Typography with Text HTML Codes
  3. Typography with Text CSS Codes

How do I make an typography with text?

Typography text with css3 transform skew. What is a typography with text? How do you make a typography with text? This script and codes were developed by Dang Van Thanh on 13 September 2022, Tuesday.

Typography with Text Previews
IQ Test

Typography with Text - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typography with Text</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #34495e;
}
h1 { text-align: center; margin: 0 0 1em;
}
h1:before, h1:after { content: ""; display: table;
}
h1:after { clear: both;
}
h1 span { color: #ecf0f1; display: block; float: left; padding: 0.3em; font-size: 2.5em; text-transform: uppercase; text-shadow: 0 1px 1px white, 0 2px 2px white, 0 3px 3px white;
}
.skewX span:nth-of-type(odd) { background-color: #e74c3c; transform: skewX(-10deg);
}
.skewX span:nth-of-type(even) { background-color: #c0392b; transform: skewX(10deg);
}
.skewY span:nth-of-type(odd) { background-color: #3498db; transform: skewY(-10deg);
}
.skewY span:nth-of-type(even) { background-color: #2980b9; transform: skewY(10deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1 class="skewX"> <span class="char1">h</span> <span class="char2">e</span> <span class="char3">l</span> <span class="char4">l</span> <span class="char5">o</span> <span class="char6">w</span> <span class="char7">o</span> <span class="char8">r</span> <span class="char9">l</span> <span class="char10">d</span>
</h1>
<h1 class="skewY"> <span class="char1">h</span> <span class="char2">e</span> <span class="char3">l</span> <span class="char4">l</span> <span class="char5">o</span> <span class="char6">w</span> <span class="char7">o</span> <span class="char8">r</span> <span class="char9">l</span> <span class="char10">d</span>
</h1>
</body>
</html>

Typography with Text - Script Codes CSS Codes

body { background-color: #34495e;
}
h1 { text-align: center; margin: 0 0 1em;
}
h1:before, h1:after { content: ""; display: table;
}
h1:after { clear: both;
}
h1 span { color: #ecf0f1; display: block; float: left; padding: 0.3em; font-size: 2.5em; text-transform: uppercase; text-shadow: 0 1px 1px white, 0 2px 2px white, 0 3px 3px white;
}
.skewX span:nth-of-type(odd) { background-color: #e74c3c; transform: skewX(-10deg);
}
.skewX span:nth-of-type(even) { background-color: #c0392b; transform: skewX(10deg);
}
.skewY span:nth-of-type(odd) { background-color: #3498db; transform: skewY(-10deg);
}
.skewY span:nth-of-type(even) { background-color: #2980b9; transform: skewY(10deg);
}
Typography with Text - Script Codes
Typography with Text - Script Codes
Home Page Home
Developer Dang Van Thanh
Username dangvanthanh
Uploaded September 13, 2022
Rating 3
Size 2,587 Kb
Views 22,264
Do you need developer help for Typography with Text?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dang Van Thanh (dangvanthanh) Script Codes
Name
Simple Player MP3
Long Shadow CSS3 in Sass
Pure CSS Off Canvas Icon
CSS Triangles in Sass
Navigation Responsive with Transition
Media Queries Sass Mixin
Simple Carousel Pure CSS
Equal Height Block of Element
Long Shadow Mixin in Sass
Translate in CSS3 2D Transform
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!