DEV Community: 𝕊𝕒𝕚𝕛𝕠 𝔾𝕖𝕠𝕣𝕘𝕖

7 Fancy Hamburger Menu Design Inspiration

𝕊𝕒𝕚𝕛𝕠 𝔾𝕖𝕠𝕣𝕘𝕖 — Thu, 09 Jan 2020 01:53:01 +0000

Today we will be looking at some hamburger menu CSS design inspiration, here are a few that I really like.

Hamburger Menu To Sidebar - Codepen

Hamburger Button To Doughnut Menu Animation - Codepen

Hamburger Menu Icon To MENU Text - Codepen

Simple Hamburger Menu To X Mark Animation - Codepen

Slide In Nav Menu With Off-Trigger Area - Codepen

Pure CSS Hamburger Menu Slide Out Sidebar - Codepen

Star Wars Lightsaber Hamburger Menu Icon - Codepen

Great Christmas Gift Ideas for Designers and Developers

𝕊𝕒𝕚𝕛𝕠 𝔾𝕖𝕠𝕣𝕘𝕖 — Mon, 09 Dec 2019 05:43:34 +0000

Finding the perfect gift for a designer or developer friend is a h̶a̶r̶d̶ impossible job so I asked a few of them for their perfect gift ideas. I got some great recommendations, some of which were affordable and realistic and others were amazing but super expensive. (For some money might not be a concern so I have included those as well.)

Paper Trophy

These are paper animals designs that you have to assemble, so if your mates love crafts and such these might be a thoughtful gift. I think it's a bit pricey for what it is but boy do they look amazing.

Moleskine Notebooks

Moleskine Notebooks are like an obligatory item in this list, it's as if no designer gift list is complete without adding these in there. It would make a great gift for designers who would like to sketch on the go. Along with the traditional notebooks, they also offer smart notebooks that can transfer your pen-and-ink scribbles to your digital device. An alternate option is a notebook from Fields Notes.

CSS Puns

This is my side project, it is a bunch of CSS puns each with its own T-shirts, mugs, phone cases and posters. There might be something special in there for your mates.

Leaf Ties

Cables running all over the place? This will be a welcome gift for them, it's nothing fancy but a prettier version of the cable tie to the cable spaghetti problem.

Dev Stickers

Laptop stickers are the tech equivalent of prison tattoos. Putting stickers on laptops are a way of showing off a part of our personality to the world. In a lot of cases, SAAS businesses will send em to you when you or hand em out in conferences but if you want to buy some there is a place for that.

Subscription to Design Magazines

There are some great design magazines out there and perhaps a subscription to one of those for a few months might be a very useful gift for them? Here are a few for your consideration: Eye, Harvard Design Magazine, IDEA Mag, etc

Pantone Postcards

If your friend is the kind of person who is still into snail mail and sending out postcards then this might be just what they wanted for Christmas. A box of Pantone Post Cards.

Popup Lighting

These come in the cheaper cardboard or the more expensive plastic or the most expensive aluminium cut and offer a few different choices like the deer head, owl, peacock or cacti. They are certainly a conversation starter in any room and perhaps will be worth the money for that special friend.

Hopefully, I have given you all a few gift ideas or inspirations. Drop a comment below and let me know what was the best design/development related gift you ever received.

Cover Photo by Ben White on Unsplash

Some Button That Delivers... Literally

𝕊𝕒𝕚𝕛𝕠 𝔾𝕖𝕠𝕣𝕘𝕖 — Mon, 25 Nov 2019 01:00:40 +0000

Today we will be looking at some button designs that delivery literally using drones and trucks, plus a few regular old buttons with but with some added functionality when you click on em.

Button to Delivery Truck #1 - Codepen

Drone Delivery In Progress - Codepen

Button to Delivery Truck #2 - Codepen

Button to Email Signup Form - Codepen

Attention Grabbing CTA Button - Codepen

Let that Button Shine - Codepen

Button to Full Blown Form - Codepen

Fun Cartoony Button for the Not So Serious - Codepen

Want more? Check out the button designs gallery on CodeMyUI.

Code snippets to recreate those cool effects seen on famous(ish) sites

𝕊𝕒𝕚𝕛𝕠 𝔾𝕖𝕠𝕣𝕘𝕖 — Wed, 13 Nov 2019 22:55:27 +0000

Today we will be looking at some snippets you can use to recreate those awesome effects you see on other sites.

Reebok Promo Image Transition - Codepen

The gradient pull quote as seen on Polygon - Codepen

Facebook's scroll down to show sticky video popup - Codepen

Soldout Window sign from Electronic Object - Codepen

Stripe's navigation header - Codepen

The squiggle link effect as seen on TheOutline - Codepen

MomentsApp Video Loading - Codrops

Want more check out the deconstruction gallery on CodeMyUI.

Some Fancy Link Hover Effects for Those Special Moments

𝕊𝕒𝕚𝕛𝕠 𝔾𝕖𝕠𝕣𝕘𝕖 — Fri, 08 Nov 2019 02:21:52 +0000

Links are the building blocks of the web, it's how we navigate to new information on the web. With these fancy link effects, you can copy-paste the code from codepen to add similar effects on your webpages.