Bij het verbeteren van afbeeldingen kunnen we ervoor kiezen om het met Photoshop te doen en het vervolgens op de webpagina te mounten of we kunnen ook kiezen voor optie B: doe het met de HTML-, CSS- en Javascript-technieken die beschikbaar zijn.
Na de sprong zijn er veel technieken om de afbeeldingen te verbeteren, bijna allemaal gemaakt met jQuery als hoofdbasis of met CSS3 profiteren van de nieuwste webstandaarden, hoewel ik u eraan herinner dat we in dat geval de compatibiliteit met sommige browsers verliezen.
Ze zijn in het Engels, maar ze worden tijdens de vlucht gevangen, beloofd :)
Bron | 1e WD
CSS3 Afgeronde afbeelding met jQuery
Leer een span-tag om het afbeeldingselement te wikkelen om afgeronde afbeeldingen te maken die in alle moderne browsers worden weergegeven.
2.
Meerdere achtergronden en randen met CSS 2.1
Leer hoe u CSS 2.1 pseudo-elementen kunt gebruiken om tot 3 achtergronddoeken, 2 presentatieafbeeldingen met vaste grootte en meerdere complexe randen voor een enkel HTML-element te leveren.
3.
Snelle tip: meerdere grenzen met eenvoudige CSS
Snelle screencast die u laat zien hoe u meerdere randen kunt bereiken met eenvoudige CSS op die manier om meer diepte aan uw ontwerpen toe te voegen. Veel eenvoudigere versie van de vorige tutorial.
4.
Meerdere randen op elementen met dynamische afmetingen met CSS2
Derde versie van Nicholas Gallagher laat zien wat je moet doen als je niet de grootte van het element hebt.
5.
Veel plezier met randen - afgeschuind, geperst en meer!
Leer hoe u een gedrukt effect kunt bereiken met CSS en enkele eenvoudige randstijltrucs om verschillende effecten te krijgen.
6.
Polaroids met CSS3
Leer hoe u een aantal geweldige CSS2 en CSS3 kunt gebruiken om een anders bescheiden lijst met afbeeldingen om te zetten in een volledige set Polaroid-afbeeldingen.
7.
Perfecte achtergrondafbeelding op volledige pagina
Leer hoe u een achtergrondafbeelding kunt toevoegen met CSS die de hele pagina vult met afbeelding, geen witruimte, de afbeelding naar behoefte schaalt, geen schuifbalken veroorzaakt en nog veel meer.
8.
CSS3 Box Shadow en Image Hover Effects
Ontdek een nieuwe manier om slagschaduweffecten toe te voegen door een stylesheet te bewerken.
9.
Fancy Thumbnail Hover Effect met jQuery
Bereik een mooi flash-achtig effect met CSS en jQuery.
10.
Hoe een eenvoudig CSS-afbeelding rollover-effect te creëren
In deze tutorial leer je hoe je een eenvoudig CSS-afbeelding rollover-effect kunt creëren met eenvoudige HTML- en CSS-stijl.
11.
Float-tutorial
Floatutorial neemt je mee door de basisprincipes van zwevende elementen, zoals afbeeldingen, drop-caps, knoppen Volgende en Vorige, afbeeldingsgalerijen, inline lijsten en lay-outs met meerdere kolommen. Bekijk 4 tutorials gewijd aan het zweven van afbeeldingen.
12.
Snazzy Hover-effecten met CSS
In deze tutorial ga je het maken van flexibele geavanceerde hover-technieken met behulp van CSS2.1-eigenschappen.
13.
Snelle rollovers zonder
preload
Wanneer u CSS-afbeeldingsrollovers gebruikt, moeten twee, drie of meer afbeeldingen worden geladen (en vaak vooraf worden geladen voor de beste resultaten). Leer hoe u alle statussen in één afbeelding kunt plaatsen, waardoor dynamische wijzigingen sneller worden doorgevoerd en vooraf niet hoeft te worden geladen.
14.
jQuery Afgeronde hoeken
Veel jQuery-effecten voor afgeronde hoeken en nog veel meer patronen.
15.
Eenvoudigste knopinfo en afbeeldingsvoorbeeld met jQuery
Bekijk 3 voorbeelden van het gebruik van jQuery rollover preview-script. Dit eenvoudige script kan voor verschillende doeleinden worden toegepast.
16.
Superformaat - Achtergrond op volledig scherm /
Slideshow
jQuery-plug-in
Superzided is een jQuery-plug-in die het formaat van afbeeldingen aanpast om de browser te vullen met behoud van de beeldafmetingen en cycli van afbeeldingen / achtergronden via een diavoorstelling met overgangen en voorladen.
17.
PNG-overlay
Ben je ooit het probleem tegengekomen om een site te maken met afbeeldingen die door de klant zijn gegeven, om later na het bijwerken van hun fotografie te ontdekken dat de oorspronkelijke look en feel niet behouden blijft? Deze oplossing omvat het maken van een transparante PNG-overlay die kan worden gebruikt als een masker / frame rond gewone JPEG of GIF. Op deze manier kan een typische CMS-installatie worden geconfigureerd, zodat gebruikers foto's kunnen uploaden zonder zich zorgen te hoeven maken over het gebruik van een grafisch programma om filters toe te passen.
18.
BeZoom
lighweight
JQuery
Zoom-plug-in
BeZoom is een eenvoudig en lichtgewicht alternatief voor JQZoom Het is lichter en gemakkelijker te gebruiken.
19.
JQuery gebruiken voor achtergrondafbeeldingsanimaties
Speel met jQuery en verander de positie van de achtergrondafbeelding om het type effect te creëren dat je zoekt. Er is een nieuw artikel met de vraag "Hoe ga ik om met actieve statussen?" Omgaan met actieve status voor jQuery-geanimeerde achtergronden.
20.
5 manieren om uw afbeeldingen op te fleuren met CSS
Hier zijn een paar eenvoudige trucs om wat smaak toe te voegen aan uw typische saaie afbeeldingen. Het gebruik van Photoshop om elke afbeelding te stylen kan op de lange termijn vervelend en moeilijk te onderhouden zijn. Deze volgende CSS-technieken zullen je helpen die pijn te verzachten.
21.
Hoe:
Aanpasbaar
Achtergrond afbeelding
Leer hoe u een aanpasbare achtergrondafbeelding instelt met CSS. Je hebt 3 opties om uit te kiezen.
22.
Stijl uw afbeeldingslinks
Gebruikers laten weten dat er op een bepaald gedeelte van onze website moet worden geklikt, kan het beste worden bereikt door het muis-over-effect. Die "klikbare" secties bevatten zeker inhoudsafbeeldingen. Image Link is een script waarmee u extra stijl kunt toepassen op uw afbeeldingslinks.
23.
Meerdere achtergrondafbeeldingen met CSS
Soms is het logischer om achtergrondafbeeldingen te gebruiken dan om ze rechtstreeks op de pagina in te voegen. En hoewel elk element, net als je body-tag, slechts één achtergrondafbeelding kan bevatten, kunnen ze op verschillende elementen worden toegepast.
24.
Afbeeldingsgrenzen met CSS
Echt eenvoudige tutorial die je laat zien hoe je een effen rand aan afbeeldingen kunt toevoegen met CSS.
25.
CSS-sprites zonder achtergrondafbeeldingen te gebruiken
Leer hoe u het hover-effect kunt toepassen zonder veel kennis over CSS-sprites.
