Если же кто-то хочет использовать локальную версию оффлайн (что, в общем-то, намного удобнее и быстрее) – можно скачать исходники здесь. Импортируйте firebug-lite-compressed.js или firebug-lite.js в директорию вашего сайта. Найдите firebug-lite.css в импортированном файле и замените его локальным адресом файла firebug-lite.css.

Теперь при запуске страницы в браузере в нем будет присутствовать Firebug Lite. Вот как это выглядит в ИЕ:

Конечно, эта библиотека не заменяет на 100% весь функционал Firebug. Например, отсутствует дебаггер JavaScript (кто-нибудь знает, как писать дебаггер JavaScript на JavaScript???) и так же в нем нет указания координат инспектируемого элемента. Есть определенные неудобства с редактированием CSS. Тем не менее, даже такой FireBug – это значительно лучше и удобнее, чем его полное отсутствие для браузеров, отличных от Gecko-based, и определенно стоящее того, чтобы регулярно им пользоваться.

Оригинал статьи: #.

1. В Фотошопе включить proof colors (View -> Proof Colors)
2. Удостовериться, что Proof Setup настроен на Monitor RGB (View -> Proof setup -> Monitor RGB)
3. При сохранении для web (Save for web) выставить 24-битный PNG, отключить interlacing и снять галочку Convert to SRGB.
(Не будет работать в ИЕ6, но кому он нужен?..)

Git: git://github.com/rafaelp/css_browser_selector.git
Либо забирать здесь: http://github.com/rafaelp/css_browser_selector/blob/master/css_browser_selector.js

1. Вставить строку в заголовок страницы, внутри тэга HEAD:

2. Установить атрибуты классов для нужных браузеров и ОС, например:

html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[os].[browser] .mylink { font-weight: bold; } -> без пробелов между .[os] и .[browser]

Коды ОС [os]:
win – Microsoft Windows
linux – Linux (x11 и linux)
mac – Mac OS
freebsd – FreeBSD
ipod – iPod Touch
iphone – iPhone
webtv – WebTV
mobile – J2ME (напр.: Opera mini)

Коды браузеров [browser]:
ie – Internet Explorer (все версии)
ie8 – Internet Explorer 8.x
ie7 – Internet Explorer 7.x
ie6 – Internet Explorer 6.x
ie5 – Internet Explorer 5.x
gecko – Mozilla, Firefox (все версии), Camino
ff2 – Firefox 2
ff3 – Firefox 3
ff3_5 – Firefox 3.5 new
opera – Opera (все версии)
opera8 – Opera 8.x
opera9 – Opera 9.x
opera10 – Opera 10.x
konqueror – Konqueror
webkit или safari – Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 – Safari 3.x
chrome – Google Chrome
iron – SRWare Iron

Допольнительный код:
js – доступен, когда java-script включен, так что можно скрывать/отображать нужное

Страница библиотеки.
Демо. В примере, использованном в демо, квадрат окрашивается в разный цвет, в зависимости от браузера.

CSS, использованный в примере:

.ie .example {
  background-color: yellow
}
.ie7 .example {
  background-color: orange
}
.gecko .example {
  background-color: gray
}
.win.gecko .example {
  background-color: red
}
.linux.gecko .example {
  background-color: pink
}
.opera .example {
  background-color: green
}
.konqueror .example {
  background-color: blue
}
.webkit .example {
  background-color: black
}
.example {
  width: 100px;
  height: 100px;
}
.no_js { display: block }
.has_js { display: none }
.js .no_js { display: none }
.js .has_js { display: block }

1. Нужный кусок HTML-кода

  

(Type words here)

Главное, что тут понадобится – это класс .fluidimage

2. Теперь нужный CSS

body { text-align:center; }
img { float: rightright; margin: 0px 10px 10px 10px;}
#content { width:70%; margin: 0px auto; text-align: left; }

Для удобства восприятия опущены всякие графические стили и “украшательства” и приведены только действительно нужные в данном случае.

3. Изменения изображения с помощью jQuery

Этот скрипт содержит функцию, которая меняет изображения в зависимости от размеров окна. Если ширина браузера менее 700пикс., используется уменьшенная картинка, в остальных случаях – полноразмерная. Функция запускается при первой загрузке страницы и в при любом изменении размеров окна браузера.
Можно пойти дальше и ресайзить одну картинку в процентном соотношении от размера окна, но тут есть риск получить некачественное и размытое изображение.

