CSS практик

Clip

Posted by: fxix on: Октябрь 23, 2008

В: Uncategorized
Комментарии выключены

Во-первых, свойство применяется только для абсолютно спозиционированных блоков. Жаль конечно, но такие правила.
Во-вторых, оно позволяет отображать определенную часть блока. На данный момент только прямоугольную. Как-то так:

Проще всего запомнить что: 1е и последнее число — это координаты левого верхнего угла, а средние два числа — правого нижнего угла вырезаемого прямоугольника. Я сделал специальный интересный пример, чтобы это проиллюстрировать. Если считать что (x1, y1) и (x2, y2) координаты левого верхнего и правого нижнего углов, то вот так все выглядит:

clip: rect(y1 x2, y2 x1)

Очевидно, подразумевается, что в будущем появится возможность вырезать эллипсы:

clip: ellipse(42px,14px,188px, 200px);

И где-то в CSS3D, я надеюсь, наконец появятся додекаэдры:

clip: dodecahedron(42px,16px, 188px, 100px); /*для построения додекадра достаточно знать координаты центра его симметрии, и радиус*/

clip: ИЕ и все остальные

Разумеется и тут не обошлось без нестыковок. Согласно спецификации расстояния должны писаться через запятую, вот так:

clip: rect(5px, 40px, 45px, 5px);

Однако, при использовании запятых ИЕ не воспринимает значения. Таким образом, приходится писать без них:

clip: rect(5px 40px 45px 5px);

Это не совсем валидно, но, тем не менее, воспринимается всеми броузерами.

png-24 в ИЕ

Пожалуй все уже знают что полупрозрачные PNG-24 файлы в ИЕ6 и ниже не работают. И для их нормальной работы нужно задавать фон как-то так:

1. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=’MYTERRIFIC.png’)

В этом методе прекрасно только одно: он вообще работает. Но он не позволяет нам использовать background-position. То есть вся крутость от прелоадов и спрайтов со всякими сдвиганиями фона теряется.

Мы можем заменить «crop» на «scale», тогда картинка просто растянется (не повторится), но контролировать background-posiiton не можем.

Можем. png-24 background-position в ИЕ!

Будем использовать, к примеру, такой вот рисунок, 200 на 200 пикселей. Для пущей простоты вычислений.

Так как все кроме ИЕ уже отображают PNG нормально, то для них сработает обычное:

1. a {
2. height:100px; width:200px;
3. background:url(nav.png) no-repeat 0 0;
4. }
5. a:hover{
6. background-position:0 -100px; /*фоновый рисунок сместится на 100 пикселей вверх, и визуально цвет пункта меню изменится*/
7. }

Для начала заставим ИЕ нормально отображать полупрозрачный PNG (эти стили должен увидеть только ИЕ):

1. a {
2. background:none;
3. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”nav.png”, sizingMethod=”crop”);

Вот что нужно теперь сделать для ИЕ:

1. a {
2. height:200px;/*чтобы вся картинка поместилась в фон, и было из чего вырезать*/
3. clip:rect(0px 200px 100px 0px); /*Вырезаем верхнюю часть картинки*/
4. }
5. a:hover {
6. clip:rect(100px 200px 200px 0px); /*Вырезаем нижнюю часть картинки*/
7. top:-100px;/*Так как clip вырезал нижнюю часть, и оставил пространство вверху, нужно приподнять видимую часть картинки вверх*/
8. }
Если словами: при наведении мышки, clip вырезает нижнюю часть ссылки (верхняя некликабельна становится). Таким образом, чтобы визуально она осталась на месте, приходится её поднять на высоту 100px вверх. А кликабельная область остается того же размера.

Раскладка. Равноудаленные элементы

Posted by: fxix on: Октябрь 23, 2008

В: Uncategorized
Комментарии выключены

Наша задача будет в том, чтобы расположить 4 элемента по горизонтали так, чтобы расстояние межу ними было равное и пропорционально изменялось в зависимости от размеров окна браузера. В качестве элементов будем использовать изображения, например круги. Вначале рассмотрим несколько способов, которые чаще всего стараются применить верстальщики и проблемы с которыми они сталкиваются.

1. Определим для каждого элемента ширину в % и позиционируем по левому краю:

CSS код:

img.first-r { left: 0%; position: relative; }
img.second-r { left: 25%; position: relative; }
img.third-r { left: 50%; position: relative; }
img.third-r { left: 75%; position: relative; }

Важно отметить, что свойство relative должно обязательно присутствовать. Это необходимо для того, чтобы крайний слева элемент позиционировался относительно родительского элемента, если тот имеет центрирование и не прилегает к левому краю. Проблема данного решения заключается в том, что левый отступ самого крайнего элемента справа в 75% отсчитывается от ширины окна браузера, но точкой отсчета будет левый край не окна, а родительского элемента. В результате этого, последний элемент уйдет за пределы экрана, а при определенном размере окна, наша строка и вовсе развалиться.

Если изменить значение relative на absolute, то несколько вышеуказанных проблем вам удастся разрешить и даже добиться равного расстояния между элементами. Но основной проблемой останется то, что все элементы будут иметь позиционирование по левому краю, и правила родительских элементов будут игнорироваться.

2. Определим для каждого элемента (кроме первого) отступ слева:

img.mover {
margin-left: 15%;
}

Тут нам даже не придется высчитывать отступы для каждого элемента – мы просто зададим общий равный отступ для трех элементов, начиная со второго. По идее все должно работать как надо, т.к. отступ будет отсчитывать от ширины окна браузера, так же как и ширина родительского элемента. также, блок do-not-wrap должен предотвратить разъезжание элементов. Но результат нас опять огорчит…

3. Обернем элементы табличной структурой

И даже этим способом мы не получим идеального результата – элементы будут равноудалены не всегда. Если задать для 2й и 3ей ячейке центрирование содержимого; крайней слева – по левому краю, и последней по правому краю, то в результате все должно работать как нужно, если… не изменять размеры окна браузера.

4. Что будем делать?

Предыдущий способ навел на некоторые мысли: попробуем позиционировать первый элемент по левому краю, а остальные по правому. Визуально это должно выглядеть так:

Равноудаленные элементы

HTML:

CSS:

#movers-row {
margin: -120px 0 0 120px;
}
#movers-row div {
width: 33.3%;
float: left;
}
#movers-row div img {
float: right;
}

Что ж, смотрим итоги наших попыток реализации равноудаленных элементов. Очевидно, что именно 4й способ и станет идеальным решением.

CSS практик

Clip

Раскладка. Равноудаленные элементы

Материалы