nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


10 CSS-bibliotheken voor betere beeld zweefeffecten

Gebruikers eenvoudig en duidelijk laten weten op welk gedeelte van de webpagina kan worden geklikt, is een belangrijk onderdeel van het UX-ontwerp. De oude maar gouden manier om het te doen was om de tekstkleur te veranderen en te onderstrepen. Tegenwoordig zijn er met CSS nog veel meer manieren om hover-effecten te leveren, met name aan afbeeldingen.

Ontwikkelaars kunnen nu overgangseffecten of -animaties toevoegen wanneer een zweefgebeurtenis wordt geactiveerd . We kijken naar directionele dia's, zoomlenzen op verschillende snelheden, fade-ins en fade-outs, scharniereffecten, spotlight-onthullingen, wiebelt, bounces en meer.

In deze compilatie zijn er meer dan 250 zweefeffecten om je te inspireren. Je kunt de code ook bij de bron ophalen.

Image-zweefeffecten (16 effecten)

Op deze pagina vind je een mooie verzameling van 16 hover-afbeeldingen met bijschriften. Pak de HTML- en CSS-code voor elk effect door met de muis over de afbeeldingen te bewegen en vervolgens op Code weergeven te klikken.

Image Caption Hover Animation (4 effecten)

Hier zijn 4 coole ondertitelingsanimaties die worden uitgevoerd wanneer er een over de afbeelding zweeft. De effecten zijn gebouwd met pure CSS3-overgangen en transformeren, en geen JavaScript, om de compatibiliteit met de browser te vergroten.

iHover (35 effecten)

iHover is een verzameling zweefeffecten, mogelijk gemaakt door CSS3. Er zijn 20 cirkel-zweefeffecten en 15 vierkante zweefeffecten. Om de effecten te gebruiken, moet u wat HTML-markeringen schrijven en de CSS-bestanden opnemen.

Image Hover (44 effecten)

Deze bibliotheek bevat 44 effecten gemaakt met pure CSS. Enkele van de effecten zijn onder meer fades, stoten, dia's, scharnieren, onthullingen, zoomlenzen, vervaagt, flips, plooien en luiken, in meerdere richtingen. Er is een uitgebreide versie van 216 effecten die je kunt kopen voor € 14.

Hover Effect Ideas (30 effecten)

Deze demo van een afbeelding-hover gemaakt door Codrop, geeft je inspiratie bij het maken van vloeiende overgangen tussen afbeeldingen en bijschriften. Er zijn totaal 30 effecten op twee sets met zelfstudies en de broncode.

Hover CSS (108 effecten)

Met Hover CSS kun je zweefeffecten toevoegen aan elk element, zoals een knop, link of afbeelding. De effecten omvatten 2D-overgangen, achtergrondovergangen, grensovergangen, schaduwovergangen en gloedovergangen, en meer. De bibliotheek is beschikbaar in CSS, Sass en LESS.

Animatisme (100+ effecten)

Er zijn meer dan 100 animaties voor animaties met afbeeldingen op knoppen, overlays, details, bijschriften, afbeeldingen en socialemediaknoppen. Alle effecten worden mogelijk gemaakt door CSS3.

Caption Hover-effect (7 effecten)

Er zijn 7 verschillende effecten in deze collectie. Alle overgangen zien er heel mooi en soepel uit. Ga naar de tutorial sectie om te leren hoe deze effecten op uw project kunnen worden toegepast.

CSS Image Hover-effecten (15 effecten)

Een verzameling eenvoudige zweefeffecten zoals zoomen, schuiven, draaien, grijsschaal, wazigheid, dekking en andere basiseffecten. U kunt deze effecten gebruiken door de CSS-klasse toe te voegen vóór uw figuurtag.

Richtingbewust 3D-zweefeffect

Dit is een super cool hover-effect dat je laatste muisbeweging detecteert. De bijschriften voor afbeeldingen worden geopend vanuit een van de vier richtingen op basis van uw laatste cursorpositie.

Hover-animatie

Hier is een animatie met een zweefteken geïnspireerd op UNIQLO. Bij een zweefgebeurtenis wordt de rand van de afbeelding geanimeerd.

Tegels met geanimeerde zweeftekst

Een voor tegelontwerpen, deze is voorzien van langzaam zoomen, dia's, pop-ins, gedimde overlay onder anderen.

SVG clip-pad zweefeffect

Een super geweldig röntgenfoto-effect met zwevende beweging, mogelijk gemaakt door SVG clip-path en CSS-overgangen. Werkt prima op Chrome, Opera en Safari.

20 WhatsApp-tips en -trucs die u moet weten

20 WhatsApp-tips en -trucs die u moet weten

WhatsApp krijgt nieuwe geweldige functies om berichten een fluitje van een cent voor gebruikers te maken. Hoewel het gebruik ervan niet zonder controverse is, zijn er tal van extraatjes die het een sterke concurrent in de arena voor berichten-apps maken.In deze post zullen we kijken naar de tips, trucs en hacks die gebruikers kunnen gebruiken om WhatsApp als een professional te gebruiken

(Technische en ontwerptips)

OS X Lion: 10 nieuwe functies + snelkoppelingen die u moet weten

OS X Lion: 10 nieuwe functies + snelkoppelingen die u moet weten

Het nieuwste besturingssysteem van Apple voor Mac, 10.7 of beter bekend als de OS X Lion, werd officieel gelanceerd op 20 juli 2011. Maar ontwikkelaars, waaronder ikzelf, hadden een eerdere hands-on dankzij het Apple Developers-programma.Volgens Apple wordt het nieuwe besturingssysteem van $ 29, 99 geleverd met meer dan 250 nieuwe functies, waaronder de enkele opmerkelijke zoals Mission Control, Auto Save, Launch Pad, geheel nieuwe Mail-app en een paar andere

(Technische en ontwerptips)