При улучшении изображений мы можем сделать это с помощью Photoshop, а затем смонтировать его на веб-странице, или мы также можем выбрать вариант B: сделайте это с помощью доступных техник HTML, CSS и Javascript.
После скачка есть много методов для улучшения изображений, почти все они сделаны с использованием jQuery в качестве основной базы или с помощью CSS3. используя преимущества новейших веб-стандартов, хотя напоминаю, что в этом случае мы теряем совместимость с некоторыми браузерами.
Они на английском но ловят на лету, обещают :)
Источник | 1stWD
Закругленное изображение CSS3 с помощью jQuery
Научитесь оборачивать элемент изображения тегом span, чтобы получить округлые изображения, которые будут отображаться прямо во всех современных браузерах.
2.
Множественные фоны и границы с CSS 2.1
Узнайте, как использовать псевдоэлементы CSS 2.1 для создания до 3 фоновых полотен, 2 презентационных изображений фиксированного размера и нескольких сложных границ для одного элемента HTML.
3.
Совет: несколько границ с помощью простого CSS
Быстрый скринкаст, показывающий, как создать несколько границ с помощью простого CSS, что добавит глубины вашему дизайну. Намного более упрощенная версия предыдущего урока.
4.
Множественные границы на элементах с динамическим размером с помощью CSS2
Третья версия Николас Галлахер показывая вам, что делать, если вы не размер элемента.
5.
Веселитесь с границами - скошенные, отжатые и многое другое!
Узнайте, как добиться эффекта прижатия с помощью CSS, и несколько простых трюков со стилем границ для получения различных эффектов.
6.
Поляроиды с CSS3
Узнайте, как использовать потрясающие CSS2 и CSS3, чтобы превратить непритязательный список изображений в полноценный набор изображений Polaroid.
7.
Идеальное фоновое изображение для всей страницы
Узнайте, как добавить фоновое изображение с помощью CSS, которое заполняет всю страницу изображением, без пробелов, масштабирует изображение по мере необходимости, не вызывает полосы прокрутки и многое другое.
8.
CSS3 Box Shadow и эффекты наведения изображения
Изучите новый способ добавления эффектов тени, просто отредактировав таблицу стилей.
9.
Необычный эффект наведения миниатюры с jQuery
Добейтесь изящного эффекта в стиле flash с помощью CSS и jQuery.
10.
Как создать простой эффект ролловера изображения в CSS
В этом руководстве вы узнаете, как создать простой эффект наведения курсора изображения CSS с помощью базовых стилей HTML и CSS.
11.
Плавучий
Floatutorial познакомит вас с основами работы с плавающими элементами, такими как изображения, буквицы, кнопки «Далее» и «Назад», галереи изображений, встроенные списки и многоколоночные макеты. Ознакомьтесь с 4 уроками, посвященными плавающим изображениям.
12.
Эффекты при наведении курсора на CSS
В этом руководстве вы рассмотрите создание гибких расширенных методов наведения с помощью свойств CSS2.1.
13.
Быстрый ролловер без
предварительная нагрузка
При использовании ролловеров изображений CSS необходимо загрузить два, три или более изображений (и часто для достижения наилучших результатов они должны быть предварительно загружены). Узнайте, как поместить все состояния в одно изображение, чтобы динамические изменения выполнялись быстрее и не требовали предварительной загрузки.
14.
Закругленные углы jQuery
Множество эффектов jQuery для закругленных углов и многое другое.
15.
Самая простая подсказка и предварительный просмотр изображений с помощью jQuery
См. 3 примера использования сценария предварительного просмотра ролловера jQuery. Этот простой сценарий можно применять для различных целей.
16.
Увеличенный - полноэкранный фон /
слайд-шоу
Плагин jQuery
Superzided - это плагин jQuery, который изменяет размер изображений для заполнения браузера, сохраняя при этом соотношение размеров изображения и циклически меняя изображения / фоны через слайд-шоу с переходами и предварительной загрузкой.
17.
PNG оверлей
Вы когда-нибудь сталкивались с проблемой создания сайта с изображениями, предоставленными клиентом, только для того, чтобы позже обнаружить, что после обновления своих фотографий исходный внешний вид не сохраняется? Это решение включает создание прозрачного оверлея PNG, который можно использовать как маску / рамку вокруг обычного JPEG или GIF. Таким образом можно настроить типичную установку CMS, чтобы пользователи могли загружать фотографии, не беспокоясь об использовании какой-либо графической программы для применения фильтров.
18.
BeZoom
Lighweight
JQuery
Плагин Zoom
BeZoom - это простая и легкая альтернатива для JQZoom. Он легче и проще в использовании.
19.
Использование jQuery для анимации фоновых изображений
Поиграйте с jQuery и измените положение фонового изображения, чтобы создать желаемый эффект. Есть новая статья, отвечающая на вопрос "Как мне обрабатывать активные состояния?" - Обработка активного состояния для анимированных фонов jQuery.
20.
5 способов оживить изображения с помощью CSS
Вот несколько простых приемов, чтобы добавить изюминку к вашим типичным мягким изображениям. Использование Photoshop для стилизации каждого изображения может быть утомительным и сложным в долгосрочной перспективе. Эти следующие методы CSS помогут вам облегчить эту боль.
21.
Как:
Изменяемый размер
Изображение на заднем плане
Узнайте, как настроить фоновое изображение с изменяемым размером с помощью CSS. У вас есть 3 варианта на выбор.
22.
Оформляйте ссылки на изображения
Уведомление пользователей о том, что конкретный раздел нашего веб-сайта предназначен для нажатия, лучше всего достигается с помощью эффекта наведения мыши. Эти «кликабельные» разделы обязательно включают изображения содержимого. Ссылка на изображение - это скрипт, который позволяет применить дополнительный стиль к ссылкам на изображения.
23.
Несколько фоновых изображений с помощью CSS
Иногда имеет смысл использовать фоновые изображения, чем вставлять их прямо на страницу. И хотя каждый элемент, как и ваш тег body, может содержать только одно фоновое изображение, их можно применять к нескольким элементам.
24.
Границы изображений с помощью CSS
Действительно простой урок, показывающий, как добавить сплошную границу к изображениям с помощью CSS.
25.
CSS-спрайты без использования фоновых изображений
Узнайте, как применить эффект наведения, не обладая обширными знаниями о CSS-спрайтах.