» »

Вывод категорий на изображение материала в CSS

Вывод категорий на изображение материала в CSS

Привет, сегодня я от нечего делать написал простейший вывод категорий на изображения, вместо категорий можно писать что угодно и как угодно, но скрипт задумал именно под них. Возможность вывести категорию на изображение стало распространено, что теперь вы самостоятельно можете сделать при помощи стиля CSS.

Я написал комментарии к каждому из свойств в CSS, так что будет легко новичкам.

Как установить скрипт?

Для начало кинем код что ниже, выше кода изображений в материале или виде материалов:

Код
<div class="c0decat">Категория: c0de18.icu</div>

А вот это уже в таблицу стилей:

Код
.c0decat {
  position: absolute;
  margin: 11% 0 0 0px;
  background-color: #bf501d;
  border-radius: 0 3px 3px 0;
  font-family: Arial;
  padding: 1px;
  padding-right: 4px;
  padding-left: 2px;
  color: #f7f7f9;
  border: 3px solid #d7501d;
}

.stukopan {
  border: 2px solid #b0b2b3;
  width: 340px;
  height: 202px;
  border-radius: 3px;
}

Демонстрация
25.08.2018 Просмотров: 293 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
VIP36RUS
VIP36RUS 25.08.2018 22:111
0
Отлично, а то я думал чё же придумать для ценника.
VIP36RUS
VIP36RUS 25.08.2018 22:132
0
Лишний css
.stukopan {
border: 2px solid #b0b2b3;
width: 340px;
height: 202px;
border-radius: 3px;
}
Kosten
Kosten 25.08.2018 22:263
0
Поставил на всякий случай, от автора не было, но мне нужно на темном фоне сделать было, и обвод выставить.
-SAM-
-SAM- 26.08.2018 01:534
0
Тут в материале опять идёт ссылка на сайт клоновода-рекламщика/плагиатора-обманщика. Материал был уже выложен здесь (а до этого на сайте csomsk шло "Вид материалов архива файлов", материал id 5774 - с него и взяли были кусок кода-стиль). В этом же случае - не суть, такой "эффект" наложения в любом учебнике, к примеру, в том же htmlbook встретить можно, посему ссылка на его сайтик - до одного места, ибо "авторские" тут только его правки (плюс не кроссбраузерно прописан border-radius - не говорю уже кто изначально так прописал).
avatar