Question 368209 in Html Question posted in
Some basic documentation can be found here.

Html – I need some help to create a logo and to be inverted in css

there is this logo, from Mccan Design enter image description here

and is somehow inverted, and I’m trying to copy the style but I’m new at this and not sure what to do.
I’ve created the logo in Illustrator and saved it as .svg (not sure if any of the options when saving .svg needs to be changed) and in index.html I’m adding the logo as img (if I add it as svg code it breaks other functionalities):

<div id="logo">
<img class="title my-5" src="image/marketing-logo.svg" alt="Marketing">
</div>

and in css:

.logo  {
    filter: invert(88%) sepia(91%) saturate(1%) hue-rotate(257deg) brightness(107%) contrast(101%);
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}

but it’s not working..

Thanks in advance

Tags:

2

Answers


  1. 0

    You are using style with class selector

    1.Either change <div id="logo"> to <div class="logo">

    or in the style use # (id) selector

    #logo  {
    filter: invert(88%) sepia(91%) saturate(1%) hue-rotate(257deg) brightness(107%) contrast(101%);
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}
    Login or Signup to reply.
  2. 0

    I checked your code and found some issues. First of all, your style name is .logo and it will affect to class="logo", not id="logo". After then, you can’t see your svg logo yet because your filter value is too brightness, it’s 107% so it will fully hide svg logo with white color so I changed it to 50%. Or you can change other params of filter.

    I provide same code.

    <html>
    <style>
        .logo  {
            /* You can adjust brightness value if you want */
            filter: invert(88%) sepia(91%) saturate(1%) hue-rotate(257deg) brightness(50%) contrast(101%);
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translate(-50%, 0);
        }
    </style>

    <body>
        <div class="logo">
            <img class="title my-5" src="logo.svg" alt="Marketing">
        </div>
    </body>
</html>

    It will show like below image.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search