Обзоры, статьи, исследования



Недооцененное свойство CSS Clip


Есть много свойств CSS, возможности которых используются не так часто.
Вторая спецификация CSS объявляет 2 визуальных эффекта - overflow и clip. Свойство overflow используется довольно часто, и оно, безусловно этого достойно. Однако свойство clip явно осталось обделённым вниманием веб-мастеров.
Определение свойства clip

Итак, по спецификации - свойство clip (область усечения) определяет, какая часть отображаемого содержимого элемента является видимой. По умолчанию размер и форма области усечения совпадают с размером и формой родительского блока.

CSS синтаксис:
rect ( ) | auto | inherit

Для указания координат важен именно такой порядок - top, right, bottom, left. Поддерживаются и негативные значения.
Нюансы:

Проверка работы свойства проводилась для: FF 2.0.0.6, IE 6.0, Opera 9.1, Safari 2.0.4

Clip работает во всех указанных браузерах только для объектов с position = 'absolute'.

По спецификации CSS2 clip работает только для объектов, у которых overflow не равно visible. Для всех указанных браузеров, кроме Safari, это требование не является обязательным. Однако, рекомендация W3C мне представляется довольно логичной - ведь свойство clip делает невидимой некоторую часть содержимого элемента.

Также заметим, что в спецификации указано, что значения должны быть разделены запятыми - но это "не понимает" ИЕ6. Поэтому стоит разделять значения пробелами (как значения для margin, padding, border). Решение не будет полностью валидным, но зато будет рабочим, к тому же ещё и логичным.
Пример кода:
"http://www.w3.org/TR/html4/strict.dtd">


clip






Image Title



Результат:
CSS Clip

Примеры использования css clip для различных визуальных эффектов:

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

Диплом охранника купить на http://originals-diploma.com.