Снова небольшой туториал по jQuery (не надоело еще?) по изменению размеров изображения в зависимости от размеров окна браузера. Правильнее сказать, это не изменение размеров, а подгрузка изображение большего или меньшего размера. Кстати, Last.Fm использует данный прием на страницах артистов.

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пикс., используется уменьшенная картинка, в остальных случаях – полноразмерная. Функция запускается при первой загрузке страницы и в при любом изменении размеров окна браузера.
Можно пойти дальше и ресайзить одну картинку в процентном соотношении от размера окна, но тут есть риск получить некачественное и размытое изображение.

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

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

Свойство border-radius в CSS3 позволяет быстро и удобно создавать закругленные уголки в браузерах, которые его поддерживают, т.е. Firefox, Safari и Chrome. Но по какой-то таинственной причине, данное свойство не поддерживается в IE, поэтому для отображения в нем закругленных уголков приходится использовать другие методы, вроде изображений.
Данный быстрый и простой метод с использованием CSS3 и JavaScript позволит использовать закругленные уголки в любом браузере. Этот метод использует бесплатную библиотеку CurvyCorners. Результат будет выглядеть вот так:

Преимущество этого метода в том, что он использует -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");
...

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

...

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

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

Источник: #.