Romantyczny gratis od TemplateMonster i CodePen

01 lutego 2017 Katarzyna Pawłowska

Zostało zaledwie kilku tygodni, aż cały świat zanurzy się w romantyczną atmosferę Dnia Świętego Walentego. Specjalnie dla wszystkich zakochanych zespół TemplateMonster zebrał najlepsze CSS długopisy z CodePen.io.

Wszystkie długopisy, które są prezentowane w tym artykułu są w swobodnym dostępie. Więc, moeż ich wykorzystać każdy, kto lubi kodować i odkrywać coś nowego!

Send Hearts od Kunal Varma

See the Pen <a href="https://codepen.io/kunalvarma05/pen/mJbBNY/">Send Hearts</a> by Kunal Varma (<a href="http://codepen.io/kunalvarma05">@kunalvarma05</a>) on <a href="http://codepen.io">CodePen</a>.

Twitter's Heart Full CSS od Nicolas Escoffier

See the Pen <a href="https://codepen.io/OxyDesign/pen/avXVbo/">Twitter's Heart Full CSS</a> by Nicolas Escoffier (<a href="http://codepen.io/OxyDesign">@OxyDesign</a>) on <a href="http://codepen.io">CodePen</a>.

CSS3 Heart od Tamer Aydn

See the Pen <a href="https://codepen.io/tameraydin/pen/bAfws/">CSS3 Heart</a> by Tamer Aydn (<a href="http://codepen.io/tameraydin">@tameraydin</a>) on <a href="http://codepen.io">CodePen</a>.

Heart of Words od Mohammad S Jaber

See the Pen <a href="https://codepen.io/msjaber/pen/oLxJGv/">Heart of Words</a> by Mohammad S Jaber (<a href="http://codepen.io/msjaber">@msjaber</a>) on <a href="http://codepen.io">CodePen</a>.

Heart beat od Andrew Sims

See the Pen <a href="https://codepen.io/andrewsims/pen/Xmzbav/">Heart beat</a> by Andrew Sims (<a href="http://codepen.io/andrewsims">@andrewsims</a>) on <a href="http://codepen.io">CodePen</a>.

Beating Heart - CSS i SVG animacja - low poly od morkett

See the Pen <a href="https://codepen.io/morkett/pen/VjByYj/">Beating Heart - CSS and SVG animation - low poly</a> by morkett (<a href="http://codepen.io/morkett">@morkett</a>) on <a href="http://codepen.io">CodePen</a>.

CSS animowane serce od Brenna O'Brien

See the Pen <a href="https://codepen.io/brenna/pen/goKAx/">CSS animated heart.</a> by Brenna O'Brien (<a href="http://codepen.io/brenna">@brenna</a>) on <a href="http://codepen.io">CodePen</a>.

Pulsing (he)art od ZeroSpree

See the Pen <a href="https://codepen.io/zerospree/pen/LgwGn/">Pulsing (he)art</a> by ZeroSpree (<a href="http://codepen.io/zerospree">@zerospree</a>) on <a href="http://codepen.io">CodePen</a>.

Broken Heart od Stas Melnikov

See the Pen <a href="https://codepen.io/melnik909/pen/BLEzba/">Broken Heart</a> by Stas Melnikov (<a href="http://codepen.io/melnik909">@melnik909</a>) on <a href="http://codepen.io">CodePen</a>.

Heart App Concept od David Khourshid

See the Pen <a href="https://codepen.io/davidkpiano/pen/mAoaxP/">Heart App Concept with CSS Variables</a> by David Khourshid (<a href="http://codepen.io/davidkpiano">@davidkpiano</a>) on <a href="http://codepen.io">CodePen</a>.

No library heart → star wave od Ana Tudor

See the Pen <a href="https://codepen.io/thebabydino/pen/XXEdBJ/">no library heart → star wave</a> by Ana Tudor (<a href="http://codepen.io/thebabydino">@thebabydino</a>) on <a href="http://codepen.io">CodePen</a>.

Heart-it od Tulula Smith

See the Pen <a href="https://codepen.io/Tulula/pen/oLZmgM/">Heart-it</a> by Tulula Smith (<a href="http://codepen.io/Tulula">@Tulula</a>) on <a href="http://codepen.io">CodePen</a>.

SCSS Mended Heart tribute Pray dla Orlando od Michelle L Pepe

See the Pen <a href="https://codepen.io/michellelpepe/pen/gMrzLM/">SCSS Mended Heart tribute Pray for Orlando</a> by Michelle L Pepe (<a href="http://codepen.io/michellelpepe">@michellelpepe</a>) on <a href="http://codepen.io">CodePen</a>.

Broken Heart od Naila Ahmad

See the Pen <a href="https://codepen.io/nailaahmad/pen/pyZyeG/">Responsive Storytelling: Broken Heart</a> by Naila Ahmad (<a href="http://codepen.io/nailaahmad">@nailaahmad</a>) on <a href="http://codepen.io">CodePen</a>.

3D Particle Heart od Gregor Adams

