Home » Creative Web Typography Style Using HTML and CSS

Creative Web Typography Style Using HTML and CSS

by techmidpoint
Creative-Web-Typography-Style-Using-HTML-and-CSS

Creative Web Typography Style Using HTML and CSS

Hello, guys In this tutorial I am going to create a creative web typography style using HTML and CSS. Here you can see three different style typography on screen. First, you have to choose a suitable background. You can add a direct image or you can add CSS background style in the body section.

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Creative web typography style</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <section class="main">
           <h2 class="cs-text"><span>Time</span> <span>for</span> <span>Design</span></h2>
        </section>
    </body>
</html>

CSS

body{
    background: url(bg.jpg);
  background-size: cover;
  font-family: arial;
}

.container > header h1,
.container > header h2 {
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.cs-text {
    width: 660px;
    margin: 120px auto 30px;
    cursor: default;
    transform: skewY(-12deg);
    text-align: center;
}

.cs-text span {
    display: block;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 6px;
   
     
}

.cs-text span:first-child {
    font-size: 100px;
    letter-spacing: 96px;
    text-shadow: 6px 6px 0px rgba(255,255,255,0.3);
}

.cs-text span:nth-child(2) {
    font-weight: 400;
    text-transform: none;
    font-style: italic;
    line-height: 60px;
    font-size: 67px;
    color: #392f2c;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    position: relative;
}

.cs-text span:nth-child(2):before,
.cs-text span:nth-child(2):after {
    content: '';
    width: 240px;
    height: 2px;
    background: #392f2c;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.cs-text span:nth-child(2):before {
    left: 0px;
}

.cs-text span:nth-child(2):after {
    right: 0px;
}

.cs-text span:nth-child(3) {
    font-size: 8em;
    text-shadow: 
          2px 2px 0 #645f59,
          4px 4px 0 #fff,
          6px 6px 0 #645f59,
          8px 8px 0 #fff,
          10px 10px 0 #645f59,
          12px 12px 0 #fff,
          14px 14px 0 #645f59,
          16px 16px 0 #fff,
          18px 18px 0 #645f59,
          20px 20px 0 #fff,
          22px 22px 0 #645f59,
          24px 24px 0 #fff;      
}

For More Tutorials Please Click Here

You may also like

Leave a Comment