Når vi forbedrer billeder, kan vi vælge at gøre det med Photoshop og derefter montere det på websiden, eller vi kan også vælge mulighed B: gør det med de tilgængelige HTML-, CSS- og Javascript-teknikker.
Efter springet er der mange teknikker til at forbedre billeder, næsten alle lavet med jQuery som hovedbase eller med CSS3 udnytte de nyeste webstandarder, selvom jeg minder dig om, at vi i så fald mister kompatibilitet med nogle browsere.
De er på engelsk, men de bliver fanget i farten, lovet :)
Kilde | 1.WD
CSS3 afrundet billede med jQuery
Lær at pakke et span-tag rundt om billedelementet for at opnå afrundede billeder, der vises lige i alle moderne browsere.
2.
Flere baggrunde og grænser med CSS 2.1
Lær, hvordan du bruger CSS 2.1 pseudo-elementer til at give op til 3 baggrunds-lærreder, 2 præsentationsbilleder i fast størrelse og flere komplekse kanter til et enkelt HTML-element.
3.
Hurtigt tip: Flere kanter med simpel CSS
Hurtig screencast, der viser dig, hvordan du opnår flere grænser med simpel CSS på den måde tilføjer mere dybde til dine designs. Meget enklere version af tidligere tutorial.
4.
Flere kanter på dynamisk dimensionerede elementer med CSS2
Tredje version af Nicholas Gallagher viser dig, hvad du skal gøre, hvis du ikke har størrelsen på elementet.
5.
Hav det sjovt med grænser - skrå, presset og mere!
Lær hvordan du opnår presset effekt med CSS og nogle enkle tricks til kantstil for at få forskellige effekter.
6.
Polaroids med CSS3
Lær hvordan du bruger nogle fantastiske CSS2 og CSS3 til at omdanne en ellers beskedne liste over billeder til et fuldt blæst sæt af Polaroid-billeder.
7.
Perfekt baggrundsbillede til fuld side
Lær hvordan du tilføjer baggrundsbillede med CSS, der udfylder hele siden med billede, intet hvidt mellemrum, skalerer billedet efter behov, forårsager ikke rullebjælker og meget mere.
8.
CSS3 Box Shadow og Image Hover-effekter
Udforsk en ny måde at tilføje drop shadow-effekter på ved blot at redigere et stilark.
9.
Fancy Thumbnail Hover-effekt m / jQuery
Opnå pæn flash-effekt med CSS og jQuery.
10.
Sådan oprettes en simpel CSS-billedoverføringseffekt
I denne vejledning lærer du, hvordan du opretter enkel CSS-rollover-effekt med grundlæggende HTML- og CSS-styling.
11.
Floattutorial
Floatutorial tager dig gennem det grundlæggende i flydende elementer såsom billeder, drop caps, næste og tilbage knapper, billedgallerier, indbyggede lister og layout med flere kolonner. Tjek 4 tutorials dedikeret til billedflydning.
12.
Snazzy Hover-effekter ved hjælp af CSS
I denne vejledning overgår du oprettelse af fleksible avancerede svæveteknikker ved hjælp af CSS2.1-egenskaber.
13.
Hurtige rollovers uden
Forudindlæs
Når du bruger CSS-billedoverførsler, skal to, tre eller flere billeder indlæses (og ofte forudindlæses for at opnå de bedste resultater). Lær hvordan du sætter alle stater i et billede, hvilket gør dynamiske ændringer hurtigere og kræver ingen forudindlæsning.
14.
jQuery afrundede hjørner
Masser af jQuery-effekter til afrundede hjørner og meget flere mønstre.
15.
Nemmeste værktøjstip og billedeksempel ved hjælp af jQuery
Se 3 eksempler på brug af preview-script til jQuery-rollover. Dette enkle script kan anvendes til en række forskellige formål.
16.
Supersized - Fuld skærm baggrund /
Slideshow
jQuery-plugin
Superzided er et jQuery-plugin, der ændrer størrelsen på billeder for at udfylde browseren, samtidig med at billeddimensionsforholdet opretholdes og cykler billeder / baggrunde via lysbilledshow med overgange og forudindlæsning.
17.
PNG-overlay
Har du nogensinde stødt på problemet med at oprette et websted med billeder givet af klienten, for kun at finde senere, efter at de har opdateret deres fotografering, forbliver det originale udseende ikke? Denne løsning involverer oprettelse af et gennemsigtigt PNG-overlay, som kan bruges som en maske / ramme omkring almindelig JPEG eller GIF. På denne måde kan en typisk CMS-installation konfigureres, så brugerne kan uploade fotos uden at skulle bekymre sig om at bruge noget grafikprogram til at anvende filtre.
18.
BeZoom
lighweight
JQuery
Zoom-plugin
BeZoom er et enkelt og let alternativ til JQZoom. Det er lettere, og det er lettere at bruge.
19.
Brug af jQuery til baggrundsbillede-animationer
Spil med jQuery, og skift baggrundsbilledets position for at skabe den type effekt, du leder efter. Der er en ny artikel, der besvarer "Hvordan håndterer jeg aktive tilstande?" - Håndtering af aktiv tilstand til jQuery-animerede baggrunde.
20.
5 måder at krydre dine billeder med CSS
Her er et par enkle tricks til at tilføje noget smag til dine typiske kedelige billeder. Brug af Photoshop til at style hvert billede kan være kedeligt og vanskeligt at vedligeholde i det lange løb. Disse følgende CSS-teknikker hjælper dig med at lette den smerte.
21.
Hvordan:
Kan ændres
Baggrundsbillede
Lær, hvordan du opsætter størrelse på baggrundsbillede med CSS. Du har 3 muligheder at vælge imellem.
22.
Style dit billedlink
At lade brugerne vide, at det bestemte afsnit af vores websted er beregnet til at blive klikket på, opnås bedst gennem musen over effekten. Disse "klikbare" sektioner indeholder bestemt indholdsbilleder. Image Link er et script, der giver dig mulighed for at anvende yderligere styling til dine billedlink.
23.
Flere baggrundsbilleder med CSS
Til tider giver det mere mening at bruge baggrundsbilleder end at indsætte dem direkte på siden. Og mens hvert element - ligesom dit kropsmærke - kun kan rumme et baggrundsbillede, kan de anvendes på flere elementer.
24.
Billedgrænser med CSS
Virkelig let vejledning, der viser dig, hvordan du tilføjer solide rammer til billeder ved hjælp af CSS.
25.
CSS Sprites uden brug af baggrundsbilleder
Lær hvordan du anvender svæveeffekt uden meget viden om CSS-sprites.
