creating note/observation field

Asked

Viewed 126 times

2

I would like to know how these fields are created, I created an example, but I do not know if this is really how it is created. Follow an example of what I created:

.nota {
        	background-color: #CCC;
            width: 500px;
            height: 50px;
            font-family: tahoma, arial;
            font-weight: 100;
}
.cor-inicio-nota {
        	background-color: #0F0; 
            width: 5px;
            height: 50px;
            float: left;
}
.texto-nota {
        	width: 495px;
            height: 50px;
            background-color: #FF0;
            display: inline-block;
            text-indent: 15px;
}
<!DOCTYPE html>
<html>
    <head>
        <title>teste</title>
    </head>
    <body>
        <div class="nota">
    	  <div class="cor-inicio-nota">	
    	  </div>
        <div class="texto-nota">
        	<p><b>Nota:</b> observações importantes irão aqui...</p>
        </div>
        </div>
    </body>
</html>

You could reduce the amount of code and get that same effect?

html css

  • I thought maybe just two div, to div .texto-nota contained within the div .nota and apply in div .texto-nota one float-right and set the background color of the div that contains.

3 answers

3


There are 'n' ways, if you’re only thinking about the visual issue, you can use a border-left to put that green one on the left.

div {
  background: #FF0;
  border-left: 5px solid #0F0;
  font-family: tahoma, arial;
  padding: 14px;
}
<div>
  <b>Nota:</b> observações importantes irão aqui...
</div>

  • 1

    Dude, that narrowed it down considerably and got the same result. That’s exactly what!

  • 1

    A lot of dough, but you could still take a line of CSS, and it’s not the font-family :)

2

The code reduction option is to use the linear-gradient:

.nota{
      background-image: linear-gradient(to right, #0F0 2%, #FF0 2%);
      width: 500px;
      height: 50px;
      display: flex;
      align-items: center;
    }
.nota p{
      font-family: tahoma, arial;
      font-weight: 20px;
      margin-left: 20px;
    }
<!DOCTYPE html>
<html>
<head>
<title>teste</title>
</head>
<body>
  <div class="nota">
    <p><b>Nota:</b> observações importantes irão aqui...</p>
  </div>
</body>

  • I’ll take a check to see how this linear-gradient works =D

2

An option using linear-gradiente to save another line of css :)

div {
    padding: 1rem;
    background-image: linear-gradient(to right, #0f0 0px, #0f0 5px, #ff0 5px);
}
  <div>
    <b>Nota:</b> observações importantes irão aqui...
  </div>

  • 1

    good! only the font-family that crucial it could not stand without, but still would reduce a line ;)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.