Posts Tagged Уроки CSS

Хак для IE6 и для IE7

Posted by admin in CSS, Заметки on 11.08.2010

Всем верстальщикам приходилось бороться с этими проклятыми браузерами, было потрачено много сил и «энергии», а самое главное это нервов. И в конце концов приходилось применять различные хаки.

Так вот в этой заметке я упомяну про один, ну по крайней мере до сегодня не известный для меня хак. Этот хак обычная запятая(,). Да да именно запятая. Заметил это совершенно случайно верстая клиенту сайт и для нескольких блоков хотел задать другой цвет текста.

Демо в пример. Во всех браузерах цвет текста серый, а в IE6 и IE7 зеленый

Популярность: 26% [?]

, , , , ,

Комментариев нет

Проблема с отступами IE6

Posted by admin in CSS, Заметки on 9.08.2010

Скажу о том, что речь идет о проблеме плавающих блоков, когда им задается margin слева или справа, в IE фактическое значение этих отступов удваивается, так вот, для того, чтобы решить эту проблеме блоку нужно добавить свойство display: inline.

Популярность: 28% [?]

, , , ,

Комментариев нет

Создаем раздвижную панель с помощью CSS и jQuery

Posted by admin in CSS, jQuery on 21.02.2010

panel

Мы все чаще и чаще видим людей использующих на своих сайта горизонтально раздвижные панели. Зачастую все это выглядит очень привлекательно. Используются такие панели чаще всего в форме контактов, обратной связи.

Отмечу сразу что такие панели не очень хорошо влияют на юзабилити, но для красоты и подчеркивания индивидуальности вашего блога (сайта) они сделают свое дело.

План действий:

нам будут нужны такие файлы

  • index.html
  • style.css
  • фраймворк jQuery (скачать здесь)
  • изображения, есть в архиве с уроком ()

ну еще я дум нам понадобятся умелые руки ;-)

Там есть еще »

Популярность: 100% [?]

, , ,

Комментариев нет

3D глубина с помощью CSS3

Posted by admin in CSS on 19.02.2010

В современном дизайне сайтов очень часто используется этот прием. Давайте посмотрим на него в близи

designm.ag

designmag

yoast.com Там есть еще »

Популярность: 45% [?]

, , , , ,

Комментариев нет

Закругление углов через CSS

Posted by admin in CSS on 24.12.2009

Здраствуйте. В этой статье разговор пойдет о «великом и могучем» CSS третьей версии. Как мы знаем то поддерживается он частично всеми браузерами, но совсем он не поддерживается Interne Explorer.

Эта статья предназначается менее опытным пользователем, или даже начинающим «покорителям» CSS. Итак можно приступить. Первым делом мы попробуем закруглить уголки у блока. Привожу листинг

#box {
  width: 300px;
 height: 150px;
 border: 1px solid #003c7b;
 background: #58a7f6;
 -webkit-border-radius: 10px; /* Отвечает за скругление уголков у Google Chrome и Apple Safari  */
 -moz-border-radius: 10px; /* Mozilla Firefox */
 }

Поддерживается Google Chrome, Mozilla Firefox, Apple Safari. Demo смотрим здесь

Эффект отбрасываемой тени:

#box {
            width: 300px;
            height: 150px;
            border: 1px solid #003c7b;
            background: #58a7f6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            /*Эффекты*/
            -webkit-box-shadow: #999999 3px 3px 3px;
            -moz-box-shadow: #999999 3px 3px 3px;
            box-shadow: #999999 3px 3px 3px;
        }

Поддерживается Google Chrome, Mozilla Firefox, Apple Safari.

Эффект отбрасываемой тени текстом

#box {
            width: 300px;
            height: 150px;
            border: 1px solid #003c7b;
            background: #58a7f6;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -webkit-box-shadow: #999999 3px 3px 3px;
            -moz-box-shadow: #999999 3px 3px 3px;
            box-shadow: #999999 3px 3px 3px;
            /*Эффекты*/
            text-shadow: #fff 3px 3px 3px;
        }

Популярность: 27% [?]

, , , ,

Комментариев нет