Учимся использовать 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
Перевод: Дежурка
Комментарии
Оставить ответ
Похожие статьи
-
Милый графический дизайн от Клаудии Бордин
-
Красивый текстовый 3D-эффект в Adobe Photoshop
-
Вектор в стиле ретро для вашего дизайна
-
Монохромный веб-дизайн
-
Японский стиль в изобразительном искусстве
-
Тонированные изображения с помощью множественных фоновых изображений
-
Строгие узоры и иллюстрации от Гарри Голдхока
-
Бесплатные весенние фотографии
-
Яркое на темном в веб-дизайне
-
20 крутых примеров нейл-арта
-
Бесплатный клипарт лепестков
-
Разные шрифты на одной веб-странице
-
Вкусные образы в фотографиях Луизы Валиери
-
Яркий текстовый эффект с масками в Adobe Illustrator
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 12 сайтов, на которых можно продавать свои работы
61
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58
8 августа 2012 в 14:02
Какое приятное свойство!
и очень простое при всём
Ответить
8 августа 2012 в 15:59
Если буду реализовывать что-то подобное галерее в демо, обязательно сделаю с hover эффектом, каждый раз нажимать напрягает....
Ответить
8 августа 2012 в 17:01
Комментарий скрыт из-за рейтинга
Ответить