Как обрезать элемент на css (свойства overflow, text-overflow и clip)

Обрезка до нужного числа строк (без многоточия)

Принцип обрезки будет простой: оставить в видимой области необходимое количество строк, а остальные вынести за пределы контейнера и скрыть. Возьмем для примера абзац текста, который не должен превышать по высоте 80px, а всё, что сверх, должно быть скрыто.


<div class="truncate-text">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
</div>

Способ первый — грубо обрезаем текст до видимой области. Почему грубо, расскажу ниже.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
}

Задаем ограничение по высоте () и свойство overflow, отвечающее за отображение содержимого за границами родительского контейнера (). Для наглядности контейнеру задан фон. Ниже можно видеть, как работает свойство : пример слева без этого свойства (значение по умолчанию visible), справа — с ним (значение hidden).

Осталось добавить градиент того же цвета, что и фон. Используем для этого псевдоэлемент after с аюсолютным позиционированием.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
  position: relative;
}

.truncate-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, transparent, #c8ad90 50%);
}

Следует отметить, что в идеале можно было бы задавать высоту блока кратной высоте строки, чтобы он всегда вмещал целое число строк в видимой области. Или наоборот, заложить под последнюю строку меньше высоты целой строки, чтобы получить эффект наполовину срезанных букв не за счёт градиента.

Как вы могли заметить, у нашего блока были заданы внутренние отступы (padding), и свойство overflow обрезало текст не по границе этих отступов, а по границе блока. В результате мы потеряли отступ снизу, и текст прилегает к нижнему краю блока. Конечно, мы сгладили этот недочет с помощью градиента, но это повод упомянуть о втором способе.

Итак, способ второй — используем колонки.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
  column-width: 200px;
}

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

Здесь становится видно, что блок плохо подогнан по высоте под 3 строки, слишком много места остается снизу. Поэтому предлагаю явно задать высоту строки и рассчитать для неё высоту блока.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  overflow: hidden;
  column-width: 200px;
  line-height: 1.3em;
  height: 3.9em;
}

Далее можно добавить градиент, как это делалось выше, откорректировав его высоту.

Пример 2

Предположим, у нас есть всё тот же контейнер box внутри которого находится тег img с изображением, которое мы сейчас будем стилизовать.

Также разместим наше изображение по центру относительно того объекта, который мы создадим. И используем свойство, которое довольно редко используются: object-fit .

Box { position: relative; overflow:hidden; width:300px; height:300px; } .box img { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; height:300px; object-fit:cover; }

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

Ознакомиться подробнее с HTML и CSS можно тут:

Обрезка до нужного числа строк (без многоточия)

Принцип обрезки будет простой: оставить в видимой области необходимое количество строк, а остальные вынести за пределы контейнера и скрыть. Возьмем для примера абзац текста, который не должен превышать по высоте 80px, а всё, что сверх, должно быть скрыто.

<div class="truncate-text">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
</div>

Способ первый — грубо обрезаем текст до видимой области. Почему грубо, расскажу ниже.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
}

Задаем ограничение по высоте () и свойство overflow, отвечающее за отображение содержимого за границами родительского контейнера (). Для наглядности контейнеру задан фон. Ниже можно видеть, как работает свойство : пример слева без этого свойства (значение по умолчанию visible), справа — с ним (значение hidden).

Осталось добавить градиент того же цвета, что и фон. Используем для этого псевдоэлемент after с аюсолютным позиционированием.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
  position: relative;
}

.truncate-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, transparent, #c8ad90 50%);
}

Следует отметить, что в идеале можно было бы задавать высоту блока кратной высоте строки, чтобы он всегда вмещал целое число строк в видимой области. Или наоборот, заложить под последнюю строку меньше высоты целой строки, чтобы получить эффект наполовину срезанных букв не за счёт градиента.

Как вы могли заметить, у нашего блока были заданы внутренние отступы (padding), и свойство overflow обрезало текст не по границе этих отступов, а по границе блока. В результате мы потеряли отступ снизу, и текст прилегает к нижнему краю блока. Конечно, мы сгладили этот недочет с помощью градиента, но это повод упомянуть о втором способе.

Итак, способ второй — используем колонки.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
  column-width: 200px;
}

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

Здесь становится видно, что блок плохо подогнан по высоте под 3 строки, слишком много места остается снизу. Поэтому предлагаю явно задать высоту строки и рассчитать для неё высоту блока.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  overflow: hidden;
  column-width: 200px;
  line-height: 1.3em;
  height: 3.9em;
}

