ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Вывод категорий на изображение материала в CSS

Вывод категорий на изображение материала в 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 Августа 2018 Просмотров: 1947 Комментариев: (8)
Поделиться в социальных сетях

Материал разместил
pesd0z
Похожие материалы

Оставь свой отзыв

Комментарии: 8
VIP36RUS
VIP36RUS 25 Августа 2018 22:111
0
Отлично, а то я думал чё же придумать для ценника.
VIP36RUS
VIP36RUS 25 Августа 2018 22:132
0
Лишний css
.stukopan {
border: 2px solid #b0b2b3;
width: 340px;
height: 202px;
border-radius: 3px;
}
Kosten
Kosten 25 Августа 2018 22:263
0
Поставил на всякий случай, от автора не было, но мне нужно на темном фоне сделать было, и обвод выставить.
-SAM-
-SAM- 26 Августа 2018 01:534
0
Тут в материале опять идёт ссылка на сайт клоновода-рекламщика/плагиатора-обманщика. Материал был уже выложен здесь (а до этого на сайте csomsk шло "Вид материалов архива файлов", материал id 5774 - с него и взяли были кусок кода-стиль). В этом же случае - не суть, такой "эффект" наложения в любом учебнике, к примеру, в том же htmlbook встретить можно, посему ссылка на его сайтик - до одного места, ибо "авторские" тут только его правки (плюс не кроссбраузерно прописан border-radius - не говорю уже кто изначально так прописал).
Konoplia
Konoplia 02 Января 2019 10:095
0
Как сделать, чтобы при разном расширении экрана оно было там где его зафиксировал?? При расширении 1366х768 стоит как мне надо (в самом низу постера) а если меняю допустим расширение на 1280х768 то оно уже не внизу а чуть выше.
Konoplia
Konoplia 03 Января 2019 01:336
0
???
Kosten
Kosten 03 Января 2019 02:447
0
Konoplia, под разное разрешение нужна адаптивность, а в этом случай идет, лента для вывода информаций, а больше всего категорий, что закрепляется на самом вид материале.
waak
waak 03 Января 2019 13:038
0
Цитата Konoplia ()
???

Всё очень просто поместить её в блок с картинкой блоку дать позицию релайт а этому блоку добавить
Код

bottom: 0;
left: 0;
z-index: 100;

Тем самым вы зафиксируете данный блок в низу картинки значение 0 поменяйте на то что вам нужно к примеру 10px это для того что бы блок не прям в самом низу был картинки а
margin: 11% 0 0 0px;
удалить он не нужен тут
Войдите:
avatar