SortableJS / Sortable

Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
https://sortablejs.github.io/Sortable/
MIT License
29.62k stars 3.7k forks source link

Sortable.js Logo with pure CSS and sortable #1028

Open dominik-bln opened 7 years ago

dominik-bln commented 7 years ago

I was having some fun with your logo, recreating it with CSS and making it sortable with sortable and thought you might be interested:

https://codepen.io/dmnk_bln/pen/MJrYXq

There are still some issues as it was just a finger exercise for now:

Let me know if you want a pull request for the homepage, otherwise feel free to close. Thanks for the nice tool.

RubaXa commented 7 years ago

@ibnDuke what font did you used?

thewebsitedev commented 7 years ago

@RubaXa font-family: Helvetica Neue, Helvetica, Arial;

ibnDuke commented 7 years ago

screen shot 2017-02-22 at 11 56 35

ibnDuke commented 7 years ago

Shadows — are black triangles with alpha 10%.

dominik-bln commented 7 years ago

Thanks, I'll have a look.

Probably won't look that good on Windows though because of the missing 'Helvetica Neue'. Or I'll just overlay it with transparent image of the text 🤔

rikkertkoppes commented 7 years ago

You could use Pragmatica, which looks pretty similar: https://typekit.com/fonts/pragmatica Shadows can be done with pseudoelements