Далее можно добавить градиент, как это делалось выше, откорректировав его высоту.

Подготовка изображения

В качестве примера изображения, где требуется разрезание, возьмем рис. 2.12. Каждая из трёх иконок является ссылкой на соответствующий раздел, кроме того, ссылкой на главную страницу служит рисунок с названием сайта.

Рис. 2.12. Исходное изображение

Теоретически, в данном случае можно обойтись и без разрезания, если использовать изображение-карту (теги <map> и <area>). Однако этот вариант неприемлем в силу следующих соображений. При открытии любого раздела, иконка ему соответствующая, трансформируется, что в целом меняет изображение целиком (рис. 2.13). Если применять изображение-карту, то придётся заготовить четыре различных изображений (одну для главной страницы и еще три для каждого раздела), а это скажется в итоге на объёме пересылаемых данных, скорости отображения сайта и качестве рисунков.

Рис. 2.13. Вид изображения при открытии раздела

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

Пример 3

  Также создавать обрезку для изображений мы можем в момент, если мы вставляем их в SVG элементы. Для примера возьмем круг. SVG мы можем создать при помощи тегов. Создаем обрамляющий тег внутри которого будет находится тег и тег . В теге пишем тег . В нем мы указываем атрибут и добавляем изображение. Также добавим атрибуты ширины и высоты. Но на этом не все. Нам потребуется добавить значение . Чтобы наша работа считала законченной мы добавим вспомогательный атрибут в тег , который позволит заполнить наше изображение «от и до» по всему кругу.

<svg width="250" height="250">
   <pattern id="pattern" width="100%" height="100%">
      <image xlink:href="https://omiliya.org/sites/default/files/img_articles/5_2.jpeg" width="250" height="250" preserveAspectRatio="xMidYMin slice"></image>
   </pattern>
   <circle cx="125" cy="125" r="100" fill="url(#pattern)"></circle>
</svg>

 Смотреть видео:

Пример 1

  Попробуем обрезать изображение которое размещено при помощи background-image. Создадим небольшую HTML-разметку

<div class="box"></div>

Переходим к стилизации CSS. Через добавляем изображение, указываем рамки для нашего изображения, центрируем изображение при помощи  и задаем :

.box {
   background-image:url(http://tpverstak.ru/wp-content/uploads/2017/05/kitty.jpg);
   background-position:center center;
   background-size:cover;
   width:300px;
   height:300px;
}

 Ознакомиться подробнее с HTML и CSS можно тут:

Это был первый и самый простой метод по обрезке изображения. Теперь давайте рассмотрим второй пример.  

Syntax

The property may be specified using one or two values. If one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). If two values are given, the first specifies overflow behavior for the left end of the line, and the second specifies it for the right end of the line.

Each value is specified as one of:

  • one of the keyword values: , ,
  • the function , which is passed a or a to control the fade distance
  • a .

Values

The default for this property. This keyword value will truncate the text at the limit of the content area, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify as an empty string, if that is supported in your target browsers: .
This keyword value will display an ellipsis (, ) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.
The to be used to represent clipped text. The string is displayed inside the content area, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.
This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.
The argument determines the distance over which the fade effect is applied. The is resolved against the width of the line box. Values lower than are clipped to . Values greater than the width of the line box are clipped to the width of the line box.

Обрезка до нужного числа строк (с многоточием)

К сожалению, чтобы провернуть нечто подобное с несколькими строками, придётся прибегнуть к ненадёжному методу. Ненадёжный он потому, что используемые в нём свойства не являются частью стандарта, могут поддерживаться не всеми браузерами и их поддержка может быть прекращена в любой момент. Поэтому они не рекомендованы для использования в продакшене. На данный момент приведённое решение будет работать во всех браузерах на основе Webkit (Chrome, Opera), Firefox и Edge.

Сначала рассмотрим, это работает.

.truncate-text {
  width: 200px;
  height: 80px;
  background: #c8ad90;
  padding: 1rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

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

<div class="container">
  <div class="truncate-text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
  </div>
</div>
.container {
  width: 200px;
  background: #c8ad90;
  padding: 1rem;
}
.truncate-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.3em;
  height: 3.9em;
}

Рассмотрим эти свойства подробнее.

