Verkkoresurssit ovat melkein rajattomat, mutta niiden löytäminen laadukkaiksi on todella vaikeaaVaikka etsitään vähän ja sinulla on hyvä luettelo suunnittelulle omistetuista verkkosivustoista, asiat helpottuvat. Aikana, jolloin HTML: n ja CSS: n kaltaiset kielet ovat hyvässä kunnossa, pääsy lähemmäksi ilmaisia, laadukkaita resursseja on melkein muutaman napsautuksen päässä.
Luemme sarjan ilmaiset kortit HTML- ja CSS-muodossa jotka sopivat täydellisesti kaiken tyyppisiin blogeihin, yrityksiin, verkkokauppaan ja paljon muuta. Pitkän kantaman kokoelma, jotta se voidaan sisällyttää osaan kaikentyyppisille asiakkaille tekemästä työstä. Teemme sen tällä luettelolla, joka käyttää koodepen.io-tiedostoa, jotta voit hankkia koodin sekä HTML- että CSS-muodossa.
Blogikortti hauskaa # 1
Una loistava suunnittelukortti joka kertoo melkein kaiken sitä edustavan kuvan, voit siirtyä osoitteeseen codepen.io saadaksesi vastaavan koodin ja asentamalla sen verkkosivustollesi.
CSS News Cards vain CSS
Tämä kortti, jossa Stranger Things taustana, erottuu tasaisesta animaatiosta, joka paljastaa sisällön. Se on puhdasta CSS: ää.
Blogiteksti
Verkon esikatselu tuomalla hiiren osoitin sen päälle. Siinä on CSS ja HTML helppo sisällyttää.
Blogikortit
Minimalistinen reagoiva blogikorttisuunnittelu. Nopeat ja sujuvat animaatiot korkealaatuisia, jotka eivät jätä ketään välinpitämättömäksi.
Reagoivat käyntikortit
Erottuu pieni animaatio viemällä hiiren osoitin kortin kuvan päälle.
Toinen blogikortti
Näkyy korttiteksti leijuttaessa samassa.
Käyntikortit
Una yksinkertainen mutta nykyinen kortti käy esittelyllä ja koodilla HTML- ja CSS-tiedostoissa.
3D-käyntikortti
Tämä kortti on arvoinen 3D-animaatio HTML: llä ja CSS: llä. Elena Nazarovan tekemä, se on täydellinen värejä herättävälle käyntikortille.
CSS-käyntikortti
Erittäin silmiinpistävä käyntikortti CSS: ssä pyörii 3D-muodossa jotta saadaan aikaan joukko URL-osoitteita, jotka vastaavat hiiren osoittimeen sillä hetkellä kun laitamme sen alas.
Korttiruudukot
Sarja hyvin sijoitettuja kortteja huomiota herättävä muotoilu. Se on yllättävää yksinkertaisesta esteettisyydestään, mutta sillä on hyvä osuma HTML-, CSS- ja SCSS-koodissa.
3D-kortit paljastetaan
Tämä korttiristikkosarja paljastaa lisää tietoa tällä hetkellä että jätimme hiiren vihreään kuvakkeeseen. Samalla kun jätämme osoittimen, loput ruudukko liikkuu vastaavasti.
Reagoiva materiaalisuunnittelukortti
Kanssa google-suunnittelukieli, tämä korttisarja näyttää erottuvan valikkokuvakkeelta, joka avaa kaikki toimijoiden tiedot kuten esimerkkitapauksessa. Kauniit ja intuitiiviset animaatiot upealla ulkonäöllä.
Flexbox-korttiristikko
Kortin prototyyppi samalla korkeudella kuin ne erottuvat ruudukon flexbox-muodon käytöstä. Toinen sen arvoista on CSS-kuvasuhteiden ja CSS-suodattimien käyttö.
Klaanikorttien törmäys
El suosittu mobiilipeli kortinsa HTML- ja CSS-muodossa on luonut Andre Madarang. Voimme kulkea niiden välillä tarkalla ja erittäin visuaalisella animaatiolla.
Diakortit verkkokauppaa varten
Kanssa ketterä animaatio, nämä kortit kannustavat sinua etsimään niiden elementtejä saadakseen selville, mistä ne ovat. Upealla Omar Dsokyn suunnittelulla.
Liitännän suunnittelu - tuotekortti
Täydellinen kortti niiden suunnitteluun verkkokaupan tuote. Valmistettu HTML: ssä ja CSS: ssä.
Tuotekortti
Samalta kortilta voimme käydä läpi useita kuvia nähdäksesi tuotteen paremmin. Se sisältää Lisää ostoskoriin -painikkeen ja sisältää HTML-, CSS- ja JavaScript-koodin.
Joustavat tuotekortit
Kuten nimestään käy ilmi, käyttää flexboxia luoda mielenkiintoinen animaatio, kun napsautamme Lisää ostoskoriin -painiketta.
Käännä kortit
Pieni koodi joillekin korteille, joissa on sileä ja täydellinen animaatio. Muutamassa minuutissa voit sisällyttää ne. Äskettäin lisätty koodisyntiin.
Kortit 3D-tuotekortteina
On huomattava, että nämä kortit ovat ikään kuin meillä olisi sarja kortteja pöydällä. Osoitin on vasemmalla ja ne lähentyvät, napsauttavat kutakin ja osoittavat kortin takaosaa tuotetietojen näyttämiseksi. Napsautamme uudelleen ja jätämme sen kuten etupuolella. Täydellinen 3D CSS -ominaisuuksien oppimiseen.
Parallaksikortti
Erittäin visuaalinen kokeilu a huomiota herättävä kääntöefekti. On parempi, että näet sen tietävän, mistä se puhuu.
Hover-vaikutus kortteihin
Yksinkertainen vaikutus, mutta kikka hover noin korteista.
Yksinkertainen leijuva vaikutus
Silmiinpistävä melko yksinkertainen vaikutus, mutta sillä on suuri vaikutus sillä hetkellä, kun visualisoimme sen.
Parallaksisyvyyskortit
Nämä kortit sisältävät parallaksikäsite huipulle muodostaa erittäin silmiinpistäviä kortteja suunnittelun mukaan. Sinun täytyy vain nähdä se ymmärtääksesi paremmin sen vaikutuksen käyttäjään, kun valitset joitain luokkia blogissamme.
UI-kortti elokuville
Kortti loistava ulkoasu, joka on tehty HTML: llä ja CSS.
Profiilikortti
Hyvin hyvät animaatiot yhteystietokortille, jossa voimme toteuttaa pääsyn sosiaalisen median profiileihin. HTML ja CSS.
Polaroid-paketit
Ominaisuuksilla, suodattimilla ja CSS-mukautetut siirtymät Tämä Polaroid-ryhmäkorttisarja luodaan; älä missaa näitä SVG-kuvaverkkoa.
Mikä tahansa näistä korteista on mahdollista lisätä sivulle, jossa on wordpress
MINÄ RAKASTAN NIITÄ