В этой статье представлены 5 полезных свойств CSS . Вы должны быть знакомы с ним, но, вероятно, будете редко его использовать. Я не говорю о новых свойствах CSS3, я говорю о старых свойствах CSS2, таких как clip, min-height, white-space, curosr и display, которые широко поддерживаются всеми браузерами. Так что не пропустите эту статью, она может оказаться вам очень полезной.
1. CSS-клип
Свойство clip похоже на маску. Он позволяет маскировать содержимое элементов страницы с помощью прямоугольников. Чтобы обрезать элемент: необходимо указать его свойство позиции как абсолютное, а затем указать верхнее, правое, нижнее и левое значения относительно элемента.
.gif)
Пример обрезки изображения ( демо )
В следующем примере показано, как использовать свойство clip для маскировки изображения. Сначала укажите для элемента
.gif)
.клип {
положение: относительное;
высота: 130 пикселей;
ширина: 200 пикселей;
граница: сплошная 1 пиксель #ccc;
}
.clip изображение {
позиция: абсолютная;
клип: прямоугольник (30 пикселей, 165 пикселей, 100 пикселей, 30 пикселей);
}
Изменение размера и обрезка изображения ( демо )
В этом примере я покажу вам, как изменить размер и обрезать изображение. Стандартное изображение имеет прямоугольную форму, и я хочу уменьшить его до 50 % от его размера, чтобы создать миниатюру квадратного формата. Поэтому я использовал свойства ширины и высоты, чтобы изменить размер изображения, и свойство clip, чтобы замаскировать его. Затем используйте атрибут left, чтобы переместить изображение на 15 пикселей влево.
.gif)
.
галерея ли {
плавать: влево;
поле: 0 10 пикселей 0 0;
положение: относительное;
ширина: 70 пикселей;
высота: 70 пикселей;
граница: сплошная 1 пиксель #000;
}
.галерея изображения {
ширина: 100 пикселей;
высота: 70 пикселей;
позиция: абсолютная;
клип: прямоугольник (0 85 пикселей 70 пикселей 15 пикселей);
слева: -15 пикселей;
}