Când îmbunătățim imaginile, putem alege să o facem cu Photoshop și apoi să o montăm pe pagina web sau putem alege, de asemenea, opțiunea B: faceți-o cu tehnicile HTML, CSS și Javascript disponibile.
După salt există multe tehnici de îmbunătățire a imaginilor, aproape toate realizate cu jQuery ca bază principală sau cu CSS3 profitând de cele mai noi standarde web, deși vă reamintesc că, în acest caz, pierdem compatibilitatea cu unele browsere.
Sunt în engleză, dar sunt prinși din mers, promis :)
Sursa | 1stWD
CSS3 Imagine rotunjită cu jQuery
Aflați cum să înfășurați o etichetă span în jurul elementului de imagine pentru a obține imagini rotunjite care vor fi afișate chiar în toate browserele moderne.
2.
Fundaluri și frontiere multiple cu CSS 2.1
Aflați cum să utilizați pseudo-elementele CSS 2.1 pentru a furniza până la 3 pânze de fundal, 2 imagini de prezentare de dimensiuni fixe și mai multe chenare complexe pentru un singur element HTML.
3.
Sfat rapid: mai multe margini cu CSS simplu
Screencast rapid care vă arată cum să realizați mai multe frontiere cu CSS simplu, adăugând astfel mai multă adâncime proiectelor dvs. Versiune mult mai simplă a tutorialului anterior.
4.
Borduri multiple pe elemente cu dimensiuni dinamice cu CSS2
A treia versiune a Nicholas Gallagher care vă arată ce trebuie să faceți dacă nu faceți dimensiunea elementului.
5.
Distrează-te cu borduri - teșit, presat și multe altele!
Aflați cum să obțineți efectul apăsat cu CSS și câteva trucuri simple în stilul chenarului pentru a obține diverse efecte.
6.
Polaroizi cu CSS3
Aflați cum să utilizați câteva CSS2 și CSS3 minunate pentru a transforma o listă de imagini altfel modestă într-un set complet de imagini Polaroid.
7.
Imagine de fundal perfectă a paginii complete
Aflați cum să adăugați imagini de fundal cu CSS care umple întreaga pagină cu imagine, fără spațiu alb, scalează imaginea după cum este necesar, nu provoacă bare de derulare și multe altele.
8.
CSS3 Box Shadow și Image Hover Effects
Explorează un nou mod de a adăuga efecte de umbră doar prin editarea unei foi de stil.
9.
Fancy Thumbnail Hover Effect w / jQuery
Obțineți un efect de stil flash cu CSS și jQuery.
10.
Cum se creează un efect simplu de trecere a imaginii CSS
În acest tutorial veți învăța cum să creați un efect simplu de trecere a imaginii CSS cu stilul de bază HTML și CSS.
11.
tutorial
Floatutorial vă duce prin elementele de bază ale elementelor plutitoare, cum ar fi imagini, majuscule, butoane următoare și înapoi, galerii de imagini, liste în linie și machete cu mai multe coloane. Consultați 4 tutoriale dedicate imaginilor plutitoare.
12.
Snazzy Hover Effects folosind CSS
În acest tutorial, veți trece peste crearea de tehnici avansate flexibile de hover folosind proprietăți CSS2.1.
13.
Transferuri rapide fără
Preîncărcare
Atunci când utilizați trecerea imaginilor CSS, trebuie încărcate două, trei sau mai multe imagini (și deseori trebuie încărcate pentru a obține cele mai bune rezultate). Aflați cum să puneți toate stările într-o singură imagine, modificările dinamice sunt mai rapide și nu necesită preîncărcare.
14.
jQuery Colțuri rotunjite
O mulțime de efecte jQuery pentru colțuri rotunjite și mult mai multe modele.
15.
Cea mai ușoară descriere de informații și previzualizare imagine utilizând jQuery
Vedeți 3 exemple de utilizare a scriptului de previzualizare a rulării jQuery. Acest script simplu poate fi aplicat pentru o varietate de scopuri.
16.
Supradimensionat - fundal ecran complet /
Slideshow
Plugin jQuery
Superzided este un plugin jQuery care redimensionează imaginile pentru a umple browserul, menținând în același timp raportul de dimensiune a imaginii și cicluează imagini / fundaluri prin prezentare de diapozitive cu tranziții și preîncărcare.
17.
PNG Suprapunere
V-ați confruntat vreodată cu problema creării unui site cu imagini oferite de client, pentru a găsi mai târziu, după ce își actualizează fotografia, aspectul și simțul original nu sunt păstrate? Această soluție implică crearea unei suprapuneri PNG transparente care poate fi folosită ca mască / cadru în jurul JPEG-ului obișnuit sau GIF. În acest fel, se poate configura o instalare tipică CMS, astfel încât utilizatorii să poată încărca fotografii fără a fi nevoiți să se îngrijoreze de utilizarea oricărui program grafic pentru a aplica filtre.
18.
BeZoom
Greutate mică
JQuery
Plugin Zoom
BeZoom este o alternativă simplă și ușoară pentru JQZoom. Este mai ușor și este mai ușor de utilizat.
19.
Utilizarea jQuery pentru animații de imagine de fundal
Joacă-te cu jQuery și schimbă poziția imaginii de fundal pentru a crea tipul de efect pe care îl cauți. Există un nou articol care răspunde la „Cum gestionez stările active?” - Gestionarea stării active pentru fundaluri animate jQuery.
20.
5 moduri de a vă condimenta imaginile cu CSS
Iată câteva trucuri simple pentru a adăuga o anumită aromă imaginilor tipice blande. Utilizarea Photoshop pentru stilizarea fiecărei imagini poate fi obositoare și dificil de întreținut pe termen lung. Următoarele tehnici CSS vă vor ajuta să ușurați acea durere.
21.
Cum să:
Redimensionabil
Imagine de fundal
Aflați cum să configurați o imagine de fundal redimensionabilă cu CSS. Aveți la dispoziție 3 opțiuni.
22.
Stilează-ți linkurile pentru imagini
Anunțarea utilizatorilor că o anumită secțiune a site-ului nostru web este menită să fie făcută clic este cel mai bine realizată prin efectul mouse over. Aceste secțiuni cu „clic” includ cu siguranță imagini de conținut. Image Link este un script care vă permite să aplicați un stil suplimentar linkurilor dvs. de imagine.
23.
Imagini de fundal multiple cu CSS
Uneori, este mai logic să folosiți imagini de fundal decât să le inserați direct în pagină. Și în timp ce fiecare element - cum ar fi eticheta corpului dvs. - poate conține o singură imagine de fundal, acestea pot fi aplicate mai multor elemente.
24.
Borduri de imagine cu CSS
Tutorial foarte ușor care vă arată cum să adăugați o margine solidă la imagini folosind CSS.
25.
Sprite CSS fără a utiliza imagini de fundal
Aflați cum să aplicați efectul de deplasare fără multe cunoștințe despre spriturile CSS.
