Строим фото по порядку.


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





Код для выравнивания фото по горизонтали.

Для блогов содержащих большое количество фотографий вопрос автоматического уменьшения размера фото и выравнивания относительно центра страницы стоит всегда на первом месте.Подогнать все фото под один размер и расположить их в организованном порядке на странице можно используя CSS.Для корректной работы приведённый ниже код следует добавить в раздел стилей перед закрывающимся тегом перед закрывающим тегом ]]></b:skin> убрав теги <style>....<style> или же просто устанавливаем весь код в любой гаджет поддерживающий HTML и JavaScript.
<style type="text/css">
#zoom {
 list-style:none;
 margin-left:-20px; /* Компенсируем отступ слева */
}
#zoom li {
 width:120px; /* Ширина контейнера с учетом рамки в 1px */
 height:128px; /* Высота контейнера с учетом рамки в 1px */

 float:left;
 margin-left:50px;
 margin-top:20px;
 overflow:visible;
 display: block;
}
.zoom_v-g {
 position:relative;
 width:120px;/* Ширина изображения с учетом рамки в 1px */
 height:128px;/* Высота изображения с учетом рамки в 1px */
 top:0;
 left:0;
 border:1px solid #ccc;
}.zoom_v-g:hover {
 width:500px; /* Увеличиваем ширину изображения при наведении*/
 height:388px; /* Увеличиваем высоту изображения при наведении*/
 top:-16px;
 left:-25px;
 z-index:9999; /* Располагаем изображение над всеми элементами */
 box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Добавляем тень */
 -webkit-box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Для Safari и Chrome */
 -moz-box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Для Firefox */
 transition: all 0.3s ease; /* Изменяем значения всех свойств плавно в течение 0,3 сек */
 -webkit-transition: all 0.9s ease; /* Для Safari и Chrome */
 -o-transition: all 0.3s ease; /* Для Opera */
 -moz-transition: all 0.3s ease; /* Для Firefox */
}
</style> 

Как установить гаджет для выделения текста.
Креативные эффекты для фото.
Эффекты трансформации для фото.














Проделав все манипуляции с установкой кода CSS можно приступать к оформлению страниц и организованном размещении фото на странице.Для этого следует все фото,которые следует организовать и привести в порядок,добавляем в контейнер такого вида.Количество фото может быть неограниченным и для того,что бы увеличить число картинок следует добавить ещё энное количество секций такого вида
<li>
<img class="zoom_v-g" src="урл фото" />
</li>

<ul id="zoom">
<li>
<img class="zoom_v-g" src="урл фото" />
</li>
<li><img class="zoom_v-g" src="урл фото" />
</li>
<li>
<img class="zoom_v-g" src="урл фото" />
</li>
<li>
<img class="zoom_v-g" src="урл фото" />
</li>
</ul>

Настройки кода

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





Отправить комментарий