Le risorse online sono quasi infinite, ma trovarli di qualità è davvero la cosa difficile, pur cercando un po 'e avendo una buona lista di siti web dedicati al design, la cosa diventa più semplice. In un momento in cui linguaggi come HTML e CSS sono in ottima forma, avvicinarsi a risorse gratuite e di alta qualità è quasi a pochi clic di distanza.
Elencheremo una serie di file carte gratuite in HTML e CSS che sono perfettamente adatti a tutti i tipi di blog, affari, e-commerce e molto altro. Una collezione a lungo raggio in modo che possa essere incorporata in alcuni dei lavori che stai facendo per tutti i tipi di clienti. Facciamolo con questo elenco che utilizza codepen.io in modo da poter ottenere il codice sia in HTML che in CSS.
Blog Card divertimento n. 1
Un grande carta di design che dice quasi tutto l'immagine che lo rappresenta, puoi andare su codepen.io per ottenere il codice corrispondente e installarlo sul tuo sito web.
Solo schede di notizie CSS CSS
Questa carta, con Stranger Things come sfondo, si distingue per la sua animazione fluida che rivela il contenuto. È puro CSS.
Articolo post sul blog
Un'anteprima del web portandoci sopra il puntatore del mouse. Ha CSS e HTML per una facile integrazione.
Schede del blog
Un design di carta blog reattivo minimalista. Animazioni veloci e fluide alta qualità che non lascia nessuno indifferente.
Biglietti da visita reattivi
Si distingue per la leggera animazione passando il puntatore del mouse sull'immagine della scheda.
Un'altra scheda del blog
Appare il testo della carta al passaggio del mouse nello stesso.
Biglietti da visita
Un carta semplice ma attuale visita con demo e codice in HTML e CSS.
Biglietto da visita 3D
Questa carta vale un'animazione 3D con HTML e CSS. Realizzato da Elena Nazarova, è perfetto per un biglietto da visita dai colori vivaci.
Biglietto da visita CSS
Un biglietto da visita molto sorprendente in CSS that ruota in 3D per far posto a una serie di indirizzi URL che rispondono al puntatore del mouse nel momento in cui lo inseriamo.
Griglie di carte
Una serie di carte ben piazzate con un design accattivante. È sorprendente per la sua estetica semplicistica, ma con un buon successo nel codice HTML, CSS e SCSS.
Carte 3D rivelate
Questa serie di griglie di carte rivelare più informazioni al momento abbiamo lasciato il mouse sull'icona verde. Nello stesso momento in cui lasciamo il puntatore, il resto della griglia si sposta di conseguenza.
Scheda di progettazione materiale reattiva
Con lo linguaggio di progettazione di Google, compaiono questa serie di carte che si distinguono per l'icona del menu che apre tutte le informazioni degli attori come nel caso di esempio. Animazioni belle e intuitive con un ottimo aspetto visivo.
Griglia per schede Flexbox
Prototipo di carta alla stessa altezza che si distinguono per l'utilizzo del formato flexbox a griglia. Un altro dei suoi valori è l'uso di proporzioni CSS e filtri CSS.
Carte di Clash of Clans
El popolare gioco per cellulare ha le sue carte in HTML e CSS create da Andre Madarang. Possiamo passare dall'uno all'altro con un'animazione precisa e altamente visiva.
Schede diapositive per e-commerce
Con animazione agile, queste carte ti incoraggiano a cercare i loro elementi per scoprire di cosa si tratta. Con un fantastico design di Omar Dsoky.
Design dell'interfaccia - Scheda prodotto
Una carta perfetta per progettare quelli di prodotto del nostro eCommerce. Realizzato in HTML e CSS.
Scheda prodotto
Dalla stessa carta possiamo passare attraverso diverse immagini per vedere meglio il prodotto. Include il pulsante Aggiungi al carrello e contiene codice HTML, CSS e JavaScript.
Schede prodotto Flexy
Come suggerisce il nome, utilizza flexbox per creare un'animazione interessante quando facciamo clic sul pulsante aggiungi al carrello.
Gira le carte
Piccolo codice per alcune carte con un liscio e animazione perfetta. In pochi minuti puoi incorporarli. Aggiunto di recente a codepen.
Schede come schede prodotto 3D
Va notato che queste carte sono come se avessimo una serie di carte su un tavolo. Il puntatore è a sinistra e si ingrandiscono, fanno clic su ciascuno e mostrano il retro della scheda per mostrare le informazioni sul prodotto. Clicchiamo di nuovo e lo lasciamo com'era con la parte anteriore. Perfetto per imparare le proprietà CSS 3D.
Carta parallasse
Un esperimento molto visivo con a accattivante effetto flip. È meglio che tu lo veda per sapere di cosa sta parlando.
Effetto hover per le carte
Un effetto semplice ma hover ingannevole sulle carte.
Semplice effetto hover
Effetto sorprendente piuttosto semplice, ma questo ha un grande effetto nel momento in cui lo visualizziamo.
Carte di profondità parallasse
Queste carte portano il concetto di parallasse verso l'alto per formare alcune carte molto sorprendenti in base alla progettazione. Devi solo vederlo per capire meglio l'effetto che produce sull'utente quando selezioni alcune delle categorie nel nostro blog.
Scheda dell'interfaccia utente per i film
Una carta di ottimo layout realizzato con HTML e CSS.
Scheda profilo
Molto buone animazioni per una scheda di contatto in cui possiamo implementare l'accesso ai profili dei social media. HTML e CSS.
Polaroid in bundle di carte
Con proprietà, filtri e Transizioni personalizzate CSS Questa serie di carte raggruppate Polaroid viene creata; non perdere queste immagini SVG web.
Sarà possibile inserire una qualsiasi di queste carte in una pagina con wordpress
LI AMO