Как сделать резиновый текст в css

Как сделать резиновый текст?

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

Если это невозможно реализовать через обычный html и css то прошу помочь небольшим js скриптом.

Прошу вашей помощи в реализации данного вопроса.

Ответы (4 шт):

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

Это возможно сделать средствами css. Демонстрация работы

Вариант еще проще я встретил вот здесь: Можно ли сделать резиновый шрифт в css?

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

Что означает резиновый фон: зачем он нужен и как сделать средствами css

Доброго времени суток всем, кто прямо сейчас читает мой блог! Каждый из вас хоть раз, но встречался с такими сайтами, на которых при масштабировании фоновое изображение или другие важные графические объекты «прятались» за границами экрана.

В некоторых случаях это критично для пользователя, ведь полезная информация просто исчезает. Именно поэтому в текущей статье я расскажу, как сделать резиновый фон css — средствами, раскрою маленькие хитрости и конечно же приведу контрольные примеры. Думаю, пришло время приступать к обучению!

Что такое резиновый фон и как им пользоваться?

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

Как же его можно заприметить на веб-сервисах? Очень просто. При увеличении или уменьшении окна браузера внедренные объекты (текст, рисунки, кнопки и т.д.) будут сдвигаться, подстраиваясь под размер вкладки.

В этот же момент резиновое изображение почти не будет видоизменяться. А если масштабируемое окно сохранит пропорции, то фон останется идентичен и только размер изображения будет колебаться.

Каким образом создается резиновый фон?

Каким образом создается резиновый фон

Существует несколько способов «превращения» обычного изображения в растягиваемое. Все они используют одно и то же свойство. Отличие состоит только в том, что второй способ, о котором я расскажу, появился благодаря css3.

Главные инструменты, которые используются в обеих вариантах, это background-size и background.

Первое свойство управляет размером изображения, а второе задает сам путь к картинке. Также через background можно указать повторяемость и пролистывание вместе с контентом.

Итак, начнем с первого и более старого варианта.

Растягиваемость картинки устанавливается при помощи процентов. Так, строка background-size: 100% растянет изображение на все окно браузера вне зависимости от его размера.

В некоторых случаях можно увидеть и такой код: background-size: 100% auto.

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

Пример резинового фона

Для наглядности разберем пример. Для сайта был сверстан блок с текстом и задано резиновое изображение.

Обратите внимание на такие моменты:

  1. background: url (http://www.zastavki.com/pictures/originals/2012/Nature_Flowers_Big_flowers_of_a_sunflower_036583_.jpg) no-repeat center center fixed. В этой строчке кода я описал изображение как фиксированное (оно не будет скролироваться вместе с содержимым веб-страницы) и не повторяющееся.
  2. Что касается слов centercenter, то они указывают, какая именно часть изображения всегда будет видна вне зависимости от масштаба. Первый параметр отвечает за левый и правый край рисунка, а второй – верхний и нижний край. Таким образом можно закрепить изображение так: leftbottom.
  3. В этом случае указанные границы всегда будут видны пользователю и само фоновое изображение сместиться. Также можно задавать данные значения через пикселы. Например, вместо первого параметра пишем 150px и тогда изображение сдвинется вправо на указанное число единиц.
  4. margin: 4% 4% 4% 4%. Такой способ указания отступов позволит даже в маленьком окне браузера сохранить расстояние между краями вкладки и блоком с текстом.

Выбирайте картинки только большого размера и хорошего качества, чтоб при масштабировании фон не размывался.

Во втором способе создания резинового фона используется ключевое свойство cover, которое появилось в спецификации css3.

Замените у background- size параметры 100% auto на cover и оцените результат.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *