General / Posts /

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

53
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: 42597    

4 Answers

0

Thank you for being so helpful, Sir! 

Jin
  one year 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 months ago
0

Thanks

The tech industry in 2024 is under pressure to optimize resources. Technology and data leaders are asked to integrate more data to support new AI-driven features while simultaneously being forced to reduce costs and headcount. Judging by the recent layoffs at a.o. Google, Amazon, Meta, Twitch, Spotify, and Discord, even the largest tech companies are not immune to this trend toward increased efficiency.

ElianaEspeche   29 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   11 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.

      ##
▲