Когато подобряваме изображенията, можем да изберем да го направим с Photoshop и след това да го монтираме на уеб страницата или да изберете опция Б: направете го с наличните техники HTML, CSS и Javascript.
След скока има много техники за подобряване на изображенията, почти всички направени с jQuery като основна основа или с CSS3 възползвайки се от най-новите уеб стандарти, въпреки че ви напомням, че в този случай губим съвместимост с някои браузъри.
Те са на английски, но са хванати в движение, обеща :)
Източник | 1-ви WD
CSS3 заоблено изображение с jQuery
Научете се да увивате етикет за размах около елемента на изображението, за да постигнете заоблени изображения, които ще се показват точно във всички съвременни браузъри.
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 и Image Hover Effects
Изследвайте нов начин за добавяне на ефекти на сенките, просто като редактирате таблица със стилове.
9.
Фантастичен ефект на задържане на миниизображение w / jQuery
Постигнете изискан ефект в стил флаш с CSS и jQuery.
10.
Как да създадете прост ефект на преобръщане на CSS изображение
В този урок ще научите как да създадете прост ефект на преобръщане на CSS изображение с основен HTML и CSS стил.
11.
урок
Floatutorial ще ви преведе през основите на плаващите елементи като изображения, капачки, следващи и назад бутони, галерии с изображения, вградени списъци и оформления с много колони. Вижте 4 урока, посветени на плаващото изображение.
12.
Snazzy Hover Effects с помощта на CSS
В този урок ще преминете към създаването на гъвкави разширени техники на задържане, използвайки CSS2.1 свойства.
13.
Бързо преобръщане без
Предварително зареждане
Когато използвате преобръщане на CSS изображения, трябва да бъдат заредени две, три или повече изображения (и често предварително заредени за най-добри резултати). Научете как да поставите всички състояния в едно изображение, прави динамичните промени по-бързи и не изисква предварително зареждане.
14.
jQuery заоблени ъгли
Много ефекти на jQuery за заоблени ъгли и много повече модели.
15.
Най-лесният подсказка и визуализация на изображения с помощта на jQuery
Вижте 3 примера за използване на скрипт за предварителен преглед на jQuery. Този прост скрипт може да се прилага за различни цели.
16.
Свръхразмер - фон на цял екран /
Slideshow
jQuery приставка
Superzided е jQuery приставка, която преоразмерява изображенията, за да запълни браузъра, като същевременно поддържа съотношението на размерите на изображението и циклира изображения / фонове чрез слайдшоу с преходи и предварително зареждане.
17.
PNG наслагване
Случвало ли ви се е да се сблъскате с проблема със създаването на сайт със снимки, дадени от клиента, само за да откриете по-късно, след като актуализират снимките си, оригиналният вид и усещането не се запазват? Това решение включва създаване на прозрачно PNG наслагване, което може да се използва като маска / рамка около обикновен JPEG или GIF. По този начин може да се конфигурира типична инсталация на CMS, така че потребителите да могат да качват снимки, без да се притесняват дали да използват графична програма за прилагане на филтри.
18.
BeZoom
Леко тегло
JQuery
Приставка за мащабиране
BeZoom е проста и лека алтернатива за JQZoom. По-лек е и е по-лесен за използване.
19.
Използване на jQuery за анимации на фонови изображения
Играйте с jQuery и променете позицията на фоновото изображение, за да създадете типа ефект, който търсите. Има нова статия, която отговаря на въпроса „Как да се справя с активните състояния?“ - Обработка на активно състояние за анимирани фонове на jQuery.
20.
5 начина да подправите вашите изображения с CSS
Ето няколко прости трика, за да добавите малко вкус към типичните си скучни изображения. Използването на Photoshop за оформяне на всяко изображение може да бъде досадно и трудно за поддържане в дългосрочен план. Тези следващи CSS техники ще ви помогнат да облекчите тази болка.
21.
Как да:
Възможност за промяна на размера
Фоново изображение
Научете как да настроите фоново изображение с променлив размер с CSS. Имате 3 възможности за избор.
22.
Оформете връзките си към изображението
Уведомяването на потребителите, че даден раздел на нашия уебсайт е предназначен да бъде щракнат, е най-добре да се постигне чрез ефект на мишката. Тези „кликващи“ секции със сигурност включват изображения със съдържание. Image Link е скрипт, който ви позволява да приложите допълнителен стил към вашите връзки към изображения.
23.
Множество фонови изображения с CSS
Понякога има по-смисъл да използвате фонови изображения, отколкото да ги вмъквате директно в страницата. И докато всеки елемент - като маркера на тялото ви - може да съдържа само едно фоново изображение, те могат да бъдат приложени към няколко елемента.
24.
Границите на изображението с CSS
Наистина лесен урок, който ви показва как да добавите плътна граница към изображения с помощта на CSS.
25.
CSS спрайтове без използване на фонови изображения
Научете как да приложите ефект на задържане без много знания за CSS спрайтове.