See the Pen <a href="https://codepen.io/pixelass/pen/epNqam/">3D Particle Heart</a> by Gregor Adams (<a href="http://codepen.io/pixelass">@pixelass</a>) on <a href="http://codepen.io">CodePen</a>.

Heart eyes od Johan Lindell

See the Pen <a href="https://codepen.io/lindell/pen/yJXqBb/">Heart eyes</a> by Johan Lindell (<a href="http://codepen.io/lindell">@lindell</a>) on <a href="http://codepen.io">CodePen</a>.

Heart grid od Ana Tudor

See the Pen <a href="https://codepen.io/thebabydino/pen/XXLQVp/">heart grid (pure CSS)</a> by Ana Tudor (<a href="http://codepen.io/thebabydino">@thebabydino</a>) on <a href="http://codepen.io">CodePen</a>.

CSS Transparent Heart Outline - 1 Element od Kyle Lavery

See the Pen <a href="https://codepen.io/koenigsegg1/pen/WrWgaR/">CSS Transparent Heart Outline - 1 Element</a> by Kyle Lavery (<a href="http://codepen.io/koenigsegg1">@koenigsegg1</a>) on <a href="http://codepen.io">CodePen</a>.

Codevember Day 6 od Mai El-Awini

See the Pen <a href="https://codepen.io/maicodes/pen/RWeNpW/">Codevember Day 6</a> by Mai El-Awini (<a href="http://codepen.io/maicodes">@maicodes</a>) on <a href="http://codepen.io">CodePen</a>.

Scripted Heart od Nik

See the Pen <a href="https://codepen.io/nikrowell/pen/YXQoQE/">Scripted Heart</a> by Nik (<a href="http://codepen.io/nikrowell">@nikrowell</a>) on <a href="http://codepen.io">CodePen</a>.

Css beating heart od Greg DiPietro

See the Pen <a href="https://codepen.io/gjdipietro/pen/rodeA/">Css beating heart</a> by Greg DiPietro (<a href="http://codepen.io/gjdipietro">@gjdipietro</a>) on <a href="http://codepen.io">CodePen</a>.

For CodePen with Love od Ruslan Pivovarov

See the Pen <a href="https://codepen.io/mrspok407/pen/mEgvJg/">For CodePen with Love</a> by Ruslan Pivovarov (<a href="http://codepen.io/mrspok407">@mrspok407</a>) on <a href="http://codepen.io">CodePen</a>.

Be my Valentine heart od Skippy

See the Pen <a href="https://codepen.io/Skippy/pen/GgQyvg/">Be my Valentine heart, beating with css3 animations</a> by Skippy (<a href="http://codepen.io/Skippy">@Skippy</a>) on <a href="http://codepen.io">CodePen</a>.

Love 101: The Introvert odTiffany Rayside

See the Pen <a href="https://codepen.io/tmrDevelops/pen/vOERpb/">Love 101: The Introvert</a> by Tiffany Rayside (<a href="http://codepen.io/tmrDevelops">@tmrDevelops</a>) on <a href="http://codepen.io">CodePen</a>.

HTML5 Canvas od Brandon Ferioli

See the Pen <a href="https://codepen.io/bferioli/pen/qEGaPp/">HTML5 Canvas - Falling Hearts Background Animation</a> by Brandon Ferioli (<a href="http://codepen.io/bferioli">@bferioli</a>) on <a href="http://codepen.io">CodePen</a>.

Heart od PinZen

See the Pen <a href="https://codepen.io/Pinzen/pen/ragjZa/">Heart</a> by PinZen (<a href="http://codepen.io/Pinzen">@Pinzen</a>) on <a href="http://codepen.io">CodePen</a>.

Licznik V Day od Tobi Weinstock

See the Pen <a href="https://codepen.io/tvweinstock/pen/qbMbWq/">V Day Countdown</a> by Tobi Weinstock (<a href="http://codepen.io/tvweinstock">@tvweinstock</a>) on <a href="http://codepen.io">CodePen</a>.

Codevember Day 18 od Mai El-Awini

See the Pen <a href="https://codepen.io/maicodes/pen/bVZodV/">Codevember Day 18</a> by Mai El-Awini (<a href="http://codepen.io/maicodes">@maicodes</a>) on <a href="http://codepen.io">CodePen</a>.

Don't be a Miser od Diaco M.Lotfollahi

See the Pen <a href="https://codepen.io/MAW/pen/bpoQLQ/">Don't be a Miser ?</a> by Diaco M.Lotfollahi (<a href="http://codepen.io/MAW">@MAW</a>) on <a href="http://codepen.io">CodePen</a>.

Heart Code - Pure CSS od Karoline

See the Pen <a href="https://codepen.io/itska/pen/aZNOGJ/">Heart Code - Pure CSS</a> by Karoline (<a href="http://codepen.io/itska">@itska</a>) on <a href="http://codepen.io">CodePen</a>.

Zelda Heart Container Loader od Simon Goellner

See the Pen <a href="https://codepen.io/simeydotme/pen/xpuLs/">Zelda Heart Container Loader</a> by Simon Goellner (<a href="http://codepen.io/simeydotme">@simeydotme</a>) on <a href="http://codepen.io">CodePen</a>.

