|
Как использовать свойство Clip CSS
|
|
| Kosten | Среда, 25 Июля 2018, 02:24 | Сообщение 1 |
| Свойство клипа CSS можно использовать для изменения размера изображения, но иначе, чем использование свойств ширины и высоты. Элементы width и height используются для настройки размера и масштаба всего изображения, но свойство clip просто зажимает изображение, так что оно может вписываться в определенный элемент, даже если все изображение фактически не отображается. По сути, он отключает изображение.
Использование свойства clip на самом деле довольно просто, потому что оно принимает только одно свойство: верхний, правый, нижний, левый. Это свойство используется для определения формы, она должна быть прямоугольником и верхних, правых, нижних и левых значений, эти значения представляют собой координаты, которые должны быть обрезаны в верхнем левом углу элемента.
Свойство не работает, если свойство переполнения установлено на видимое, и оно также не будет работать, если свойство position вашего элемента изображения не будет идти абсолютными. Убедитесь, что у вас есть эти две вещи, прежде чем пытаться применить свойство клипа к вашим элементам изображения.
Если вы хотите увидеть пример использования свойства клипа для клипа изображения, посмотрите на CSS и снимок экрана ниже.
Во-первых, CSS:
Код img{
position: absolute;
clip: rect(0, 160px, 200px, 0)
}
Нет необходимости устанавливать свойство переполнения скрытым, потому что скрытое значение по умолчанию.
Возможно, вы не сможете сказать из примера, но исходное изображение значительно продвинулось вправо, чем это изображение, и оно значительно улучшилось благодаря свойству клипа. Теперь, когда вы понимаете основы свойства клипа, ваша очередь поиграть с ним и посмотреть, сможете ли вы действительно справиться с этим. Лучший способ полностью понять, как использовать свойство - использовать его самостоятельно в реальном мире.
| | Страна: (RU) |
| |
| Kosten | Среда, 25 Июля 2018, 02:43 | Сообщение 2 |
|
| Непонятное свойство CSS клипа редко используется на любом веб сайте. Он привязывается к фиксированному или абсолютно помещенному объекту, чтобы показать или скрыть аспекты элемента, то есть закрепить элемент. Это было со времен более старых версий CSS, но все еще не используется так часто.
Здесь хочется продемонстрировать, как использовать это свойство и как выглядит синтаксис. Это, как правило, несколько запутывает и не всегда будет представлять значительную цель для веб-проектов. Однако, как разработчик CSS, хорошо знать, как эта работа будет, если вы поймете какие-то опрятные идеи в будущем.
В моем примере просто используется внешняя таблица стилей с именем styles.css вместе с некоторыми снимками изображений, загружаемыми из Template Monster. Каждая ссылка выходит на внешнюю страницу этого шаблона на сайте, поэтому это ведет себя как очень простая анимированная галерея. Чтобы все было просто, я хочу объяснить, как работает HTML в унисон с CSS.
Поле div #preview контейнера позиционируется относительно внутренних ссылок для шаблонов. За каждой ссылкой сразу следует изображение, которое позиционируется абсолютно на странице. Все это содержится в div предварительного просмотра, и каждое изображение выравнивается в верхнем правом углу. Поскольку мы можем видеть только одно изображение за раз, этот эффект работает очень хорошо.
Обрезка элементов
Я хотел бы перейти в синтаксис клипа и как это работает на типичном элементе HTML. Clip: auto - значение по умолчанию, которое ничего не делает. Clip: inherit вытащит значение свойства из родительского элемента. Но для фактического использования эффекта нам нужно передать функцию CSS, которая формирует эффект отсечения.
Эта функция rect (), которая нуждается в четырех координатах. Подобно свойствам CSS margin, padding и border, цифры варьируются от верхнего правого нижнего левого угла по часовой стрелке. Современные браузеры требуют значений, разделенных запятыми, в то время как более старые версии IE фактически поддерживают функцию клипа с использованием пробелов.
Код #previews {
display: block;
position: relative;
}
img.hiddenclip {
position: absolute;
right: 15px;
top: 5px;
display: block;
clip: rect(350px, 0, 0, 430px);
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.tbtn:hover + img.hiddenclip {
clip: rect(0, 430px, 350px, 0);
}
Первый клип изображения не отображает ничего на странице. Когда пользователь наводится на кнопку, мы можем отображать связанное изображение с помощью переходов CSS. Clip: rect (0, 430px, 350px, 0) будет анимировать конечный элемент до 0 смещения сверху и слева, расширяя его шириной 430 пикселей и высотой 350 пикселей.
Это немного отличается от того, что вы найдете в большинстве сценариев jQuery. CSS по-прежнему является рабочей моделью с последовательными обновлениями от W3C. Попробуйте это в разных браузерах и найдите любые ошибки, в которых эффект не работает.
Еще одно решение по расширению обрезанного элемента - использовать ключевое слово auto для числового значения. Это соответствует 100%, который устанавливается динамически на основе размера изображения.
Я мог бы использовать rect (0, auto, auto, 0) для создания эффекта CSS вместо значений пикселей. Поскольку мои эскизы прекрасно вписаны в страницу, легче контролировать ширину и высоту каждого изображения. Просто помните, что авто является хорошим обходным способом для изображений разного размера, но это не всегда лучшее решение.
Обработка устаревшего IE
Internet Explorer 8 - первый браузер, поддерживающий запятую. Чтобы справиться с этим, я написал условный оператор IE в HTML страницы. Если пользователь просматривает IE7 или ниже, мы включаем более старый синтаксис, разделяющий значения пробелами.
Код <!-- [if lt IE 8]>
<style type="text/css">img.hiddenclip { clip: rect(350px 0 0 430px); }</style>
<![endif]-->
Большинство других веб браузеров некоторое время поддерживали CSS- клип. Это просто не привлекло большого внимания в основное сообщество разработчиков, поскольку оно обеспечивает очень причудливый эффект без огромного спроса.
Вывод:
Хотя clip () не имеет особого значения для веб разработки, есть некоторые мощные трюки, чтобы тянуть с этим свойством. Понимание того, как это работает и почему оно работает, - это первый шаг. Я бы посоветовал всем, кто с любопытным умом, загрузить копию моего учебного кода и посмотреть, что еще вы можете построить. Чем больше вы играете и видите, что возможно, тем больше вы поймете.
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Среда, 25 Июля 2018, 03:10 | Сообщение 3 |
|
| Свойство CSS clip
Чтобы указать область абсолютно позиционированного элемента, которая остается видимой. Свойство clip CSS определяет область отсечения для абсолютно позиционированного элемента.
Чтобы увидеть, как работает CSS Clip, подумайте об этом как обрезающей маске PhotoShop. При использовании отправочной маски на изображении вы указываете область просмотра для изображения. Именно так работает свойство CSS Clip. Вы определяете, с помощью CSS, область просмотра для элемента
Вот разбивка свойств CSS Clip
shape - сначала вы должны указать форму, и в настоящее время единственной доступной формой является прямоугольник (rect)
top - указывает, где клип начинается с верхнего края элемента
right - указывает, где клип заканчивается на основе левого края элемента
bottom - указывает, где конец клипа основывается на верхнем краю элемента
left - указывает, где клип начинается с левого края элемента
Зачем использовать CSS Clip
Как я уже сказал в начале этой статьи, свойство CSS Clip является нечетным. На этом этапе вам может быть интересно, почему вы когда-нибудь захотите его использовать. Ну, вот несколько причин:
Доступно скрыть контент
Если вам когда-либо приходилось скрывать контент с дисплея, но не с экрана, то вы, вероятно, знаете различные методы позиционирования и текстового отступа и их плюсы и минусы. CSS Clip - это хороший способ, возможно, лучший способ сделать это на данный момент
Определение и примечания.
1. Свойство CSS clip создает прямоугольное окно, которое показывает часть элемента.
2. Свойство клипа создает маску, через которую отображается часть изображения. Она применима только с абсолютно позиционированными элементами. Только разрешенная форма прямоугольника .
HTML
Код <div id="window"><img src="Ссылка на изображение" width="420" height="260" alt="TinTin"></div>
CSS
Код #window {
height:258px;
width: 415px;
position: absolute;
left: 100px;
clip: rect(90px 155px 185px 80px);
-webkit-transition: linear 1s;
transition: linear 1s;
}
#window:hover {
clip: rect(0 415px 258px 0);
}
Демонстрация
Так как значения CSS Clip являются анимированными, это позволяет использовать довольно приятный пользовательский интерфейс.
| | Страна: (RU) |
| |
