General / Posts /

How could I mimic marvel comic book style font with CSS?

54
I am trying to do a pure CSS logo on a marvel themed slots games site for the logo - you think it's possible to come up with the code that doesn't involve images?
marvelslots  11 years ago   viewed: 41693    

3 Answers

0

Thank you for being so helpful, Sir! 

Jin
  8 months ago
0

Hello,

Yes, it's definitely possible to create a logo using pure CSS without images! Here’s a simple example of a Marvel-themed logo using HTML and CSS. This example uses text and some basic styling to create a logo feel.

geometry dash lite

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="styles.css">

    <title>Marvel Themed Logo</title>

</head>

<body>

    <div class="logo">

        <span class="marvel">MARVEL</span>

        <span class="slots">SLOTS</span>

    </div>

</body>

</html>

html 1


Open on canvas

CSS (styles.css)

css


Copy

body {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background-color: #20232a;

    margin: 0;

}


.logo {

    font-family: 'Arial', sans-serif;

    text-align: center;

}


.marvel {

    font-size: 4rem;

    color: #e62429; /* Marvel red */

    text-shadow: 2px 2px 0px #fff, 3px 3px 0px #000;

    font-weight: bold;

}


.slots {

    font-size: 2rem;

    color: #f0c040; /* Gold color */

    display: block;

    text-shadow: 1px 1px 0px #000;

    margin-top: -20px; /* Overlap the words slightly */

}

johnstone
  5 days ago
-1
Have you looked into CSS3 custom fonts? Essentially, find a font file you like, download it, and in your css file, have the following rules:

@font-face {
    font-family: 'your_comic_font';
    src: url('comic_font.woff');
}

.your_logo_div {
    font-family: your_comic_font;
    font-size: 40px;
}

Extras:
You can learn more about font-face in this thread: http://stackoverflow.com/questions/11002820/why-should-we-include-ttf-eot-woff-svg-in-a-font-face
Milo   10 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:

    • If your question is related to the General, click:

      Ask new question: General

    • Otherwise navigate to one of the following forum categories, and post your question there.

      ##
▲