Placehold – быстрое добавление картинок

Placehold – быстрое добавление картинок

От автора: в этом уроке я хотел бы поделиться с вами инструментом, который без сомнения может пригодиться каждому верстальщику. Это сервис PLACEHOLD.IT

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

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

И здесь нам может помочь сервис placehold.it, благодаря которому можно на лету генерировать в коде картинки необходимых параметров.

Сервис крайне прост в использовании и имеет минимум необходимых настроек для управления параметрами картинок. Давайте их рассмотрим.

Для того, чтобы вставить на страницу картинку размерами, скажем 350х150, нам достаточно прописать следующую строку кода:

<img src="//placehold.it/350x150" alt="">

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

При этом на картинке мы сразу же видим ее размеры (350х150), что очень удобно при последующем добавлении реальных картинок вместо временных.

Как Вы уже догадались, в пути к картинке после url самого сервиса мы как раз и указали размеры картинок. Первое число задает ширину изображения, второе – высоту. Высота является необязательным параметром и, если мы ее опустим, тогда получим квадратную картинку:

<img src="//placehold.it/250" alt=""> <!—квадрат со стороной 250 пикселей -->

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

Цвета картинки задаются после размеров. Мы можем управлять фоновым цветом и цветом текста, которые задаются в следующем порядке: фоновый цвет/цвет текста. Для получения картинки розового цвета с белым текстом можно указать следующие параметры:

<img src="//placehold.it/250x150/e8117f/fff" alt="">

В итоге получим следующее изображение:

Также мы можем управлять форматом картинки. По умолчанию картинки генерируются в формате GIF, но мы можем «попросить» отдавать нам картинки формата JPG или PNG. Для этого достаточно указать расширение картинки, к примеру, при указании ее размеров:

<img src="//placehold.it/250x150.png/e8117f/fff" alt="">

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

<img src="//placehold.it/250x150/000/fff&text=1" alt="">

В итоге получим:

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

Удачи и до новых встреч!

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. web11

    спасибо за интересный сервис
    очень оригинальная идея

  2. Lev

    Спасибо за знакомство с еще одним отличный сервисом для верстки. Но хотел бы также поделится ссылкой на тот которым я пользовался до сих пор.
    http://lorempixel.com/
    Его особенность в том, что можно указать категорию картинок. То есть к примеру если сайт о спорте, то ссылка на картинку будет иметь вид http://lorempixel.com/400/200/sports/text/. Где цифры это размер картинки, дальше категория, и потом если нужно, то и текст на картинке.
    Но в таком виде, после каждого обновления страницы, будет другая картинка. Если же нужно чтобы она не менялась, то просто добавляем еще один параметр (номер картинки), к примеру: http://lorempixel.com/400/200/sports/6/Text/

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree