Текст на кнопке

Вот хотел его text-align:left ‘ом пододвинуть к самому краю кнопки, не получается. div ‘ом не желательно, так как передаю переменной Sorted значение 1 . Возможно вообще такое реализовать?

Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 22 сен 2011 в 10:20
2,683 6 6 золотых знаков 36 36 серебряных знаков 72 72 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

padding-left:0px; text-align:left; 

PS: отрицательный padding просто не обрабатывается и остается тем же.

Отслеживать
ответ дан 22 сен 2011 в 10:24
14.3k 1 1 золотой знак 21 21 серебряный знак 35 35 бронзовых знаков
Хм. а ведь в правильном направлении копал! Чуть-чуть не сообразил ведь 🙂 Спасибо Вам!
23 сен 2011 в 2:03

padding-left:-100px; я таким образом текст по умолчанию с кнопки убираю, когда к ней бг изображение цепляю. В принципе, пикселями вымеряй, я думаю можно, как вариант, сделай картинку кнопки, текст куда хочешь и повесь её вместо стандартной)

Отслеживать
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
ответ дан 22 сен 2011 в 10:56
764 4 4 серебряных знака 20 20 бронзовых знаков

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как добавить текст на картинку в html

Ранее рассмотрели как написать текст на изображении в Фотошопе, теперь же время сделать это средствами CSS.

position: absolute и position:relative

Взаимодействие блока с position: absolute с другими элементами

width (ширина) и position: absolute

Пример как написать текст на изображении.

Лес и поле белые,
Белые луга.
У осин заснеженных
Ветки как рога.

Подо льдами крепкими
Дремлют воды рек.
Белыми сугробами
Лег на крыши снег.

В небе звезды яркие
Водят хоровод.
Старый год прощается —
Входит Новый год.

Образец как наложить один текст на другой.

Пример

Обр а зец

Пример как разместить текст поверх изображения на HTML

Как написать текст на изображенииЭтот вариант приобретает всё большую популярность и возможен благодаря наложению одного слоя на другой с помощью свойств CSS

30 комментариев:

Евгений Xstroy Образец с вырастающей буквой порадовал.
Уже как-то использовал слои для сбора шапки строительного сайта, но не думал таким образом их юзать.
Спасибо за интересное решение. Анонимный Замечательная информация, большое спасибо автору. NMitra Благодарю за добрые слова! Анонимный ОГРОООМНОЕ Вам спасибо. NMitra Приятно слышать! Анонимный Замечательный блог. Рада, что его нашла. Особенно нравится манера изложения материала: систематизированно, коротко, четко и по теме — без этого словоблудия и надоевших вымученных шуточек, от которых уже подташнивает. Спасибо. NMitra Рада быть полезной. За собой стала замечать, что невольно начинаю копировать других блоггеров. Чур меня ))) Анонимный Спасибо большое многое помогло! Анонимный Спасибо за пост. Очень информативно! Еще раз спасибо �� Анонимный Как же я рад, что попал на на эту статью! Пример с лошадью — это то, что мне было нужно, прямо точь в точь. Я очень счастлив! NMitra Значит примеры размещаю не зря))) Анонимный огромное спасибо очень нужный материал разложен по полкам,
может я канешно и глупый вопрос задам но подскажите пожалуйста как выставить последний пример со всеми значениями в центральном положении
благодарю за полезный материал
NMitra Подправила код последнего примера прямо в статье. MIKTTD Во первых — Спасибо за шпаргалку! В предпоследнем примере зум буквы «а» не работает, поправьте пожалуйста (самому знаний не хватает). И еще там-же для ІЕ нужно добавить: «transform: skew(20deg)». NMitra Поправила, когда писала статью, о поддержке IE можно было только мечтать. Сейчас можно применить префикс -ms- Анонимный Почему то не работает в IE всплывающий текст. Как можно решить? Спасибо за помощь. NMitra В каком именно примере? Анонимный Спасибо большое Анонимный Самое толковое о position из всего, что я до сих пор встречал. Анонимный ужасное решение некорректно работающее в ИЕ Анонимный Спасибо за работу, достойное изложение, в закладки NMitra Благодарю за отзывы! Николай Березин четкое, предельно ясное изложение, лайк и в закладки! NMitra Спасибо! Юля Шикарный пост. Спасибо. Очень долго искала как наложить текст на картинку.. кучу сайтов пересмортрела.. то css, то php надо править, то все вместе. километры кодов и непонятно будет ли толк.. А тут все быстро и просто . Жаль что сразу не нашла эту статью))) NMitra Спасибо! Такие комментарии помогают находить силы и время, а главное желание на дальнейшее ведение блога! Сергей Ожерельев Спасибо. Никак не мог понять, как наложить слой на слой NMitra Рада помочь! Unknown А в масштабируемой картинке как сделать текст, чтобы он масштабировался вместе с картинкой на резиновом шаблоне? NMitra Пример: https://jsfiddle.net/kdtok1au/

.imgteaser
.imgteaser figcaption
.imgteaser img

Как написать текст поверх картинки CSS

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

На самом деле выполнить написания текста поверх картинки не столь трудно. Практически делается за счет свойства position и его атрибутов, а дальше идет оформление самого текста. Можно попробовать сделать по-другому, к примеру, задать блоку div фон при этом использовать ту картинку, на которой должен быть расположен текст.

Но такой способ ограничивает возможности и само применение текста поверх картинки. Поэтому лучшим вариантом будет воспользоваться свойством position . Данный элемент дает большие преимущества и полную свободу движения в указанной области, эта область обозначается свойством position: relative; . А иначе позиционирование будет происходить по отношению к браузеру.

Рассмотрим на первом примере.

HTML

CSS

Пояснение. Основному блоку приписывается значение position: relative; этим мы обозначаем область для свободного позиционирования последующих элементов в этом классе.

Далее, форматируем div в линейно–блочный элемент display: inline-block;

И последнее на что стоит обратить внимание — это position: absolute; , задан элементу .

Остальные стили идут как оформление текста.

Во втором примере используем более длинную надпись на картинке и стилизуем ее должным образом.

HTML

CSS

Ну вот незадача, мы использовали тег
— перенос строки и в итоги получили разрыв между пробелами. Это видно в примере где текст плотно прилегает краям и на вид получается не очень красиво.

Исправить эту ошибку можно по-разному. Применить, к примеру, неразрывный пробел &nbsp , что позволит нарастить промежуток.

HTML

CSS

Во втором способе применим тег … он как только жирность поменьше, но мы ее совсем уберем.

HTML

CSS

В стилях добавили новое свойство white-space: nowrap; чтобы текст находился на одной строке. На этом все, сложного думаю ничего нет.

Как добавить текст на картинку в html

Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.

Идея состоит в том, чтобы просто накладывать некоторый текст на изображение. Текст представлен в виде блоков переменной длины, предполагается что он будет расположен с левой стороны, с ровной заливкой вокруг текста. Например, как на этом изображении:

Схема документа

HTML-разметка

Конечно, было бы легче использовать div-элемент для вывода изображения в качестве фонового рисунка, но в данном случае я предполагаю, что изображение — это контент документа, и, следовательно, оно принадлежит HTML. Элемент div будем использовать в качестве контейнера для абсолютного позиционирования текста в нём.

Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом . Обернём в него текст внутри заголовка.

Будем использовать этот span для оформления текста и фона:

Проблемы

Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.

Этим новым span-ам мы зададим свойство padding:

Что на счёт семантики?

На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:

Размещаем текст поверх изображения, используя css

Некоторые находят неправильный выход: рисуют текст на картинке в графических редакторах, после чего размещают изображение с текстом в html документах. Но что делать, если текст надо заменить? Опять перерисовывать картинку? Есть более простые решения.

В результате получаем:

Суть представленного способа в том, что мы делаем div-контейнер, который будет содержать в себе картинку и текст. При этом текст мы будем позиционировать относительно левого нижнего угла контейнера.

Код html:

Код css:

• display: inline-block — нам нужен, чтобы контейнер не растягивался по ширине на всю страницу.
• position: relative — заставляет все вложенные блоки с position: absolute вести отсчёт координат своего положения не от окна браузера, а от блока .container

• display: inline-block — для того, чтобы стили, относящиеся к блочным элементам, могли быть применены к нашему тексту.
• position: absolute — для размещения блок с помощью конкретных координат: bottom, left — отступы снизу и слева (координаты) возможно вместо них использовать top (сверху) и right (справа)

Показываем описание при наведении на картинку

Показанный выше способ можно использовать для отображение текста при наведении картинку мышкой (может пригодиться для описания товаров в интернет-магазине).

Похожие публикации:

1. Как переформатировать html в mp4
2. Как подключить html
3. Как поднять текст вверх в html
4. Как поменять цвет таблицы в html

3 трюка для добавления текстуры в ваш текст с CSS и SVG

Вероятно, вы знакомы с использованием такой техники Photoshop, когда в качестве маски изображения выступает текст; это лучший известный способ добавить текстуры или даже фон изображения на ваш текст. Далее вы можете использовать этот текст в виде изображения на вашем веб-сайте; а ведь было бы здорово, если бы мы смогли наложить такой же эффект, используя HTML и CSS? Хорошие новости — мы можем!

CSS представила такие свойства как background-clip и mask-image, которые вы можете использовать для создания схожих эффектов, для которых раньше использовался Фотошоп. Кроме того, для этого вы также можете использовать SVG.

Сегодня мы рассмотрим эти опции и даже сделаем несколько простых анимаций. Если вы хотите продолжить самостоятельно, один на один с кодом, вы можете загрузить исходные файлы здесь.

Поддержка браузерами

Как и следовало ожидать, некоторые из этих свойств, которые мы будем использовать, поддерживаются не повсеместно. Это означает, что они не будут работать в браузерах вроде IE и Firefox.

Создание фонового подвижного изображения текста с помощью BACKGROUND-CLIP

Первая опция, которую мы рассмотрим, это свойство background-clip. Это свойство определяет, будет ли фон продлён за границы или нет. Оно позволяет тексту определённого элемента обрезать изображение.

