Имиджевые значки/этикетки на углу. Какая библиотека (jQuery?) была бы лучше?

Я пытался выяснить, как именно они называются, и какие библиотеки вы можете использовать для их реализации. Или, может быть, есть прямое решение CSS, которого я не видел?

В основном я хочу добавить метку в угол некоторых моих изображений. Я хочу, чтобы это выглядело как кусок цветной ленты с надписью «Новый» или «Бесплатный». Но я никак не могу понять, как называются эти ленты. Вот пример (примечание: метка находится в правом верхнем углу).

изменить: я новый пользователь, поэтому не могу публиковать изображения. Хромой. Но я понимаю принцип защиты от спама, стоящий за этим. Вместо этого, вот ссылка на пример слайд-шоу с пометкой «новое» в углу:

http://www.slidesjs.com/

Поиск в Google нашел «значки», но они больше похожи на значки iPhone, а это не то, что мне нужно. Вот как они выглядят. Обратите внимание на красные значки в правом верхнем углу двух разделов текста ниже.

изменить: удалено второе изображение.

Я также нашел эту ссылку во время поиска, но значок, используемый в примере, уродлив.

Автоматически размещать значок над углом изображения.

Поэтому мне интересно, придется ли мне создавать свой собственный или есть плагин или готовое решение. Заранее спасибо!


image html jquery css badge
person Tyler Youngblood    schedule 30.07.2011    source источник
comment
вот ссылка на значки в стиле iPhone. blogupstairs.com/badger-ios-style-badges-jquery-plugin   -  person Tyler Youngblood    schedule 30.07.2011

Ответы (3)


arrow_upward
2
arrow_downward

Вам не нужен Javascript для этого. Вы можете сделать это с помощью старого доброго css. Что-то в духе

#badge{
    position: absolute;
    top: 0p;
    left: 0px;
}

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

<div>
    <img id="badge" src="..." />
    <img src="..." />
</div>

О, контейнеру div тоже нужен position: relative;, чтобы position: absolute внутри него работало. Вот ссылка на jsfiddle с изображениями из слайд-шоу, которое вы тоже связали со мной:

http://jsfiddle.net/ky2Ac/

Это выглядит немного по-другому, потому что они добавили белую рамку вокруг своего изображения, но это достаточно легко сделать. Дело в значке :) Теперь осталось найти хорошее изображение с прозрачным фоном для значка (я тоже не знаю, как его еще назвать).

person Paul    schedule 30.07.2011
comment
Спасибо! После того, как я прочитал ваш ответ, мне пришло в голову, что вы должны были использовать что-то вроде Firebug для проверки слайд-шоу ... что я мог (должен был) сделать. Но мне почему-то это в голову не пришло! У меня был один из тех моментов, когда ладонь упирается в лоб. :D - person Tyler Youngblood; 31.07.2011
comment
Для всех, кто придет к этому, вот рабочий пример: jsfiddle.net/jshado1/G5pMZ - person Jakob Jingleheimer; 22.03.2013

arrow_upward
0
arrow_downward

Простой способ сделать это — разместить баннер как изображение в div, а затем картинку как background-image в div.

HTML

<div>
    <img src="http://assets.visrez.com/sites/gibsonhotel/Includes/images/corner_banner.png" />
</div>

CSS

div{background:url(http://www.health-for-dogs.com/wp-content/uploads/2011/05/old-dog-150x150.jpg) no-repeat;}

http://jsfiddle.net/jasongennaro/25cFh/1/

person Jason Gennaro    schedule 30.07.2011
comment
Спасибо за пример кода! Итак, в вашем примере вы сделали или нашли эту ленту? Кроме того, можно ли изменить css, чтобы сместить ленту, чтобы края выходили за край изображения? Лента выглядит так, как будто она предназначена для того, чтобы свисать с краев. Я слаб в CSS, так что эти ответы очень помогли! - person Tyler Youngblood; 31.07.2011
comment
@Тайлер. Я просто нашел ленту и изображение через поиск и использовал для примера. Вы можете сделать свою собственную ленту больше, чем изображение, и сделать так, чтобы она свисала с краев. К вашему сведению, для работы в этом примере он должен быть прозрачным, поэтому .png или .gif. - person Jason Gennaro; 31.07.2011
comment
Хорошо спасибо. И если я правильно понимаю, если значок выходит за края на 5 пикселей, вам просто нужно сместить фоновое изображение, чтобы оно было на 5 пикселей вниз и на 5 пикселей правее (для верхнего левого значка), верно? Если это правильно, то не нужно отвечать. Просто проверяю, правильно ли я понимаю. Спасибо! - person Tyler Youngblood; 31.07.2011

arrow_upward
0
arrow_downward

Простой CSS.

Создайте элемент с изображением баннера, поместите его в корень вашего HTML-кода (т.е. внутри тега <body>, но не внутри чего-либо еще), затем настройте его следующим образом:

.banner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
}

Объяснение:

position:fixed - это устанавливает его так, чтобы его положение было зафиксировано в окне браузера. Вы можете прокручивать остальную часть страницы, и баннер не будет двигаться. (Если вы предпочитаете, чтобы он перемещался вместе с остальной частью страницы, измените его на position:absolute;)

top:0 и right:0 — делают именно то, что должны делать, и размещают баннер в правом верхнем углу страницы. Не стесняйтесь использовать bottom и left, если хотите. Если вы хотите сделать небольшой отступ, установите что-то вроде этого right:5px; (обратите внимание на px для пикселей).

z-index:1000 — это может быть любое значение, или даже может быть вообще опущено, в зависимости от того, как организована остальная часть вашей страницы. Идея состоит в том, чтобы баннер отображался перед любым другим контентом, который вы могли разместить на странице.

Надеюсь, это поможет.

person Spudley    schedule 30.07.2011
comment
Спасибо, Спадли, ваше объяснение CSS очень помогает и помогло мне более полно понять другие ответы. Спасибо! - person Tyler Youngblood; 31.07.2011