Вообще display: box это старый синтаксис , который используется, например, для поддержки flexbox в старых Safari. При этом обязательно использовать префикс -webkit. В документации Firefox можно найти упоминание значения display: -moz-box, но в поздних версиях оно было заменено на -webkit-box, также Firefox поддерживает значение без префикса (box). Как говорилось выше, это аналог display: flex, и соответственно влияет на расположение дочерних элементов и распределение свободного пространства.

Аналог свойства flex-direction: column. Также является частью flexbox.

Первоначально реализованное в Webkit и в Firefox и Edge свойство, ограничивающее количество строк контента в блоке. Спецификация определяет свойство line-clamp, призванное прийти на замену варианту с префиксом, но для обратной совместимости требуется, чтобы -webkit-line-clamp также поддерживалось. В IE, естественно, это не сработает даже с префиксом.

Живой пример можно найти тут.

Многоточие в конце текста

Вместо градиента в конце обрезанного текста также можно использовать многоточие. Причём оно будет добавляться автоматически с помощью свойства text-overflow . Его понимают все браузеры, включая старые версии IE, и единственным недостатком этого свойства является пока его неясный статус. В CSS3 вроде это свойство входит, но код с ним не проходит валидацию.

В примере 3 показано применение свойства text-overflow со значением ellipsis , которое добавляет многоточие. При наведении курсора мыши на текст, он отображается целиком и подсвечивается фоновым цветом.

Пример 3. Использование text-overflow

HTML5 CSS3 IE Cr Op Sa Fx

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

Результат данного примера показан на рис. 3.

Рис. 3. Текст с многоточием


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

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

Все использованные здесь методы, фактически нуждаются только в паре строчек CSS кода. Однако, это не обрезание в прямом смысле этого слова (CSS пока не может сделать этого), мы просто скрываем и показываем только ту часть картинки, которую мы хотим увидеть.

Эти методики могут быть очень полезны, если вы хотите привести картинку к определенному размеру, то есть хотите создать, например, её превьюшку (уменьшенная копия изображения) в секции новостей или что-то подобное.

Техника 1 — использование отрицательных полей (Negative Margins )

Если вам не охота использовать отрицательные поля, мы предлагаем использовать технику №2 . Она включает в себя родителя (абзац), у которого определенные ширина и высота. У данного абзаца свойство позиционирование (position) задано как relative . Ширина и высота задают размеры отображаемого поля. А картинке, размещенной внутри абзаца, свойство позиционирования (position) задано как absolute . Потом мы можем с помощью свойств верх(top) и лево(left) располагать картинку, как захотим, в процессе определяя: какую часть изображения показывать, а какую — нет.

HTML идентичен коду из предыдущей техники:

