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

I'm trying to create a a small box with a gradient background next to my header but it doesn't seem to work – Html

Here’s the the html
I created the myIcon div so that I can style it into a box but it doesn’t seem to appear in the output

h1 {
  font-family: 'sticky notes';
  font-weight: 500;
  height: 50px;
  background-image: linear-gradient(45deg, red, orange, yellow);
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  padding: 43px;
  text-align: center;
}

.myIcon {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, red, orange, yellow);
  margin: 0;
  padding: 0;
  display: inline;
}
<div class="headers">
    <h1><div class="myIcon"></div>STICKY NOTES</h1>
</div>
Tags:

2

Answers


  1. 0

    you can try this:

        .header 
    {
        display: flex;
        align-items: center;
    }

    .box 
    {
        width: 50px;
        height: 50px;
        background: linear-gradient(to bottom, #00bfff, #1e90ff);
        margin-left: 20px;
    }
    <div class="header">
    <h1>Your Header</h1>
    <div class="box"></div>
</div>
    Login or Signup to reply.
  2. 0

    The problem is your .myIcon div has a display: inline property. If you display an element as inline any height and width properties will have no effect

    Try to display as inline-block instead of inline.

    h1 {
  font-family: 'sticky notes';
  font-weight: 500;
  height: 50px;
  background-image: linear-gradient(45deg, red, orange, yellow);
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  padding: 43px;
  text-align: center;
}

.myIcon {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, red, orange, yellow);
  margin: 0;
  padding: 0;
  display: inline-block;
}
    <div class="headers">
    <h1><div class="myIcon"></div>STICKY NOTES</h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search