HTML and CSS

Есть подозрения, что Вы читали мой предыдущий перевод о том, как создать эффект градиента для текста, и вот продолжение, но в этот раз мы займемся фото-галереей…

Всё очень просто – всё что нам понадобиться это дополнительный элемент с картинкой в качестве фона для создания эффекта наложения. И так – приступим…

Основная концепция

Добавляем тэг <span> внутрь <div>, и применяем к нему стиль с фоновым изображением – таким образом у нас получиться эффект наложения двух картинок (вы так же можете воспользоваться jQuery для добавления тэга на лету, пример далее).

В CSS необходимо обратить внимание на то, что тэг div у нас position:relative, а span – position:absolute. Это необходимо, чтобы свойства top и left у элемента span позиционировали его относительно div’a.

IE PNG Hack

Как обычно IE6 отличается умом и сообразительностью – он не отображает нормально полупрозрачные PNG, специально для него существует хак – iepngfix.htc. Скачайте файл iepngfix.htc и вставьте следующий код в тэг :

<!--[if lt IE 7]>
<style type=&quot;text/css&quot;>
  .photo span { behavior: url(iepngfix.htc); }
</style>
<![endif]-->

Стили

Изменяя свойства тэга Вы можете с легкостью создать свой неповторимый стиль, вот пример 15-ти стилей:

Добавление элемента с помощью jQuery

Как многие знают, добавление пустого элемента не есть ТРУ, по этой причине будем добавлять его средствами JavaScript’a, а именно при помощи библиотеки jQuery. Для этой цели нам необходимо добавить следующий код в тэг :

<script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
<script type=&quot;text/javascript&quot;>
$(document).ready(function(){

  //prepend span tag
  $(&quot;.photo a&quot;).prepend(&quot;<span></span>&quot;);

});
</script>