Crop {

float : left ;

margin : . 5em 10px . 5em 0 ;

overflow : hidden ; /* this is important */

position : relative ; /* this is important too */

border : 1px solid #ccc;

width : 200px ;

height : 120px ;

Crop img {

position : absolute ;

top : — 40px ;

left : — 50px ;

Техника 3 — использование свойства нарезки (Clip Property )

Эта техника должна быть самой легкой, так как свойство нарезки (clip property) определяет часть элемента, которую надо показать. Это звучит, как совершенное решение, но есть одна загвоздка : резанный (clipped) элемент должен позиционироваться абсолютно. Чтоб была возможность использовать элемент, нам придется добавить дополнительный элемент, вычислить размер видимой области изображения, добавить этот размер родителю, пустить в ход родителя… Куча работы, не так ли?

О, еще одна проблемка: размер подрезанного элемента не уменьшается до величины обрезка, а остается первоначального размера (картинка за пределами обрезка просто скрывается). Мы должны использовать абсолютное позиционирование, чтобы двигать видимую область в верхний левый угол родителя.

Однако нельзя оставить не упомянутой свойство нарезки . И так снова код…

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

Где это может пригодиться?

Прежде всего, на сайтах, где контент с изображениями, вероятнее всего, не будет подрезаться под какой-либо конкретный блок.

Яркий пример : блог на WordPress.

Предположим, вы хотите, чтобы обложка вашей статьи имела пропорции 1:1 (квадрат). Ваши действия:

  1. Скачаете подходящую картинку из интернета;
  2. Обрежете ее в фотошопе до нужных пропорции;
  3. Опубликуете статью.

Зайдя на сайт, вы увидите тот результат, который ожидали.

Но, предположим вы забыли обрезать картинку в фотошопе и выгрузили рандомное изображение в качестве обложки из интернета, что будет тогда?! Правильно, верстка сломается. А если вы совсем не использовали CSS, то картинка HD разрешения и вовсе может перекрыть весь обзор на текст

Поэтому важно уметь делать обрезку изображений при помощи CSS стилей

Давайте разберем разные ситуации того, как это можно реализовать не только при помощи CSS, но и SVG.

Обрезка одной строки текста (с многоточием)

Более аккуратный вариант обрезки текста добавляет многоточие в конце строки. Однако следует сразу предупредить, что без прибегания к нестандартным свойствам и с помощью CSS это можно сделать только для однострочного текста. Поэтому разработчики пишут к JS функции, которые удаляют по одному слову (или букве), пока высота текста не начнёт совпадать с требуемой. Мы не будем рассматривать решения на базе JS, но рассмотрим ненадёжный, но красивый способ с применением свойств с вендорными префиксами.

Вариант для одной строки широко и достаточно давно, начнём с него.

<h3 class="truncate-text">Длинный заголовок в одну строку, который надо обрезать</h3>
.truncate-text {
  width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Обрезка одной строки текста (с многоточием)

Более аккуратный вариант обрезки текста добавляет многоточие в конце строки. Однако следует сразу предупредить, что без прибегания к нестандартным свойствам и с помощью CSS это можно сделать только для однострочного текста. Поэтому разработчики пишут к JS функции, которые удаляют по одному слову (или букве), пока высота текста не начнёт совпадать с требуемой. Мы не будем рассматривать решения на базе JS, но рассмотрим ненадёжный, но красивый способ с применением свойств с вендорными префиксами.

Вариант для одной строки широко и достаточно давно, начнём с него.

<h3 class="truncate-text">Длинный заголовок в одну строку, который надо обрезать</h3>
.truncate-text {
  width: 350px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Добавляем градиент к тексту

Чтобы стало понятнее, что текст справа не заканчивается, поверх него можно наложить градиент от прозрачного цвета к цвету фона (рис. 2). При этом будет создаваться эффект постепенного растворения текста.

Рис. 2. Текст с градиентом

В примере 2 показано создание этого эффекта. Стиль самого элемента практически останется прежним, сам же градиент будем добавлять с помощью псевдоэлемента ::after и CSS3. Для этого вставляем пустой псевдоэлемент через свойство content и к нему применяем градиент с разными префиксами для основных браузеров (пример 2). Ширину градиента легко изменять через width , также можно регулировать степень прозрачности, заменив значение 0.2 на своё.

Пример 2. Градиент поверх текста

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

Текст

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

Данный метод не работает в браузере Internet Explorer до версии 8.0 включительно, потому что в нём нет поддержки градиентов. Но можно отказаться от CSS3 и сделать градиент по старинке, через картинку в формате PNG-24.

Этот метод сочетается только с однотонным фоном и в случае фоновой картинки градиент поверх текста будет бросаться в глаза.

Выдвигающееся (popout) меню

При наведении курсора выдвигается интерактивное меню.

Объяснение

  1. для референсного родительского элемента устанавливает декартово позиционирование дочернего элемента.
  2. берёт из потока документа выдвигающееся меню и позиционирует его относительно родительского элемента.
  3. целиком выводит меню слева от родительского элемента.
  4. изначально скрывает меню и разрешает переходы (в отличие от display: none).
  5. означает, что, когда курсор мыши проходит над .reference, немедленно выбираются дочерние элементы с классом .popout-menu, а их видимость (visibility) меняется на visible, в результате мы видим меню.

Использование таблицы для склейки фрагментов

После того, как фрагменты обозначены, требуется сохранить все изображения на диск. Для этого выбираем пункт меню File > Save for Web & Devices… (Файл > Сохранить для Web, Alt+Shift+Ctrl+S) чтобы открыть панель оптимизации графики (рис. 2.17).

Рис. 2.17. Панель оптимизации изображений

С помощью инструмента Slice Select можно выбирать требуемый фрагмент и устанавливать для него персональные параметры вроде количества цветов, значение потерь качества, прозрачность и т.д. Допускается выделять сразу несколько фрагментов, удерживая клавишу Shift, что позволяет устанавливать для них одинаковые параметры.

По окончанию работы с фрагментами нажимаем кнопку «Save», указываем место на диске, куда будет сохранен HTML-документ, его имя, тип и настройки (рис. 2.18).


Рис. 2.18. Настройки при сохранении файла

Рисунки сохраняются автоматически в папку images, а их имя образуется от имени HTML-файла с добавлением номера фрагмента. Например, сохраняемое имя будет splash.html, тогда первый фрагмент называется splash_01.png, а последний — splash_13.png. Кроме того, создается файл spacer.gif, который представляет собой прозрачный рисунок размером 1х1 пиксел. Он используется для правильного формирования изображений в таблице.

Настройки, по которым строится HTML-код и формируются имена изображений можно изменить, если при сохранении файла в разделе Settings выбрать пункт Other… В окне параметров можно выбирать папку, куда сохранять рисунки, способ формирования имен файлов, а также HTML-кода (рис. 2.19).

Рис. 2.19. Панель для выбора выходных настроек

Полученный в результате сохранения файлов HTML-код, после небольшого редактирования представлен в примере 2.12.

Пример 2.12. Таблица для склейки изображений

XHTML 1.0CSS 2.1IECrOpSaFx

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

Чтобы получить требуемый результат, введем слой с фоновым рисунком и нашу таблицу наложим поверх него. Такое изображение представлено на рис. 2.20.

Рис. 2.20. Фоновый рисунок, рамка вокруг приведена для наглядности

Теперь создаем нужный слой, назовем его toplayer, и в стилях указываем его параметры (пример 2.13).

Пример 2.13. Слой для формирования полос

XHTML 1.0CSS 2.1IECrOpSaFx

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

Остается убрать рисунки с незначительными фрагментами, сохранив их размеры у ячеек таблицы (пример 2.14).

Пример 2.14. Окончательный код

XHTML 1.0CSS 2.1IECrOpSaFx

В данном примере изменён доктайп на строгий, что приводит к появлению небольшого отступа внизу изображений. Чтобы его убрать, в стиле к селектору IMG добавлен display: block.

Кроме перечисленных плюсов у разрезания изображений есть и минусы, которые проявляются на приведённом примере. Код получается достаточно сложный, а поскольку ячейки взаимосвязаны между собой, то изменение размеров одного рисунка повлечёт за собой модификацию и всей таблицы. Кроме того, неудобно редактировать положение отдельных рисунков. Опять же, чтобы сместить один рисунок на пару пикселов вправо, придётся вносить правки сразу в несколько ячеек. Поэтому разрезание не всегда стоит применять, особенно если есть альтернатива в виде применения слоёв. Давайте рассмотрим, как сделать аналогичный макет с помощью них.

Для управления положением рисунков родительскому классу menu зададим относительное позиционирование, а рисункам абсолютное. Тогда применение свойств left и top будет задавать координаты изображения относительно его родителя, т.е. слоя menu. Сам слой при этом можно легко перемещать и это никак не повлияет на его дочерние элементы (пример 2.15).

Пример 2.15. Вёрстка с помощью слоёв

XHTML 1.0CSS 2.1IECrOpSaFx

Разрезание изображения

Разрезание и «сборку» рисунка лучше доверить специализированной программе, в частности, Adobe Photoshop, так что все упоминания об инструментах и меню относятся именно к этой программе.

Для удобства разрезания изображения вначале следует добавить направляющие линии, по которым затем и будет происходить разделение на фрагменты (рис. 2.14). Линию снизу добавим потом через стили, поэтому она не участвует в изображении.

Рис. 2.14. Добавляем в изображение направляющие

Теперь используем инструмент Slice (, активация клавишей K) и по направляющим обводим требуемую прямоугольную область. Обозначенная область отмечается синей рамкой с номером фрагмента в левом верхнем углу. Размер областей можно изменять через специальный инструмент Slice Select — . Щелкаем мышью с этим инструментом по желаемому фрагменту — цвет рамки вокруг области становится желтым, а также изменяется тональность рисунка. После чего курсором мыши можно перемещать границы фрагмента за специальные маркеры по бокам и в углах области (рис. 2.15).

Рис. 2.15. Изменение области фрагмента

Для быстрого переключения между инструментами Slice и Slice Select нажмите и удерживайте клавишу Ctrl.

Во время изменения размеров фрагментов, следите за тем, чтобы области не пересекались друг с другом, и между ними не возникало промежутков. Хотя Photoshop сам отмечает подобные недочёты и принимает меры к их устранению, лучше держать всё под своим контролем.

После предварительного анализа и применения инструмента Slice, получим 13 фрагментов (рис. 2.16). Синим цветом показаны фрагменты созданные инструментом Slice, серым цветом показаны автоматически созданные фрагменты.

Рис. 2.16. Разрезанное на фрагменты изображение

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


С этим читают