Учимся использовать css-свойство clip
8 августа 2012 | Опубликовано в css | 4 Комментариев »
Наверняка вы слышали о свойстве css под названием clip. Сегодня мы поговорим немного о его синтаксисе и будем учиться создавать интересный эффект с его помощью.
Синтаксис
example { position: absolute; clip: rect(110px, 160px, 170px, 60px); }
Первое, что вы должны знать про clip
— это то, что это свойство может быть добавлено только к элементу, который имеет абсолютное позиционирование (position: absolute
или position: fixed
).
Значение может быть определено в виде формы или задано автоматически. Значение auto не имеет ограничений и установлено по умолчанию для всех элементов.
Чтобы определить форму (в настоящее время допускаются только прямоугольники) нужно прописать rect(), передавая значения, которые определяют форму. Значения могут быть положительными или отрицательными.
Значение rect()
example { position: absolute; clip: rect(110px, 160px, 170px, 60px); }
Значения, переданные в прямоугольник() кажутся на первый взгляд немного запутанными, но вскоре вы поймёте, что в них нет ничего сложного. Значения определяют смещение сверху и слева от элемента.
Другими словами, в приведенном выше примере, первое значение придается мнимой линии, проходящей горизонтально длинной 110px сверху (первое значение), а вторая горизонтальная линия 170px сверху — это третье значение. Второе значение — для воображаемой вертикальной линии длинною 160px слева, и последнее значение - для другой воображаемой вертикальной линии длинною 60px слева.
Если это вас смущает, может быть, это изображение поможет:
Этот скриншот использует направляющие, чтобы показать вам, где соответствующие значения поставит мнимые пересекающиеся линии. Яркие области изображения являются частью изображения, которые были бы видны.Остальные будут скрыты. Таким образом, «обрезанная» площадь определяется пересекающимися линиями той области, которая остается.
Следует также отметить, что IE6 и IE7 поддерживают это свойство, но вместо запятых разделяющих значения, этот браузер требуют пробел.
Создаём анимированную галерею
Посмотрите эту анимационную галерею, чтобы лучше понять, как работает стилевой параметр clip.
Автор: impressivewebs
Перевод: Дежурка
Комментарии
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
8 августа 2012 в 14:02
Какое приятное свойство!
и очень простое при всём
Ответить
8 августа 2012 в 15:59
Если буду реализовывать что-то подобное галерее в демо, обязательно сделаю с hover эффектом, каждый раз нажимать напрягает....
Ответить
8 августа 2012 в 17:01
Комментарий скрыт из-за рейтинга
Ответить