Несколько простых примеров использования CSS 3

HTML, верстка, кодинг, CSS /

Так как я предпочитаю программирование, то за технологиями в мире вёрстки и дизайна особо не слежу. Да про CSS3 слышал, да говорят круто, но что там такого крутого не разбирался. После Я.Субботника меня заинтересовало это слово CSS3, и вот вчера вечерком я сел смотреть что это за зверь такой. Далее будут описаны простые примеры, так что если вы уже знакомы с этой технологией, то вам скорее всего будет скучно читать, всех остальных прошу под кат.


Все ниже перечисленные свойства в ИЕ в зависимости от версии то работают, то не работают, так что надпись кроссбраузерный вариант, подразумевает: в Опере, Хроме и Фоксе :) В любом случае использованием в ИЕ этих свойств вы ничего не сломаете, просто для пользователей ИЕ будет как просмотр красивых пейзажей природы на чёрно-белом телевизоре )))

border-radius или закругляем углы



.css3
{
   border-radius: 10px;
}

Вот что получается в итоге

Кроссбраузерный вариант:

.css3
{
   border-radius: 20px;
   -moz-border-radius: 20px;
   -webkit-border-bottom-left-radius: 20px;
   -webkit-border-bottom-right-radius: 20px;
   -khtml-border-radius: 20px;
{

Почитать подробнее про border-radius на htmlbook

box-shadow или отбрасываем тень



.css3
{
   box-shadow: 0 0 5px black;
}

Вот что получается в итоге

С этим свойством у меня в Опере случился глюк, если задаешь тень элементу ширина которого = 100%, то появляется полоса прокрутки. Погуглив на эту тему нашёл, что это баг Оперы, который они до сих пор не решили. Но можно воспользоваться костылём overflow-x: hidden. Так что если для вас не критична горизонтальная прокрутка, можете использовать костыль.

Почитать подробнее про box-shadow на htmlbook

background-image: linear-gradient



.css3
{
   background-image: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 50%);
}

Вот что получается в итоге

Кроссбраузерный вариант:

.css3
{
   background-image: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 50%);
   background-image: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 50%);
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(50%,rgba(255,255,255,.1))); 
   background-image: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 50%);
   background-image: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 50%);
}

В ИЕшечке работает только с 10 версии, для более ранних версий предлагают использовать:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');


Всё вместе это смотрится так

P.S.
Если у вас какое-то из свойств не работает, в комментах напишите версию браузера.

12 комментариев

yakooobin
ток в ишаке глюки или в 7 и 8 тоже?
RadMax
увы, 7 и 8 тоже не знают этих свойств
RadMax
под глюками вы же подразумевали что эти свойства не работают, или в 6, всё перекосило?
yakooobin
ну перекосы то лечить можно
а вот если не работает, тут уже сложнее
нефункциональность имел ввиду
CLackyM
askaridze
Оказалось сайт работает на JS можно скачать с помощью Teleport Pro, и использовать локально
CLackyM
Хех, это прога ещё жива?! Я лет семь про неё не слышал по причине постоянного наличия интернета.
Al1sher
Плюсик за картинку) и спс за пример!
timus
Для работы этих плюшек в IE существует css3pie.com
kadyrkhan
Спасибо за ссылку на онлайн сервис. Забираю в копилочку.
makenskiy
Если делать макет в котором используется много разных правил из css 3, возникает следующии и печальные проблемы:

1. Не совместимость некоторых фильров для IE друг с другом.
2. Чрезмерное их количество вешает ишака, а пользователь то думает, что тупит сайт, а не браузер.
3. По мимо ишака приходится еще вбивать костыли для оперы. К примеру свойство box-shadow не работает в инпутах, что приводит к лишним движениям создавая дополнительный прозрачный слой.
4. И другие нюансы.

Для себя сделал вывод, что css 3 кроссбраузерным на всех версиях быть не может, верней может, но это такой геммор, что лучше с верстать по старому.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.