Сообщения без ответов | Активные темы Текущее время: 12 авг 2020, 07:36



Ответить на тему  [ Сообщений: 2 ] 
Вывод объявлений с красивой полосой 
Автор Сообщение

Зарегистрирован: 11 апр 2016, 17:13
Сообщения: 247

Может кому пригодится. Объявления выводятся с полоской в верхнем правом углу. В зависимости от характера объявления можно менять цвет и текст.

Изображение


CSS:

Код:

.supdiasew-benchma-esults {
width: 200px;
height: 140px;
overflow: hidden;
position: absolute;
top: -11px;
right: -11px;
}

.caselsaokem-ucubeten {
font: bold 14px Sans-Serif;
color: #fff;
text-align: center;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
padding: 5px 1px 5px 75px;
left: -150px;
top: 200px;
width: 270px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#668d04), to(#6da519));
background-image: -webkit-linear-gradient(top, #668d04, #6da519);
background-image: -moz-linear-gradient(top, #668d04, #6da519);
background-image: -ms-linear-gradient(top, #668d04, #6da519);
background-image: -o-linear-gradient(top, #668d04, #6da519);
-webkit-box-shadow: 0px 0px 3px rgba(27, 25, 25, 0.35);
-moz-box-shadow: 0px 0px 3px rgba(19, 18, 18, 0.35);
box-shadow: 0px 0px 3px rgba(45, 43, 43, 0.39);
text-transform: uppercase;
letter-spacing: 3px;
}

.caselsaokem-ucubeten:before, .caselsaokem-ucubeten:after {
  content: "";
  border-top: 4px solid #6d8608; 
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position:absolute;
  bottom: -4px;
}

.caselsaokem-ucubeten:before {
  left: 0;
}
.caselsaokem-ucubeten:after {
  right: 0;
}




HTML:

Код:

<div class="supdiasew-benchma-esults">
      <div class="caselsaokem-ucubeten">
       Продам      
       </div>
</div>



17 апр 2019, 07:06
Профиль

Зарегистрирован: 24 май 2017, 15:45
Сообщения: 30

Подскажите , а куда эти куды вставлять ? в шапку наверное ? а код CSS ?


02 июл 2019, 11:57
Профиль
Показать сообщения за:  Поле сортировки  
Ответить на тему   [ Сообщений: 2 ] 

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 6


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
cron