На этом шаге мы приведем изменения приложения для украшения врезок.

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

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

    Для преодоления этого ограничения мы можем завернуть каждую врезку в другой элемент <div>:

$(document).ready(function() {
  $('span.pull-quote').each(function(index) {
    var $parentParagraph = $(this).parent('p');
    $parentParagraph.css('position', 'relative');

    var $clonedCopy = $(this).clone();

    $clonedCopy
      .addClass('pulled')
      .find('span.drop')
        .html('…')
      .end()
      .prependTo($parentParagraph)
      .wrap('<div class="pulled-wrapper"></div>');

    var clonedText = $clonedCopy.text();
    $clonedCopy.html(clonedText);
  });
});

    Кроме того, мы должны изменить таблицы стилей CSS, чтобы обеспечить оформление нового элемента <div> и добавить два фоновых изображения:

.pulled-wrapper {
  background: url(pq-top.jpg) no-repeat left top;
  position: absolute;
  width: 160px;
  right: -180px;
  padding-top: 18px;
}
.pulled {
  background: url(pq-bottom.jpg) no-repeat left bottom;  
  position: relative;
  display: block;
  width: 140px;
  padding: 0 10px 24px 10px;
  font: italic 1.3em "Times New Roman", Times, serif;
}

    Здесь некоторые правила, которые ранее применялись к элементам <span class="pulled">, теперь применяются к элементам <div class="pulled-wrapper">. Изменения в свойствах width и padding учитывают использование фоновых изображений для оформления границ, а в классе .pulled изменены значения свойств position и display, чтобы обеспечить корректное отображение во всех браузерах.

    В итоге приукрашенные врезки выглядят так, как показано на рисунке 1.

Рис.1. Окончательный вид врезок

    На следующем шаге мы подведем некоторые итоги.

Предыдущий шаг Содержание Следующий шаг