CSS » Страница 10 » СОЗДАНИЕ САЙТОВ | Разработка сайтов

Тень для блока кроссбраузерно с помощью CSS #

Cпособ кроссбраузерной реализации css-свойства box-shadow.
для обычных браузеров

div {
    background: green; /* обязательно для ie */
    -webkit-box-shadow: 0px 0px 15px #222;
    -moz-box-shadow: 0px 0px 15px #222;
    box-shadow: 0px 0px 15px #222;
}

Суть реализации свойства box-shadow для ie сводится к четырёхкратному применению фильтра shadow с разными значениями direction. Таким образом тень начинает обрамлять весь контур контейнера.

для ИЕ

Несколько нюансов, на которые стоит обратить внимание:

Тень, при использовании фильтра получается темнее, поэтому, чтобы добиться идентичности, нужно поиграться с параметрами color и strength
IE увеличивает размеры блока на ширину тени, а так как для каждой стороны у нас по сути две тени, то и увеличение размеров становится двоекратным. Т.е. в конце нам нужно относительно сместить блок влево и вверх по формуле left = top = -(strength*2)
IE6 и IE7 требуют hasLayout, поэтому для них ставим zoom: 1 (или ширину, высоту и другие свойства, которые присваивают hasLayout)
Для блока обязательно нужно задавать фон, иначе фильтр будет применяться к дочерним элементам

Минусы:

Фильтры — это всегда лишние тормоза
IE выключает сглаживание текста внутри блока с фильтрами
Тень в IE по форме отличается от тени в других браузерах (более квадратная)
Внутри таким образом оформленного блока перестаёт работать alphaImageLoader (возможно и другие фильтры тоже — не проверял)

взято с хабра

Демо

Блог » CSS / Теги: css, demo, cross, shadow / 05.06.10 / Комментировать [1]

Он-лайн построение форм #

Он-лайн построение форм. Возможно кому-то с экономит время.

Смотреть

CSS, XHTML, JavaScript, Обзор / / 30.05.10 / Комментировать [0]

JQuery Narrative Select Plugin #

Скрипт заменяет обычные селекторы на такие как в скрине, при нажатии на "ссылку" появляется всплывающее окошко с выбором опции.

Демо / Скачать

CSS, XHTML, JavaScript, Обзор / Теги: селектор, вид, jquery / 28.05.10 / Комментировать [0]

Хороший jQuery UI Slider #

Один из лучших слайдеров которые я встречал.
ДЕМО Откуда скачать незнаю поэтому если нужно выдергивайте с демки -)

CSS, XHTML, JavaScript / Теги: jQuery, UI, Slider / 27.05.10 / Комментировать [1]

Expression для IE6 #

Эмуляция position:fixed

html{
   background: url('/0.gif') no-repeat;
   background-attachment: fixed; /*избавляемся от дергания при вертикально прокрутки*/
   }
#header{
    width: 100%;
    padding: 0.5em 0;
    background-color: #000;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    //position: absolute;
    //top: expression(eval(document.documentElement.scrollTop) + 'px');
   }

#content{
   height:4000px;
   }

Какой-то контент

Вертикальное выравнивание в CSS

#out{
   height:500px;
   display:table-cell;
   vertical-align:middle;
}

#centered {
   margin-top: expression(((outer.offsetHeight/2)-parseInt(offsetHeight)/2)<0 ? "0" : (centered.offsetHeight/2)-(parseInt(offsetHeight)/2) +'px');
}

...

Избавляемся от моргания фонового изображения в IE

   body{
      filter: expression(document.execCommand("BackgroundImageCache", false, true));
   }

min-width и max-width в IE6

   #container
   {
       min-width: 600px;
       max-width: 1200px;
       width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
   }

PNG для IE6 (не проверял)

* html img, * html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}

С expression забудьте о валидации и о хорошей производительности.

CSS, XHTML / Теги: Expression, верстка, IE sux, IE6 / 27.05.10 / Комментировать [0]

Кнопки как у Гугла (с картинкой) #

Смотреть: Демо