HTML

Наш макет — это просто h1 с классом bgClip:

Clip Text

А теперь давайте добавим магии в CSS…

CSS

Мы добавим текстуру ночного неба к нашему изображению. Мы также убедимся, что текст отображён со сглаживаем, используя font-smoothing. Обратите внимание, что для этой работы цвет текста должен быть прозрачным, поэтому мы также используем text-fill-color:transparent.

.bgClip < background:url('../images/clouds.jpg'); background-repeat:repeat-x; background-position:0 0; font-size:200px; text-transform:uppercase; text-align:center; font-family:'Luckiest Guy'; color:transparent; -webkit-font-smoothing:antialiased; -webkit-background-clip:text; -moz-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0;

А теперь просто добавим немного анимации, чтобы сделать фон более привлекательным:

-webkit-animation:BackgroundAnimated 15s linear infinite; -moz-animation:BackgroundAnimated 15s linear infinite; -ms-animation:BackgroundAnimated 15s linear infinite; -o-animation:BackgroundAnimated 15s linear infinite; animation:BackgroundAnimated 15s linear infinite; > @keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >> @-webkit-keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >> @-ms-keyframes BackgroundAnimated to < background-position:100% 0 >> @-moz-keyframes BackgroundAnimated < from < background-position:0 0 >to < background-position:100% 0 >>

А вот и результат:

Клипуем текст с использованием SVG

Следующая техника, которую мы рассмотрим, это SVG клиппинг. Наподобие приведённому выше методу CSS, SVG также позволяет вам клиповать текст изображением, используя свойство clipPath. Обычно свойство clipPath содержит форму атрибутов, таких как круг или квадрат, но вы также можете использовать текст.

SVG

Видите, я использую HTML элемент img для клиппинга изображения.

Хотя я здесь использую .jpg, вы можете использовать другие форматы изображений или даже видео.

CSS

А теперь всё, что нам нужно, это использовать свойство clip-path для наложения на SVG контуров видимого изображения:

.svgClipped

А вот и результат:

Тест под маской с помощью MASK-IMAGE

Последняя техника, которую мы собираемся рассмотреть, — это текстурирование текст с помощью mask-image. Базовая функциональность этого свойства в том, что оно будет вырезать область текста, которая видна в соответствии с прозрачностью.

HTML

Всё, что нам нужно, это один элемент h1 обёрнутый в div:

 
Mask Text
 
 

CSS

Чтобы наложить маску на изображение с помощью текста, мы будем использовать -webkit-mask-image, который задаст изображение и мы также добавим клёвый text-shadow для улучшения вида. Наконец, я хочу внести дополнительную гладкость при эффекте наведения, когда весь текст становится видимым (просто потому что мы можем):

#maskText h1 < font-size: 200px; font-family: 'Lilita One', sans-serif; color: #ffe400; text-shadow: 7px 7px 0px #34495e; text-transform: uppercase; text-align: center; margin: 0; display: block; -webkit-mask-image: url('../images/texture.png'); -webkit-transition:all 2s ease; -moz-transition:all 2s ease; -o-transition:all 2s ease; transition:all 2s ease; >#maskText h1:hover < -webkit-mask-image: url('../images/texture-hover.png'); cursor: pointer; color: #ffe400; >

А вот и результат:

Заключение

Отлично! Вы только что научились новым трюкам с текстом. Эти навыки сберегут ваше время и отгородят вас от Фотошопа. Ещё важнее то, что они динамические (их можно менять «на лету»), в отличие от того же jpg.

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

Оставить ответ Отменить ответ

�� С 20 по 22 апреля пройдут незабываемые битвы среди кибер-гладиаторов в мире информационной безопасности!

Открыта регистрация команд по ссылке .

Как сделать картинку и текст в линию?

Как добавить див с картинкой и див с текстом в линию?

Отслеживать

задан 30 мар в 18:12

display: flex;

30 мар в 18:32

А для того, что бы картинку справа от текста делать, можно использовать - flex-direction: row-reverse

31 мар в 5:12

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

это вырезка из моего кода

ul .new__list .new__li .new__li:not(:last-child) .new__li:nth-child(2n) .new__item:first-child .new__li:nth-child(2n) .new__item:last-child .new__item .new__item-block p .new__item-block .new__item-block img .new__item-block h3 .new__item-head .new__item-button-new .new__item-button-new span .new__item-button-new:hover span @media (max-width:1600px) < .new__list.new__item-block img .new__item-block p .new__item .new__li:not(:last-child) .new__item-block h3 > @media (max-width:767px) < .new__list.new__item-block img .new__item-block p .new__list .new__item-block h3 .new__item-button-new .new__item-head .new__item-block p .new__item-block h3 > @media (max-width:576px) < .new__li.new__li:nth-child(2n) .new__item:first-child .new__li:nth-child(2n) .new__item:last-child >

Заоголовок
Текст
Подробнее
Заголовок
Текст
Подробнее
Заголовок
Текст
Подробнее