Design / Dev Feed #10

Design / Dev Feed #10

A weekly collection of design and development goodies - issue #10, featuring Responsive Company Page, Add To Cart Animation, Parallax Hero Image, Smartphone Remote Control, Sublime Text with CSS, Animated Robot, Mobile Interaction Design, SVG Animations, Twitter's "fave" animation, Long shadow, How to Create (Animated) Text Fills, CSS-only littlebox icons, Color Palette - Flexbox Demo, A Simple Todo App, Technologic Inventions (GIF series), Animating List Items, CSS3 Toggle Buttons.

  • Responsive Company Page by Utku

  • Add To Cart Animation by Marcus Forsberg

    Note: This is a live site. Click add-to-cart button to see the animation.

  • Animated Highlighted Text by Rian Ariona

  • Parallax Hero Image via CodyHouse

    A full-width figure element, with floating images distributed in a 3D space.

  • Smartphone Remote Control with Node.js and Socket.io via Tutorialzine

  • Hamburger menu flip with text change by Eric Grucza

  • Simple CSS-only Dropdown Menu with Subnav by Robert

  • Explosive Menu by Harris Carney

  • Sublime Text with CSS by Alberto Jerez

  • Animated Robot by Casey Zumwalt

  • Animated SVG Headphones by Chris Gannon

  • Diving SVG Animation by Chris Gannon

  • Draw SVG Graph by Chris Gannon

  • Mobile Interaction Design by Ramotion Inc.

  • Twitter's "fave" Animation via CSS Animation

  • Long Shadow by Mladen Stanojevic

    note: move cursor to change light source position

  • How to Create (Animated) Text Fills via Codrops

    A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.

  • littlebox by Cabell Maddux

    Super simple to implement, CSS-only icons.

  • Color Palette - Flexbox Demo by Lincoln Loop

  • A Simple Todo App by Adam Lindqvist

  • Technologic Inventions (GIF series) by 41? 29!

  • Animating List Items

  • CSS3 Toggle Buttons By Ashley Nolan

    A collection of toggle buttons that use CSS3 transitions to animate their state when interacted with. Created using HTML and CSS (no JS).

Go to Top