Heart od Stix

See the Pen <a href="https://codepen.io/stix/pen/BjMOrW/">Heart</a> by Stix (<a href="http://codepen.io/stix">@stix</a>) on <a href="http://codepen.io">CodePen</a>.

U complete Me od massimo

See the Pen <a href="https://codepen.io/_massimo/pen/jbRxgE/">U complete Me</a> by massimo (<a href="http://codepen.io/_massimo">@_massimo</a>) on <a href="http://codepen.io">CodePen</a>.

Happy Heart in Valentines Day od Dany Santos

See the Pen <a href="https://codepen.io/THEORLAN2/pen/bEzyjQ/">Happy Heart in Valentines Day</a> by Dany Santos (<a href="http://codepen.io/THEORLAN2">@THEORLAN2</a>) on <a href="http://codepen.io">CodePen</a>.

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: St. Valentine’s Codepens – Romantic CSS Pens Showcase.

Gratis Inspiracja Web Design

Katarzyna Pawłowska

W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.

Polecane wpisy

Narzędzia

Romantyczny gratis od TemplateMonster i CodePen

Send Hearts od Kunal Varma

Twitter's Heart Full CSS od Nicolas Escoffier

CSS3 Heart od Tamer Aydn

Heart of Words od Mohammad S Jaber

Heart beat od Andrew Sims

Beating Heart - CSS i SVG animacja - low poly od morkett

CSS animowane serce od Brenna O'Brien

Pulsing (he)art od ZeroSpree

Broken Heart od Stas Melnikov

Heart App Concept od David Khourshid

No library heart → star wave od Ana Tudor

Heart-it od Tulula Smith

SCSS Mended Heart tribute Pray dla Orlando od Michelle L Pepe

Broken Heart od Naila Ahmad

3D Particle Heart od Gregor Adams

Heart eyes od Johan Lindell

Heart grid od Ana Tudor

CSS Transparent Heart Outline - 1 Element od Kyle Lavery

Codevember Day 6 od Mai El-Awini

Scripted Heart od Nik

Css beating heart od Greg DiPietro

For CodePen with Love od Ruslan Pivovarov

Be my Valentine heart od Skippy

Love 101: The Introvert odTiffany Rayside

HTML5 Canvas od Brandon Ferioli

Heart od PinZen

Licznik V Day od Tobi Weinstock

Codevember Day 18 od Mai El-Awini

Don't be a Miser od Diaco M.Lotfollahi

Heart Code - Pure CSS od Karoline

Zelda Heart Container Loader od Simon Goellner

Heart od Stix

U complete Me od massimo

Happy Heart in Valentines Day od Dany Santos

Polecane wpisy

Darmowe kreatory logo: 10+ najlepszych serwisów

Darmowe szablony Tumblr: wybierz najbardziej stylowy projekt dla swojego bloga

Darmowe generatory makiet: stwórz realistyczną makietę za minutę [Nie wymagają Photoshopa]

Romantyczny gratis od TemplateMonster i CodePen

Send Hearts od Kunal Varma

Twitter's Heart Full CSS od Nicolas Escoffier

CSS3 Heart od Tamer Aydn

Heart of Words od Mohammad S Jaber

Heart beat od Andrew Sims

Beating Heart - CSS i SVG animacja - low poly od morkett

CSS animowane serce od Brenna O'Brien

Pulsing (he)art od ZeroSpree

Broken Heart od Stas Melnikov

Heart App Concept od David Khourshid

No library heart → star wave od Ana Tudor

Heart-it od Tulula Smith

SCSS Mended Heart tribute Pray dla Orlando od Michelle L Pepe

Broken Heart od Naila Ahmad

3D Particle Heart od Gregor Adams

Heart eyes od Johan Lindell

Heart grid od Ana Tudor

CSS Transparent Heart Outline - 1 Element od Kyle Lavery

Codevember Day 6 od Mai El-Awini

Scripted Heart od Nik

Css beating heart od Greg DiPietro

For CodePen with Love od Ruslan Pivovarov

Be my Valentine heart od Skippy

Love 101: The Introvert odTiffany Rayside

HTML5 Canvas od Brandon Ferioli

Heart od PinZen

Licznik V Day od Tobi Weinstock

Codevember Day 18 od Mai El-Awini

Don't be a Miser <img decoding="async" class="emoji" draggable="false" src="https://s.w.org/images/core/emoji/2/svg/1f609.svg" alt="?" /> od Diaco M.Lotfollahi

Heart Code - Pure CSS od Karoline

Zelda Heart Container Loader od Simon Goellner

Heart od Stix

U complete Me od massimo

Happy Heart in Valentines Day od Dany Santos

Polecane wpisy

Darmowe kreatory logo: 10+ najlepszych serwisów

Darmowe szablony Tumblr: wybierz najbardziej stylowy projekt dla swojego bloga

Darmowe generatory makiet: stwórz realistyczną makietę za minutę [Nie wymagają Photoshopa]

Don't be a Miser od Diaco M.Lotfollahi