Online bronnen zijn bijna oneindig, maar het vinden van ze van kwaliteit is echt het moeilijkeHoewel je een beetje zoekt en een goede lijst met websites hebt die aan design zijn gewijd, wordt het gemakkelijker. In een tijd waarin talen zoals HTML en CSS in uitstekende staat zijn, is het bijna een paar klikken verwijderd om dichter bij gratis bronnen van hoge kwaliteit te komen.
We gaan een reeks van gratis kaarten in HTML en CSS die perfect geschikt zijn voor alle soorten blogs, bedrijven, e-commerce en nog veel meer. Een uitgebreide collectie zodat deze kan worden opgenomen in een deel van het werk dat u voor alle soorten klanten doet. We gaan het doen met deze lijst die codepen.io gebruikt, zodat je de code zowel in HTML als CSS kunt verkrijgen.
Blogkaart plezier # 1
een geweldige ontwerpkaart dat bijna alles zegt van de afbeelding die het vertegenwoordigt, kunt u naar codepen.io gaan om de bijbehorende code te verkrijgen en deze op uw website te installeren.
CSS-nieuwskaarten alleen CSS
Deze kaart, met Stranger Things als achtergrond, valt op door zijn vloeiende animatie die de inhoud onthult. Het is pure CSS.
Blogbericht
Een voorbeeld van het web door de muisaanwijzer erop te plaatsen. Het heeft CSS en HTML voor gemakkelijke opname.
Blog-kaarten
Een minimalistisch responsief blogkaartontwerp. Snelle en soepele animaties van hoge kwaliteit die niemand onverschillig laat.
Responsieve visitekaartjes
Onderscheidt zich van de lichte animatie door de muisaanwijzer over de kaartafbeelding te bewegen.
Nog een blogkaart
Verschijnt de kaarttekst bij zweven in hetzelfde.
Visitekaartjes
een eenvoudige maar actuele kaart bezoek met demo en code in HTML en CSS.
3D visitekaartje
Deze kaart is de moeite waard een 3D-animatie met HTML en CSS Gemaakt door Elena Nazarova, perfect voor een kleurrijk visitekaartje.
CSS-visitekaartje
Een heel opvallend visitekaartje in CSS dat draait in 3D om plaats te maken voor een reeks URL-adressen die reageren op de muisaanwijzer op het moment dat we deze neerleggen.
Kaartroosters
Een serie goed geplaatste kaarten met een opvallend ontwerp Het is verrassend vanwege zijn simplistische esthetiek, maar met een goede hit in de HTML-, CSS- en SCSS-code.
3D-kaarten worden onthuld
Deze reeks kaartroosters onthullen op dit moment meer informatie we lieten de muis over het groene pictogram. Op hetzelfde moment dat we de aanwijzer verlaten, beweegt de rest van het raster overeenkomstig.
Responsieve materiaalontwerpkaart
Met de google ontwerptaal, verschijnt deze serie kaarten die opvallen door het menupictogram dat alle informatie van de acteurs opent zoals in het voorbeeldgeval. Mooie en intuïtieve animaties met een geweldige visuele uitstraling.
Flexbox-kaartraster
Kaart prototype op dezelfde hoogte dat ze opvallen door het gebruik van het grid flexbox-formaat. Een andere waarde is het gebruik van CSS-beeldverhoudingen en CSS-filters.
Clash of Clans-kaarten
El populaire mobiele game heeft zijn kaarten in HTML en CSS gemaakt door Andre Madarang. We kunnen tussen hen wisselen met een nauwkeurige en zeer visuele animatie.
Schuifkaarten voor e-commerce
Met behendige animatie, moedigen deze kaarten je aan om naar hun elementen te zoeken om erachter te komen waar ze over gaan. Met geweldig ontwerp van Omar Dsoky.
Interfaceontwerp - Productkaart
Een perfecte kaart om die van te ontwerpen product van onze e-commerce Gemaakt in HTML en CSS.
Productkaart
Van dezelfde kaart kunnen we ga door verschillende afbeeldingen om het product beter te zien. Het bevat de knop Toevoegen aan winkelwagentje en bevat HTML-, CSS- en JavaScript-code.
Flexy-productkaarten
Zoals de naam aangeeft, gebruikt flexbox om een interessante animatie te maken wanneer we op de knop Toevoegen aan winkelwagentje klikken.
Draai kaarten om
Kleine code voor sommige kaarten met een gladde en perfecte animatie Binnen enkele minuten kunt u ze opnemen. Onlangs toegevoegd aan codepen.
Kaarten als 3D-productkaarten
Opgemerkt moet worden dat deze kaarten zijn alsof we een reeks kaarten op tafel hebben De aanwijzer is links en ze zoomen in, klikken op elke kaart en tonen de achterkant van de kaart om productinformatie te tonen. We klikken weer en laten het zoals het was met de voorkant. Perfect voor het leren van 3D CSS-eigenschappen.
Parallax-kaart
Een heel visueel experiment met een opvallend flip-effect Het is beter dat u het ziet om te weten waarover het spreekt.
Hover-effect voor kaarten
Een simpel effect maar gimmicky hover over kaarten.
Eenvoudig zweefeffect
Opvallend vrij eenvoudig effect, maar dat heeft een groot effect op het moment dat we het visualiseren.
Parallax-dieptekaarten
Deze kaarten dragen de parallax concept naar de top om een aantal zeer opvallende kaarten te vormen door hun ontwerp. U hoeft het alleen maar te zien om het effect dat het op de gebruiker heeft, beter te begrijpen wanneer u een aantal categorieën in onze blog selecteert.
UI-kaart voor films
Een kaart van geweldige lay-out gemaakt met HTML en CSS.
Profiel kaart
zeer goede animaties voor een contactkaart waarin we toegang tot social media profielen kunnen implementeren. HTML en CSS.
Polaroid gebundelde kaarten
Met eigenschappen, filters en CSS aangepaste overgangen Deze serie gegroepeerde Polaroid-kaarten wordt gemaakt; mis deze SVG-afbeeldingen op het web niet.
Het is mogelijk om elk van deze kaarten op een pagina met wordpress te plaatsen
IK HOU VAN ZE