How to Design Sweet Dishes Text Effect With CSS

How to design Sweet Dishes text effect with CSS. In which we are going to use Simple HTML CSS.

Namaste ????

Today we’ll learn How to design Sweet Dishes text effect with CSS. In which we are going to use Simple HTML CSS.

How to Design Sweet Dishes Text Effect With CSS Demo

How to Design Sweet Dishes Text Effect With CSS Source Code

.html file Code

Put this code between <body> Your Code Here </body> tags

<!-- Created by codinghindi.in --->
<div class="copyright">

  <a href="https://www.youtube.com/channel/UC5bkSPKJNRroCEQ7UEeFP3g?sub_confomation=1" target="_blank">Subscribe Now!</a>
</div>
<section class="header">
        <div class="title-wrapper">
            <h1 class="sweet-title">
                <span data-text="sweet">Sweet</span>
                <span data-text="dishes">Dishes</span>
            </h1>
            <span class="top-title"> Get me all the</span>
            <span class="bottom-title"> You can eat</span>
        </div>
</section>

.css file Code

Put this code between <style> Your Code Here </style> tags and put in style.css file

/*-- Created by codinghindi.in ---*/

/* Google Font  */

@import url("https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&family=Montserrat:[email protected]&family=Open+Sans&family=Poppins:[email protected]&family=Quicksand:[email protected]&family=Roboto:[email protected]&display=swap");

/*--- Main Body CSS ----*/
body {
    background: #003fa1fb;
    height: 100vh;
    font-family: sans-serif;
    background: linear-gradient(142deg, #3fa1fb 0%, #fc46a8 100%);
}

.header {
    margin: 0 auto;
    max-width: 1200px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh-4rem);
}

.title-wrapper {
    display: grid;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transform: skew(0, -10deg);
}

.top-title {
    order: 1;
    text-align: center;
    display: block;
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-top: 2rem;
    margin-left: 2rem;
}

.bottom-title {
    order: 3;
    text-align: center;
    display: block;
    color: #fff;
    font-size: clamp(1rem, 4vw, 1.5rem);
    margin-top: 2rem;
    margin-left: 2rem;
}

.sweet-title {
    order: 2;
    color: #fde9ff;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(3rem, 10vw, 6rem);
    line-height: 0.75em;
    text-align: center;
    text-shadow: 3px 1px 1px #4af7ff, 2px 2px 1px #165bfb, 4px 2px 1px #4af7ff, 3px 3px 1px #165bfb, 5px 3px 1px #4af7ff, 4px 4px 1px #165bfb, 6px 4px 1px #4af7ff, 5px 5px 1px #165bfb, 7px 5px 1px #4af7ff, 6px 6px 1px #165bfb, 8px 6px 1px #4af7ff, 7px 7px 1px #165bfb, 9px 7px 1px #4af7ff;
}

.sweet-title span {
    display: block;
    position: relative;
}

.sweet-title span:before {
    content: attr(data-text);
    position: absolute;
    text-shadow: 2px 2px 1px #e94aa1, -1px -1px 1px #c736f9, -2px 2px 1px #e94aa1, 1px -1px 1px #f736f9;
    z-index: 1;
}

.sweet-title span:nth-child(1) {
    padding-right: 2.25rem;
}

.sweet-title span:nth-child(2) {
    padding-left: 2.25rem;
}

.copyright {
  background-color: red;
  padding: 10px;
  text-align: center;
  font-family: "Poppins";
  cursor: pointer;
}

.copyright a {
  text-decoration: none;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}

How to Design Sweet Dishes Text Effect With CSS Source code download

Thank You!

Share your love
Default image
Neeraj Lamba
Articles: 38

One comment

Leave a Reply

Your email address will not be published.

I'm not a robot *Captcha loading...

  1. Hey there, I just found your site, quick question…

    My name’s Eric, I found codinghindi.in after doing a quick search – you showed up near the top of the rankings, so whatever you’re doing for SEO, looks like it’s working well.

    Thanks and keep up the great work!

5 Movies that Programmers Should Watch Best Search Engine for Developers – You.com 06 Free Website Hosting Providers for Developers You should Know Learn Programming while playing games learn about Operating systems and OS Structure Design
Secured By miniOrange