Hover.css - CSS3-bibliotheek met meer dan 40 zwevende effecten

Als het gaat om het proberen aandacht te krijgen van gebruikers, zijn er veel manieren om dit te bereiken. Voor speciale gevallen, hover is een geweldige manier om de aandacht te vestigen op een link of knop. Normaal gesproken werkt de zweeftekst door de elementkleur of de verloopstatus te wijzigen wanneer gebruikers hun cursors erover bewegen. Maar met veel functies in CSS3 kunnen veel dingen ook worden aangepast met het zweefeffect. Een van hen past animatie toe. En Hover.css kan het gemakkelijk laten gebeuren.

Hover.css is een gratis CSS-bibliotheek om eenvoudig animatie toe te passen met behulp van het zweefeffect. U kunt de zweeftekst toepassen op acties, knoppen, logo's, afbeeldingen en nog veel meer. Deze bibliotheek heeft meer dan 40 effecten om uit te kiezen en ze zijn op de volgende manier ingedeeld: 2D-transformaties, grensovergangen, schaduw- en gloedovergangen, tekstballonnen en paginakrullen .

Aan de slag met Hover

Om te beginnen, moet je Hover downloaden en het hover.css-bestand in je projectmap plaatsen. Of als u wilt, kunt u hover-min.css gebruiken, een compactere versie die kleiner is en sneller kan worden geladen. Ten slotte, link het bestand naar uw webpagina zoals:

 ..  .. 

Hover toevoegen aan een element

Om een ​​cool hover-effect aan je element toe te voegen, voeg je gewoon de effectnaam toe aan de elementklasse. Je kunt de live demo van alle beschikbare effecten bekijken op de Hover-bestemmingspagina. Zorg ervoor dat u alleen kleine letters gebruikt en als er ruimte tussenin is, vervangt u deze eenvoudig door een streepje.

Laten we zeggen dat ik de volgende linkmarkup heb:

Als het goed is gestileerd, komt de link er als volgt uit:

De link is gewijzigd en lijkt op een knop. Maar wanneer ik de cursor erover beweeg, verandert de knop niet en blijft hij constant. Met een van de Hover-effecten, Hover Shadow, bewerk ik de opmaak en voeg ik een klasse toe zoals:

Nu heeft de knop een cool hover-effect zwevend met een schaduw eronder, net als de volgende GIF-demo.

Een beetje hacken en maatwerk

Als u hover.css opent met een editor, ziet u dat elk effect wordt geleverd met enkele standaardeigenschappen. Deze eigenschappen geven het element het meest gewenste resultaat, zowel voor het display als voor het uiterlijk. Hieronder staan ​​de standaard eigenschappen, ga je gang en pas ze aan je behoeften aan:

• display : vereist voor een effect.
• transform : gebruikt voor CSS3-transformaties om de prestaties op mobiel en tablet te verbeteren
• box-shadow : geef transparante doosschaduw waardoor randen van CSS3-getransformeerde elementen op mobiel / tablet er soepeler uitzien

Laatste gedachte

Hover is een andere beste praktijk van CSS3-implementatie. Maar aangezien de meeste effecten zoals overgangen, transformaties en animaties gebruikmaken van nieuwe CSS3-functies, moet u wat extra werk doen aan oude browsers die deze functies niet ondersteunen, zodat het terugval-zweefeffect goed werkt.

Adembenemende donkere achtergronden voor uw bureaublad

Als het om wallpapers gaat, geef ik de voorkeur aan donkere of zwarte achtergronden omdat ze niet veel batterijvermogen verbruiken en ook cool zijn om naar te kijken . Hoewel er ook veel kleurrijke bureaubladachtergronden zijn, maar voor mij (en voor andere fans van zwarte kleur), geven donkere achtergronden een vreemd krachtig en dramatisch effect

(Technische en ontwerptips)

35 buitengewone "einde van de wereld" geïnspireerde kunstwerken

De hele tijd dat mensen nieuwsgierig waren naar het einde van de wereld? Wat zal er dan gebeuren? Een van de meest populaire voorspellingen voor het einde van de wereld is dat het in 2012 zal gebeuren, voorspeld door de Azteken. Er zijn veel meningen over dit onderwerp, maar vandaag wil ik je een aantal aan het einde van de wereld gerelateerde kunstwerken laten zien met een donkere en sombere stemming

(Technische en ontwerptips)