Демо туториала
Скачать скрипт

Оригинал статьи: #.

Преимущество этого метода в том, что он использует -webkit-border-radius и -moz-border-radius для Firefox, Safari и Chrome и JavaScript для IE и Opera.

В раздел HEAD страницы нужно встроить библиотеку:

Затем используется CSS-класс:

.roundedCorners{
width: 220px;
padding: 10px;
background-color: #DDEEF6;
border:1px solid #DDEEF6;

/* Закругление (native in Safari, Firefox and Chrome) */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}

После этого кода добавить еще такой скрипт:

tl, tr, bl, br соответственно означают верхний левый, верхний правый, нижний левый и нижний правый углы.

Если у вас несколько разных CSS-классов (напр., roundedCorners, roundedCorners_1, roundedCorners_2), их можно использовать, изменяя скрипт соответственно:

...
curvyCorners(setting, ".roundedCorners");
curvyCorners(setting, ".roundedCorners_1");
curvyCorners(setting, ".roundedCorners_2");
...

Нужную конструкцию заключить в контейнер

...

Результат будет выглядеть так:

Демо-скрипты можно скачать здесь

Источник: #.

1. Подгружаем библиотеку.

2. HTML просматриваемой области состоит из 5 элементов.
The Wrap (#wrap) – контейнер.
Small Area (#small) – просматриваемая зона по умолчанию, по которой проводится мышкой для увеличения.
Large (#large) – увеличенная облась.
Overlay (#overlay) – контейнер-”увеличитель”, следующий за движениями мышки.
Mover (#mover) – сворачивание и перекрытие увеличенной зоны.
Не обязательно использовать именно эти ID, можно объявлять и свои.

3. CSS.

#wrap          { width: 600px; position: relative; }
#small         { position: relative; width: 100%; }
#large         { background: white; position: relative; width: 600px; }
#mover         { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; z-index: 100; background: white; display: none; }
#overlay       { border: 1px solid blue; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }

4. Параметры

$("#wrap").anythingZoomer({

      expansionSize: 30,      // Как далеко может отходить мышь от краев
      speedMultiplier: 1.4,   // Насколько быстрее внутренняя зона движется быстрее мыши

      smallArea: "#small",    // Перекрытие ID маленькой зоны
      largeArea: "#large",    // Перекрытие ID большой зоны
      zoomPort: "#overlay",   // Перекрытие ID "увеличителя"
      mover: "#mover"         // Перекрытие ID движущихся элементов
});

Варианты демо смотреть здесь

Оригинал статьи

1. Создайте HTML-страницу.

post: 

2. Создайте CSS-файл.

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:11px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:993px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:993px;
height:52px;
margin:22px 0 0;
background:url url(images/nav-bg.png) 0 0 no-repeat;
}
div#top div#nav ul{
float:left;
width:700px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:683px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
background:url(images/header-bg.png) 50% 0 no-repeat;
}
div#header div#slide-holder{
z-index:40;
width:993px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:973px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:973px;
height:46px;
display:none;
position:absolute;
background:url(images/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

3. Скопируйте и вставьте этот код в вашу станицу после основного HTML-кода перед закрывающим BODY-тэгом. Вы можете легко изменить заголовок и описание – поменяйте команду “client” для заголовка и команду “desc” для описания.

4. Скачайте файлы jquery.js и scripts.js и вставьте ссылки на них в секции HEAD.

Демо примера.
Файловый архив.
Оригинал статьи.

Если в документе имеется встроенный (inline) стиль, который вы не можете удалить, и который вам необходимо использовать по-другому, то можно достаточно легко его перекрыть в основном файле стилей.

Берем для примера вот такой код:

The inline styles for this div should make it red.

Его можно перекрыть таким приемом:

div[style] {
background: yellow !important;
}

Не работает в ИЕ6, но оно нам надо?…

Подсмотрено здесь.

2. Качаем jQuery-плагин.

3. Добавляем в страницу следующий код:
В заголовок:

//required

В тело страницы код формы:

Name: 

Ну и наконец, вызов плагина:

Стало:

Если перейти по ссылке в оригинал туториала, можно обратить внимание на эффекты цвета и событий при клике и наведении мышкой.

Работает в т.ч. и в IE6, Safari 2+ и FF 2+.