När vi förbättrar bilder kan vi välja att göra det med Photoshop och sedan montera det på webbsidan eller så kan vi också välja alternativ B: gör det med de tillgängliga HTML-, CSS- och Javascript-teknikerna.
Efter hoppet finns det många tekniker för att förbättra bilderna, nästan alla gjorda med jQuery som huvudbas eller med CSS3 dra nytta av de senaste webbstandarderna, även om jag påminner er om att vi i så fall tappar kompatibilitet med vissa webbläsare.
De är på engelska men de fångas i farten, lovade :)
Källa | 1:a WD
CSS3 rundad bild med jQuery
Lär dig att linda en span-tagg runt bildelementet för att uppnå rundade bilder som kommer att visas direkt i alla moderna webbläsare.
2.
Flera bakgrunder och gränser med CSS 2.1
Lär dig hur du använder CSS 2.1-pseudoelement för att ge upp till 3 bakgrundsdukar, 2 presentationsbilder i fast storlek och flera komplexa kanter för ett enda HTML-element.
3.
Snabbtips: Flera gränser med enkel CSS
Snabb skärmvisning som visar hur du uppnår flera gränser med enkel CSS på det sättet som ger dig mer djup i dina mönster. Mycket enklare version av tidigare handledning.
4.
Flera gränser på dynamiskt dimensionerade element med CSS2
Tredje versionen av Nicholas Gallagher visar dig vad du ska göra om du inte har storleken på elementet.
5.
Ha kul med gränser - avfasade, pressade och mer!
Lär dig hur man uppnår pressad effekt med CSS och några enkla gränsstilsnickor för att få olika effekter.
6.
Polaroids med CSS3
Lär dig hur du använder några fantastiska CSS2 och CSS3 för att förvandla en annars anspråkslös lista över bilder till en full uppsättning Polaroid-bilder.
7.
Perfekt helsides bakgrundsbild
Lär dig hur du lägger till bakgrundsbild med CSS som fyller hela sidan med bild, inget vitt utrymme, skalar bilden efter behov, orsakar inte rullningslister och mycket mer.
8.
CSS3 Box Shadow och Image Hover-effekter
Utforska ett nytt sätt att lägga till skuggeffekter genom att redigera ett formatmall.
9.
Fancy Thumbnail Hover Effect w / jQuery
Uppnå snygg flash-effekt med CSS och jQuery.
10.
Hur man skapar enkel CSS-bildöverföringseffekt
I den här handledningen kommer du att lära dig att skapa en enkel CSS-bildrulleeffekt med grundläggande HTML- och CSS-styling.
11.
Flythandledning
Floatutorial tar dig igenom grunderna i flytande element som bilder, drop caps, nästa och bakåtknappar, bildgallerier, inbyggda listor och layouter med flera kolumner. Kolla in 4 självstudier som är dedikerade till bildens flytande.
12.
Snazzy Hover-effekter med CSS
I den här handledningen kommer du att gå igenom att skapa flexibla avancerade svävartekniker med CSS2.1-egenskaper.
13.
Snabba övergångar utan
preload
När du använder CSS-bildrullover måste två, tre eller fler bilder laddas (och ofta förinstallerade för bästa resultat). Lär dig att sätta alla tillstånd i en bild gör dynamiska förändringar snabbare och kräver ingen förinstallation.
14.
jQuery rundade hörn
Massor av jQuery-effekter för rundade hörn och mycket fler mönster.
15.
Enklaste verktygstips och bildförhandsgranskning med jQuery
Se 3 exempel på hur du använder förhandsvisningsskriptet för jQuery. Detta enkla skript kan användas för en mängd olika ändamål.
16.
Supersized - helskärmsbakgrund /
bildspel
jQuery-plugin
Superzided är ett jQuery-plugin som ändrar storlek på bilder för att fylla webbläsaren samtidigt som bilddimensionsförhållandet bibehålls och cyklar bilder / bakgrunder via bildspel med övergångar och förladdning.
17.
PNG-överlägg
Har du någonsin stött på problemet med att skapa en webbplats med bilder från klienten, bara för att hitta senare efter att de har uppdaterat sitt fotografi, behålls inte det ursprungliga utseendet och känslan? Denna lösning innebär att skapa ett transparent PNG-overlay som kan användas som en mask / ram runt vanlig JPEG eller GIF. På detta sätt kan en typisk CMS-installation konfigureras så att användare kan ladda upp foton utan att behöva oroa sig för att använda något grafikprogram för att tillämpa filter.
18.
BeZoom
Lighweight
JQuery
Zooma plugin
BeZoom är ett enkelt och lätt alternativ för JQZoom. Det är lättare och det är lättare att använda.
19.
Använda jQuery för bakgrundsbildanimationer
Spela med jQuery och ändra bakgrundsbildens position för att skapa den typ av effekt du letar efter. Det finns en ny artikel som svarar på "Hur hanterar jag aktiva tillstånd?" - Hantering av aktivt tillstånd för jQuery-animerade bakgrunder.
20.
5 sätt att krydda dina bilder med CSS
Här är några enkla knep för att ge lite smak till dina typiska intetsägande bilder. Att använda Photoshop för att utforma varje bild kan vara tråkigt och svårt att underhålla på lång sikt. Följande CSS-tekniker hjälper dig att lindra smärtan.
21.
Hur:
Storleksanpassad
Bakgrundsbild
Lär dig hur du ställer in storleksanpassad bakgrundsbild med CSS. Du har tre alternativ att välja mellan.
22.
Stil dina bildlänkar
Att låta användarna veta att en viss del av vår webbplats är avsedd att klickas på uppnås bäst med musen över effekt. Dessa "klickbara" avsnitt innehåller verkligen innehållsbilder. Image Link är ett skript som gör att du kan använda ytterligare styling på dina bildlänkar.
23.
Flera bakgrundsbilder med CSS
Ibland är det mer meningsfullt att använda bakgrundsbilder än att infoga dem direkt på sidan. Och medan varje element - som din kroppstagg - bara kan innehålla en bakgrundsbild, kan de appliceras på flera element.
24.
Bildgränser med CSS
Riktigt enkel handledning som visar hur du lägger till en solid ram till bilder med CSS.
25.
CSS Sprites utan att använda bakgrundsbilder
Lär dig hur du använder svävareffekt utan mycket kunskap om CSS-sprites.
