Тропарь.

Тропарь праздника Введения во храм Пресвятой Богородицы.

   

http://youtu.be/HHPEHFJtxIA

Днесь благоволения Божия предображение, и человеков спасения проповедание,
в храме Божии ясно Дева является, и Христа всем предвозвещает.
Той и мы велегласно возопиим: радуйся смотрения Зиждителева исполнение.

Overflow

• 
• 

CSS от Alen Grakalic.

/* overflow */
ul#thumbs, ul#thumbs li{
  margin:0;
  padding:0;
  list-style:none;
}
ul#thumbs li{
  float:left;
float:top;
  margin-right:1px;
  border:1px solid #999;
  padding:1px;
}
ul#thumbs a{
  display:block;
  float:left;
float:top;
  width:230px; /* ширина видимой части */
  height:200px; /* высота видимой части */
  line-height:230px;
  overflow:hidden;
  position:relative;
  z-index:1;
}
ul#thumbs a img{
  float:left;
  position:absolute;
  top:-20px;
  left:-60px;
}
ul#thumbs a:hover{
  overflow:visible;
  z-index:1000;
  border:none;
}
/* /overflow */

Fade Caption

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

<div id="mainwrapper">
<div class="box" id="box-3">
<img id="image-3" src="http://1.bp.blogspot.com/-nIAIr9lXkNI/UKqB47cyV2I/AAAAAAAABrQ/bSIjkeQqB2c/s320/coffee3+%E2%80%94jquery1.JPG" />
<h3>
<span class="caption fade-caption">Проявляющаяся подпись Fade Caption
dzhordvik.blogspot.ru.&nbsp;</h3></span>

 И вот что получается:

Проявляющаяся подпись Fade Caption dzhordvik.blogspot.ru. 

html каркас.

Так выглядит конструкция HTML для применяемых стилей.

<div id="mainwrapper">

    <!-- Подпись  1 -->

    <div id="box-1" class="box">
        <img id="image-1" src="http ://image.JPG"/>
            <span class="caption simple-caption">
                <p>Простая подпись</p>
            </span>
    </div>

    <!-- Подпись 2 -->

    <div id="box-2" class="box">
        <img id="image-2" src="http ://image.JPG"/>
        <span class="caption full-caption">
            <h3>Подпись на всю картинку Full Caption</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </span>
    </div>

    <!-- Подпись 3 -->

    <div id="box-3" class="box">
    <img id="image-3" src="http ://image.JPG"/>
    <span class="caption fade-caption">
        <h3>Проявляющаяся подпись Fade Caption</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>

    <!-- Подпись 4 -->

    <div id="box-4" class="box">
    <img id="image-4" src="http ://image.JPG"/>
    <span class="caption slide-caption">
     <h3>Выскальзывающая подпись Slide Caption</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>

    <!-- Подпись 5 -->

    <div id="box-5" class="box">
    <div class="rotate">
    <img id="image-5" src="http ://image.JPG"/>
    <span class="caption rotate-caption">
        <h3>Подпись с поворотом This is rotate caption</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
</div>
</div>

    <!-- Подпись 6 -->

    <div id="box-6" class="box">
    <img id="image-6" src="http ://image.jpg"/>
    <span class="caption scale-caption">
      <h3>Масштабная подпись Free Style Caption</h3>
   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </span>
    </div>
</div>

CSS3

Это просто загруженные картинки, без применения стилей.



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

Простая подпись

Подпись на всю картинку

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Проявляющаяся подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Выскальзывающая подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Подпись с поворотом

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Масштабная подпись

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

hCard

Элементы hCard обрабатываемые Яндексом.

Использование микроданных для HTML-страниц сайтов, благоприятно влияет на результаты выдачи поисковиков.
Далее будет приведен пример того, что Яндекс рекомендует веб-мастерам для использования на сайтах.
Первый пример, показывающий краткую, минимально необходимую информацию об авторах блогов и организациях.
Так выглядит код для поисковых систем.

<div class="vcard">
  <div>Кафе <span class="fn org">Плюшка</span></div>
  <div class="adr">
    <span class="locality">г. Энгельс</span>,
    <span class="street-address">просп. Строителей, д. 21</span>
  </div>
  <div class="tel">Телефон: 
    <abbr class="value" title="+ 7 (8452) 123-45-67">123-45-67</abbr>
  </div>

 <span class="url">
    <span class="value-title" title="http://www.plushka-cafe.ru"> </span>
  </span>
</div>

C помощью вложенного элемента класса value-title с атрибутом title, в карточку можно добавить, невидимое для посетителей сайта, свойство url или category:

Адрес для организаций должен быть достаточно подробным, чтобы его можно было найти на карте.

Наличие свойства category (род деятельности организации) облегчает отнесение организации сервисом, к конкретной рубрике.

e-mail

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

"Стандарт hCard допускает наличие нескольких элементов класса url, однако при добавлении карточки  в Справочник организаций, будет выбран наиболее подходящий.

Если адрес сайта отображается в блоке  с контактной информацией, то класс url можно присвоить элементу <a>:"

<div class="vcard">
  <div>
<span class="category">Кафе</span>-<span class="category">кулинария</span>
    <a class="fn org url" href="http://www.plushka-cafe.ru">Кафе Плюшка</a>
  </div>
  <div class="adr">
    <span class="postal-code">410000</span>,
    <span class="country-name">Россия</span>,
    <span class="region">Саратовская область</span>,
    <span class="locality">г. Энгельс</span>,
    <span class="street-address">просп. Строителей, д. 21</span>,
    <span class="extended-address">этаж. 2, оф. 201</span>
    <div class="tel">Телефон: 
      <abbr class="value" title="+ 7 (8452) 123-45-67">123-45-67</abbr>
    </div>
<div class="tel">
    <abbr class="type" title="fax">Факс:</abbr> 
    <abbr class="value" title="+ 7 (8452) 123-45-89">123-45-89</abbr>
  </div>
  </div>
</div>

<div class="email">
admin@plushka-cafe.ru</div>

<div>Электронная почта:
    <a class="email" href="mailto:plushka@plushka-cafe.ru">
      plushka@plushka-cafe.ru
    </a>
  </div>
<div>По вопросам трудоустройства:
    <a class="email" href="mailto:hr@plushka-cafe.ru">
      hr@plushka-cafe.ru
    </a>
  </div>
<div>По вопросам закупок:
    <a class="email" href="mailto:buy@plushka-cafe.ru">
      buy@plushka-cafe.ru
    </a>
  </div>

geo

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

• latitude — широта;
• longitude — долгота.

<span class="geo">
    <span class="latitude">
      <span class="value-title" title="55.792188"> </span>
    </span>
    <span class="longitude">
      <span class="value-title" title="37.764956"> </span>
    </span>
  </span>

workhours

Время работы организации.
 Свойство не предусмотрено стандартом hCard, добавлено Яндексом в качестве расширения. Допустимо указывать время работы в произвольном формате.

• пн-пт 9:00-18:00
• пн-пт 9:00-18:00, обед 13:00-14:00, сб-вс 10:00-17:00, обед 13:30-14:00
• пн-сб 11:00-20:00, вс 12:00-24:00
• ежедн. 10:00-24:00
• круглосуточно

<div>

    Мы работаем<span class="workhours">ежедневно с 11:00 до 24:00</span>
  </div>

Остальные свойства, предусмотренные форматом hCard, в настоящее время игнорируются Яндексом.
Если ваша контактная информация содержит логотип организации, используйте свойство logo.
Полный список свойств представлен в официальной спецификации формата, в разделе Property List.

Харчо.

Харчо.