| Главная » Статьи » Оформление сайтов |
Здравствуйте дорогие друзья, помните статью под названием "А вы знаете как оптимизировать изображения на блоге?" в которой я упомянул про оформление фотографий блога в стиле фотокарточек Polaroid: Так вот, ниже я решил выложить готовый HTML-CSS код данного решения, вдруг кто-то из вас дорогие читатели захочет оформить свои фотографии или картинки блога в таком стиле, поэтому приступим! Шаг 1 - Установим HTML Для этого необходимо при добавлении новой записи на блог, установить в нужное место статьи следующий HTML код: Код <div class="content-foto"> <img src="ссылка на картинку" alt="описание картинки" /> <div> текст под картинкой</div> </div> К примеру на WordPress это выглядит вот так! Шаг 2 - Установим CSS Теперь в файл с CSS стилями вашего блога, в самый низ необходимо скопировать вот такой код и сохранить файл: Код .content-foto { float:right; width:33%; overflow:hidden; margin: 8px 0px 10px 35px; padding:2% 2% 2% 2%; font: 15px Verdana, Arial, Helvetica; font-style: oblique; line-height: 1.6; text-align:center; box-shadow:0 0 2px #b8b9b9; border-radius:3px; } .content-foto img { width:100%; margin-bottom: 5px; } В данных стилях советую обратить внимание на значение width:30%; и padding:2% 2% 2% 2%; и изменять их под свой дизайн блога, возможно вам придётся заменить проценты (30%) на пиксели (250px;). Я бы закончил на этом данную статью, но директор блога снова на меня орёт, что надо более детально раскрыть смысл данного кода. Картинка по центру страницы Для этого HTML код мы оставим прежним, а CSS стили поменяем на следующие: Код .content-foto { float:left; width:100%; overflow:hidden; padding:35px 0px 35px 0px; font: 15px Verdana, Arial, Helvetica; font-style: oblique; line-height: 1.6; text-align:center; } .content-foto img { padding:15px 15px 45px 15px; box-shadow:0 0 2px #b8b9b9; border-radius:3px; } .content-foto div { margin: -40px 0px 0px 0px; } Текст под картинкой И безусловно для тех кто любит простоту, но желает оставить описание картинки под ней, HTML код прежний, а CSS стили следующие: Код .content-foto { float:left; width:100%; overflow:hidden; padding:35px 0px 35px 0px; font: 15px Verdana, Arial, Helvetica; font-style: oblique; line-height: 1.6; text-align:center; } .content-foto img { padding:0px 0px 5px 0px; } Как говориться экспериментируйте, возможно вы захотите поменять тень вокруг ячейки box-shadow:0 0 2px #b8b9b9; на рамку border: 1px solid #D8E0E5; и тогда визуально оформление картинки будет выглядеть уже иначе:  Если возникли вопросы и предложения, не стесняйтесь, пишите о них ниже в комментариях, исполнительный директор обязательно на них ответит! Источник: http://web-dm.ru/blog_sovety/img/1/kartinki_dlya_bloga_v_stile_fotokartochek.jpg | |
| Просмотров: 363 | Комментарии: 7 | | |
| Всего комментариев: 7 | |
|
Это решение никак не повлияет на уникальность и не уникальность картинки, всё зависит от самой картинки, как она была отредактирована администратором блога в графическом редакторе! Денис, сама идея прикольная! Но вопрос такой. Рамочка вокруг фото белая (вроде есть небольшой серый контур вокруг) и если фон шаблона белый - нормально будет смотреться? Надо смотреть, так трудно сказать, но я лично встречал блоги, где как раз на светлом фоне была размещена картинка со светлый тенью. Выглядит не очень красиво. Получается масло масленое! Денис, привет! Интересная статья, но а как представлю что надо добавлять в код еще что то, то мне плохо | |
А в стили, так я вообще не добавлял еще ничего.
Интересное и полезное решение! Помню года 3-4 назад ломал голову над такими вопросами, в итоге писал грязный код
а тут все в таблицу стилей спрятано.