Как создать этот тип div (Emboss), используя HTML и CSS? - PullRequest
Новая
       40

Как создать этот тип div (Emboss), используя HTML и CSS?

0 голосов
/ 27 апреля 2020

Я хочу создать тисненую часть этого элемента, как показано ниже Pi c. Пожалуйста, помогите мне с этим ...

Нажмите здесь для изображения

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020 

.time-of-year {
  color: #555;
  font-size: 24px;
  margin: 100px 75px 10px 75px;
  padding: 15px 20px;
  position: relative;
  text-align: center;
  width: 200px;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.time-of-year .tooltip {
  background: #ffffe0;
  border: 1px solid #d1d1d1;
  border-radius: 3px;
  top: 100%;
  font-size: 20px;
  display: block;
  left: -50px;
  opacity: 0;
  padding: 15px;
  position: absolute;
  width: 320px;
}

/* This is the grey triangle behind the yellow one that makes the border continuous */
.time-of-year .tooltip:before {
  top: -42px;
  content: " ";
  display: block;
  height: 20px;
  left: 161px;
  position: absolute;
  border-color: transparent transparent #a9a9a9 transparent;
  border-style: solid;
  border-width: 11px;
}


/* Yellow triangle */
.time-of-year .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-bottom: solid #ffffe0 10px;
  top: -10px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}


.time-of-year:hover .tooltip {
  opacity: 1;
}
  <div class="time-of-year">
  Hover over me!
      <div class="tooltip">Using this filter allows you to view all photos that were taken in a particular month.</div>
  </div>

Это то, что вы ищете?

0 голосов
/ 27 апреля 2020

как это? 

 .emboss{

        width: 445px;
        height: 191px;
        box-shadow: inset 5px 5px 5px 0 #e9f0b7, inset -5px -5px 5px #7b6c51;
        background-image: url("box.jpg");
        background-repeat: no-repeat, repeat;
        background-position: center;
        margin-bottom: 8px;
        -moz-box-shadow: inset 5px 5px 5px 0 #e9f0b7, inset -5px -5px 5px #7b6c51;
        -webkit-box-shadow: inset 5px 5px 5px 0 #e9f0b7, inset -5px -5px 5px #7b6c51;
        box-shadow: inset 5px 5px 5px 0 #e9f0b7, inset -5px -5px 5px #7b6c51;

    }

введите описание изображения здесь

...