Вывод объявлений с красивой полосой

Работа с шаблонами smarty, html и javascript

Вывод объявлений с красивой полосой

Postby Д митрий » 17 Apr 2019, 07:06

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

Image


CSS:

Code: Select all

.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:

Code: Select all

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

Д митрий
 
Posts: 247
Joined: 11 Apr 2016, 17:13

Re: Вывод объявлений с красивой полосой

Postby Сергей » 02 Jul 2019, 11:57

Подскажите , а куда эти куды вставлять ? в шапку наверное ? а код CSS ?
Сергей
 
Posts: 18
Joined: 24 May 2017, 15:45


Return to Шаблоны и индивидуальный дизайн

Who is online

Users browsing this forum: No registered users and 2 guests