creating note / note field

Question

creating note / note field

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (2 votes)

2

I would like to know how these fields are created, I created an example, but I do not know if that is how it is actually created. Here is 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>

Would you like to reduce the amount of code and get that same effect?

html css

asked by anonymous 25.08.2018 / 04:45

3 answers

2

The code reduction option is to use 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>

25.08.2018 / 05:27

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>

25.08.2018 / 14:27

ks.test and p-value 2.2e-16 SQL query taking too long and returning a Time Out error

score 3 · Accepted Answer

There are 'n' ways, if you are only thinking about the visual issue, you can use border-left to put that green 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>