The Curious Engineer

tympanus.net

2009–2013

521 posts

2014–2026 →

2013 108

December 2013

  1. Svg drawing animation
  2. Merry christmas with a bursting gift box
  3. Perspective page view navigation
  4. Progress button styles
  5. Techniques for creating textured text
  6. Codrops

November 2013

  1. Svg icons ftw
  2. Applying app design concepts to website design
  3. Techniques for responsive typography
  4. Animated opening type
  5. Elastic stack elastic dragging interaction
  6. Css overlay techniques
  7. Animated svg icons with snap svg
  8. Codrops

October 2013

  1. Medium style page transition
  2. Multi item selection
  3. Split layout
  4. Animations for thumbnail grids
  5. Animated checkboxes and radio buttons with svg
  6. A collection of separator styles
  7. Codrops

September 2013

  1. Animated border menus
  2. So youre a web designer right
  3. Creative loading effects
  4. Sliding horizontal layout
  5. Codrops

August 2013

  1. Transitions for off canvas navigations
  2. 3d shading with box shadows
  3. Multi level push menu
  4. Building a circular navigation with css transforms
  5. Creative link effects
  6. 3d effect for mobile app showcase
  7. Codrops

July 2013

  1. Freebie famous landmarks icon set ai eps psd
  2. Google nexus website menu
  3. On scroll effect layout
  4. Troubleshooting css
  5. On scroll header effects
  6. Justified and vertically centered header elements
  7. Animated books with css 3d transforms
  8. Using custom data attributes and pseudo elements
  9. Interactive particles slideshow
  10. Loading effects for grid items with css animations
  11. View mode switch
  12. Responsive icon grid
  13. Codrops

June 2013

  1. Expanding search bar deconstructed
  2. Nifty modal window effects
  3. Dynamic grid with transitions
  4. Caption hover effects
  5. Creative button styles
  6. Freebie stationery icon set eps ai psd
  7. Web audio stylophone
  8. Responsive multi column form
  9. On scroll animated header
  10. Codrops

May 2013

  1. Simple icon hover effects
  2. Bookblock revised
  3. Tooltip menu
  4. Examples of pseudo elements animations and transitions
  5. Natural language form with custom input elements
  6. Horizontal slide out menu
  7. Product grid layout
  8. Morphing devices
  9. Responsive retina ready menu
  10. A collection of page transitions
  11. Automatic figure numbering with css counters
  12. Fixed background scrolling layout
  13. Vertical timeline
  14. Codrops

April 2013

  1. Text opening sequence with css animations
  2. Simple youtube menu effect
  3. Fullscreen layout with page transitions
  4. Responsive multi level menu
  5. Slide and push menus
  6. Responsive full width grid
  7. Background slideshow
  8. App showcase with grid overlay
  9. Codrops

March 2013

  1. Nested accordion
  2. Quotes rotator
  3. A great ui is invisible
  4. Thumbnail grid with expanding preview
  5. Hexaflip a flexible 3d cube plugin
  6. Horizontal drop down menu
  7. Vertical icon menu
  8. Codrops

February 2013

  1. Image techniques for creating depth in web design
  2. Elastic content slider
  3. Full width image slider
  4. Introducing blueprints a new section on codrops
  5. Fresh and creative web design techniques
  6. Designing with motion
  7. Interactive infographic with svg and css animations
  8. Creating nestable dynamic grids
  9. Codrops

January 2013

  1. Planning your web design with sketches
  2. Flipping circle slideshow
  3. Creative layouts and interactions in web design
  4. Defending presentational class names
  5. Ui design guidelines for responsive design
  6. Putting css clip to work expanding overlay effect
  7. Understanding the css clip property
  8. 3d image gallery room
  9. Designing for the empty states
  10. 3d book showcase
  11. Techniques for creating motion in web design
  12. Codrops

2012 143

December 2012

  1. How to create a simple multi item slider
  2. Tips for a clean and minimal online store design
  3. Slider pagination concept
  4. A creative year distinctive web designs of 2012
  5. Css click events
  6. Sticky captions concept
  7. Fullscreen pageflip layout
  8. Grabbing attention and building a moving experience with shape
  9. Responsive touch friendly audio player
  10. Stackslider a fun 3d image slider
  11. Codrops

November 2012

  1. Simple effects for drop down lists
  2. Calendario a flexible calendar plugin
  3. Using transparency in web design dos and donts
  4. Three script updates
  5. Adaptive thumbnail pile effect with automatic grouping
  6. Learning principles for improving your css
  7. Responsive css timeline with 3d effect
  8. Creative css loading animations
  9. Baraja a plugin for spreading items in a card like fashion
  10. Mobile design typography is vitally important and challenging
  11. Gamma gallery a responsive image gallery experiment
  12. Heading set styling with css
  13. Codrops

October 2012

  1. Becoming device agnostic
  2. Elastislide revised
  3. Kick start your project a collection of handy css snippets
  4. Slit slider revised
  5. Basic ready to use css styles
  6. Slicebox revised
  7. Creating off center balance using asymmetry in web design
  8. Pfold paper like unfolding effect
  9. Custom login form styling
  10. The unwritten rules of a great design critique
  11. Busting that creative slump youre in
  12. Real time geolocation service with node js
  13. Windy a plugin for swift content navigation
  14. Custom drop down list styling
  15. Freebie application icon set png psd csh
  16. Vertical showcase slider with jquery and css transitions
  17. Codrops

September 2012

  1. Stop look click attention grabbing elements in web design
  2. Make a statement with type
  3. 3d restaurant menu concept
  4. Dashboard design elements for the win
  5. Fullscreen video slideshow with bigvideo js
  6. Build a color scheme the fundamentals
  7. Button switches with checkboxes and css3 fanciness
  8. Creative web typography styles
  9. Do i really need a style guide
  10. Perfectly paired using symmetry in web design
  11. Bookblock a content flip plugin
  12. Codrops

August 2012

  1. Multiple area charts with d3 js
  2. Happy birthday 3 years of codrops
  3. Unfolding 3d thumbnails concept
  4. We are architects
  5. Creative background styles and trends in web design
  6. Triple panel image slider
  7. Inject energy into your mobile design with light effects
  8. Circle hover effects with css transitions
  9. Freebie soft ui kit psd
  10. Animated responsive image grid
  11. Photo booth strips with lightbox
  12. Codrops

July 2012

  1. Examples of creative and modern effects in web design
  2. Modern block quote styles
  3. I love script fonts heres why
  4. Designing the dreaded form getting creative
  5. 3d flipping circle with css3 and jquery
  6. Old school cassette player with html5 audio
  7. Tips tools for grid based layouts
  8. Freebie baby blue ui kit psd
  9. Designing the dreaded form
  10. Swatch book with css3 and jquery
  11. Codrops

June 2012

  1. Responsive 3d panel layout
  2. Timed notifications with css animations
  3. Line that up proper alignment in web design
  4. 3d thumbnail hover effects
  5. How web design has changed print
  6. Css only responsive layout with smooth transitions
  7. Visual hierarchy in mobile design
  8. Book review the designers web handbook
  9. 7 elements of a well converting subscription page
  10. Image accordion with css3
  11. Fullscreen slit slider with jquery and css3
  12. Codrops

May 2012

  1. Understanding the rule of thirds in web design
  2. Creating an animated 3d bouncing ball with css3
  3. Animated 3d bar chart with css3
  4. Making room to breathe wrapping text around elements
  5. Annotation overlay effect with css3
  6. Understanding the lingo typography glossary
  7. How to create a fast hover slideshow with css3
  8. Experimental page layout inspired by flipboard
  9. Enhance required form fields with css3
  10. Effective typography driven web design
  11. Codrops

April 2012

  1. Fluid css3 slideshow with parallax effect
  2. Type effects in web design its all about moderation
  3. Audio slideshow with jplayer
  4. The divine proportion and web design
  5. Rotating words with css animations
  6. Animated content tabs with css3
  7. Successful web design its all about the details
  8. Direction aware hover effect with css3 and jquery
  9. Slideshow with jmpress js
  10. Color and emotion what does each hue mean
  11. Responsive horizontal layout
  12. Codrops

March 2012

  1. Add impact to type driven projects
  2. Login and registration form with html5 and css3
  3. More examples of fresh effects in web design
  4. Responsive content navigator with css3
  5. Condensed fonts the good the bad the ugly
  6. Parallax content slider with css3 and jquery
  7. Understanding and using type categories in web design
  8. Codrops

February 2012

  1. Principles of color and the color wheel
  2. Accordion with css3
  3. Establish a mood with typography
  4. Overcoming the user designer disease
  5. Type effects and modification
  6. 3d gallery with css3 and jquery
  7. Keys to email creative success marketing and design
  8. How to create animated tooltips with css3
  9. Codrops

January 2012

  1. Page transitions with css3
  2. Modular front end development with less
  3. Be less annoying reduce bounce rates through better web design
  4. Arctext js curving text with css3 and jquery
  5. How to spice up your menu with css3
  6. Sliding image panels with css3
  7. 5 things every mobile design should have
  8. Css buttons with pseudo elements
  9. Animated web banners with css3
  10. Filter functionality with css3
  11. Examples of fresh effects in web design
  12. Jumping the hurdles of brainstorming
  13. Thumbnail proximity effect
  14. Fullscreen background image slideshow with css3
  15. Codrops

2011 116

December 2011

  1. How often do you try new things
  2. With rocking letters into the new year
  3. Css3 lightbox
  4. Slopy elements with css3
  5. Experimental css3 animations for image transitions
  6. Item blur effect with css3 and jquery
  7. Experiments with background clip text
  8. Design it to build it what to consider when designing for the web
  9. 25 examples of perfect color combinations in web design
  10. Splash and coming soon page effects with css3
  11. Lateral on scroll sliding with jquery
  12. 6 questions you should ask yourself when choosing fonts
  13. Codrops

November 2011

  1. Inspiring examples of symbol and metaphor use in web design
  2. Typography effects with css3 and jquery
  3. Top 10 reasons to use html5 right now
  4. 20 examples of centered website designs
  5. Hover and click trigger circular elements
  6. Elastic image slideshow with thumbnail preview
  7. Fullscreen image blur effect with html5
  8. Lines in web design
  9. 25 fresh examples of beautiful typeface combinations in web design
  10. Interactive html5 typography
  11. Animated buttons with css3
  12. Texture use in minimal web design
  13. Original hover effects with css3
  14. Codrops

October 2011

  1. Fullscreen image 3d effect
  2. Be more creative through design constraints
  3. Creative css3 animation menus
  4. Developing unity in web design
  5. Blur menu with css3 transitions
  6. Wave display effect
  7. Architecture in web design applying vitruvius principles
  8. Flexible slide to top accordion
  9. Circle navigation effect with css3
  10. 25 examples of emphasis applied in web design
  11. Draggable image boxes grid
  12. Mobile the webs new minimalist movement
  13. Codrops

September 2011

  1. Developing emphasis in web design
  2. Scrollbar visibility with jscrollpane
  3. Multi level photo map
  4. Is there room for negative space in web design
  5. Responsive image gallery
  6. Developing balance in web design
  7. Elastislide responsive carousel
  8. Slicebox 3d image slider
  9. J is for jcookies http cookie handling for jquery
  10. Codrops

August 2011

  1. Html only the significance of proper markup
  2. Automatic image montage
  3. Why do chairs have four legs
  4. Image zoom tour
  5. Developing visual rhythm in web design
  6. Circular content carousel
  7. Portfolio image navigation
  8. Fullscreen grid portfolio
  9. Minimal contrasty color schemes
  10. Codrops

July 2011

  1. Content rotator
  2. Vertical sliding accordion
  3. Animated text and icon menu
  4. Living a dual life a view on the coding designers debate
  5. 25 examples of inspiring product display
  6. Fullscreen slideshow with html5 audio
  7. Sliding background image menu
  8. Codrops

June 2011

  1. Great daily tools for freelancers
  2. Creative thumbnail usage in web design
  3. Perfect landing page
  4. Grid navigation effects
  5. Codrops

May 2011

  1. Image wall
  2. Sliding letters with jquery
  3. Codrops

April 2011

  1. Rotating image slider
  2. Animated skills diagram
  3. Restaurant template
  4. Mega web buttons pack 1
  5. Interactive google map
  6. Circular discography template
  7. Codrops

March 2011

  1. Moving boxes content
  2. Portrait usage in web design
  3. The importance of texture in mobile design
  4. Expanding image menu
  5. Animated content menu
  6. Parallax usage in web design
  7. Make em feel at home
  8. Codrops

February 2011

  1. 25 examples of interesting and beautiful navigation
  2. Re thinking browser compatibility
  3. Designing for feature rich websites
  4. 20 unique and creative image sliders
  5. Overlay like effect
  6. The problem with web fonts
  7. Fullscreen gallery with thumbnail flip
  8. Interesting and creative structures in web design
  9. Lets call it modern web design
  10. 3d wall gallery
  11. Codrops

January 2011

  1. Depth perspective web design
  2. Thumbnails Preview Slider with jQuery | Codrops
  3. 25 Examples of Circular Elements in Web Design | Codrops
  4. Fingers are Bigger than Mice – Design Concepts for Mobile Websites | Codrops
  5. Sweet Thumbnails Preview Gallery | Codrops
  6. Shadow Usage in Web Design | Codrops
  7. Visual Movement: Flow in Web Design | Codrops
  8. B&W Box Gallery | Codrops
  9. Creative Examples of Portfolio Item Display | Codrops
  10. Share, Don’t Steal (why we copy) | Codrops
  11. 25 Fresh Examples of Beautiful UI Elements | Codrops
  12. Animated Form Switching with jQuery | Codrops
  13. Parallax Slider with jQuery | Codrops
  14. Codrops

2010 88

December 2010

  1. Portfolio Zoom Slider with jQuery | Codrops
  2. Website Tour with jQuery | Codrops
  3. Moleskine Notebook with jQuery Booklet | Codrops
  4. Bubbleriffic Image Gallery with jQuery | Codrops
  5. Codrops

November 2010

  1. Merging Image Boxes with jQuery | Codrops
  2. Overlay Effect Menu with jQuery | Codrops
  3. Hover Slide Effect with jQuery | Codrops
  4. Animated Portfolio Gallery with jQuery | Codrops
  5. Pull Out Content Panel with jQuery | Codrops
  6. Codrops

October 2010

  1. Custom Animation Banner with jQuery | Codrops
  2. Annotation Overlay Effect with jQuery | Codrops
  3. Slider Gallery with jQuery | Codrops
  4. Compact News Previewer with jQuery | Codrops
  5. Codrops

September 2010

  1. Polaroid Photobar Gallery with jQuery | Codrops
  2. Full Page Image Gallery with jQuery | Codrops
  3. Collapsing Site Navigation with jQuery | Codrops
  4. Codrops

July 2010

  1. Thumbnails Navigation Gallery with jQuery | Codrops
  2. Music Portfolio Template with HTML5 and jQuery | Codrops
  3. Related Posts Slide Out Boxes with jQuery and CSS3 | Codrops
  4. Latest Tweets Tooltip with jQuery | Codrops
  5. Slide Down Box Menu with jQuery and CSS3 | Codrops
  6. UI Elements: Search Box with Filter and Large Drop Down Menu | Codrops
  7. Minimalistic Slideshow Gallery with jQuery | Codrops
  8. Image Highlighting and Preview with jQuery | Codrops
  9. Interactive Photo Desk with jQuery and CSS3 | Codrops
  10. Codrops

June 2010

  1. Awesome Cufonized Fly-out Menu with jQuery and CSS3 | Codrops
  2. Beautiful Photo Stack Gallery with jQuery and CSS3 | Codrops
  3. Multimedia Gallery for Images, Video and Audio | Codrops
  4. UI Elements: Combo Box, Pop Out and Horizontal Slide Out Menu | Codrops
  5. Latest Post Blogroll Slider with jQuery and PHP | Codrops
  6. Flickr Photobar Gallery | Codrops
  7. Fancy Sliding Form with jQuery | Codrops
  8. Smooth Vertical or Horizontal Page Scrolling with jQuery | Codrops
  9. Codrops

May 2010

  1. Sliding Checkbox Actions Menu with jQuery | Codrops
  2. Awesome Mobile Image Gallery Web App | Codrops
  3. Fresh Sliding Thumbnails Gallery with jQuery and PHP | Codrops
  4. Little Boxes Menu with jQuery | Codrops
  5. Sliding Panel Photo Wall Gallery with jQuery | Codrops
  6. Scrollable Thumbs Menu with jQuery | Codrops
  7. Stunning Circular Motion Effect with jQuery | Codrops
  8. Beautiful Background Image Navigation with jQuery | Codrops
  9. Pimp Your Tables with CSS3 | Codrops
  10. Codrops

April 2010

  1. Rocking and Rolling Rounded Menu with jQuery | Codrops
  2. Awesome Bubble Navigation with jQuery | Codrops
  3. Pretty Simple Content Slider with jQuery and CSS3 | Codrops
  4. 60+ Interior Design and Furniture Websites for Your Inspiration | Codrops
  5. Elegant Accordion with jQuery and CSS3 | Codrops
  6. Improved Micro Image Gallery: A jQuery Plugin | Codrops
  7. Micro Image Gallery: A jQuery Plugin | Codrops
  8. End of Page Slide Out Box with jQuery | Codrops
  9. Share the Love: Social Bookmark Designs in Blogs | Codrops
  10. Codrops

March 2010

  1. Interactive Image Vamp up with jQuery, CSS3 and PHP | Codrops
  2. Website Stripping Effect with jQuery | Codrops
  3. PHP/MySQL Contact Form with jQuery | Codrops
  4. A Fresh Bottom Slide Out Menu with jQuery | Codrops
  5. Photo Zoom Out Effect with jQuery | Codrops
  6. A Love Letter to the Design Community | Codrops
  7. Codrops

February 2010

  1. Grungy Random Rotation Menu with jQuery and CSS3 | Codrops
  2. Neat Photo Hover Effect with CSS Sprites and jQuery | Codrops
  3. 66 Famous Fashion Websites for your Inspiration | Codrops
  4. Design Inspiration from Music Videos: Sick Muse by Metric | Codrops
  5. CSS Mania jQuery Plugin | Codrops
  6. Awesome CSS3 & jQuery Slide Out Button | Codrops
  7. A jQuery Heat Map | Codrops
  8. Codrops

January 2010

  1. Fresh Set of CSS-only Menus | Codrops
  2. 24 Beautiful Hotel Website Designs to Get Inspired | Codrops
  3. CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation | Codrops
  4. Self-resizing Navigation Menu with jQuery | Codrops
  5. Some Useful JavaScript & jQuery Snippets – Part 4 | Codrops
  6. Find Your First Twitter Follower | Codrops
  7. Some Useful JavaScript & jQuery Snippets – Part 3 | Codrops
  8. Pause and Play Effect with jQuery | Codrops
  9. Some Useful JavaScript & jQuery Snippets – Part 2 | Codrops
  10. Some Useful JavaScript & jQuery Snippets | Codrops
  11. PrettyNumber – A jQuery Plugin for Formatting Numbers | Codrops
  12. Scrolling to the Top and Bottom with jQuery | Codrops
  13. Clothesline Social Bookmarks – A CSS-only Social Bookmarking Tutorial | Codrops
  14. Codrops

2009 66

December 2009

  1. Easy PHP Site Translation | Codrops
  2. Creating a Rotating Billboard System with jQuery and CSS | Codrops
  3. Day and Night: Creating a Scenery Animation with jQuery and CSS | Codrops
  4. Fixed Fade Out Menu: A CSS and jQuery Tutorial | Codrops
  5. Beautiful Slide Out Navigation Revised | Codrops
  6. URL Image Getter/Uploader/Resizer | Codrops
  7. How I Speeded Up Our Wordpress Blog | Codrops
  8. jBookMark: A jQuery Marking Tool | Codrops
  9. CSS and jQuery Tutorial: Overlay with Slide Out Box | Codrops
  10. Twitter API and jQuery Showcase: Display your Followers or Friends | Codrops
  11. TweetTheme: Color Theme Inspiration from Twitter Themes | Codrops
  12. Codrops

November 2009

  1. jTextTranslate: A jQuery Translation Plugin | Codrops
  2. Beautiful Slide Out Navigation: A CSS and jQuery Tutorial | Codrops
  3. Free Glossy Icons: The jFeedback Icon Set with Source | Codrops
  4. jFeedback: A Minimal jQuery Notification Plugin | Codrops
  5. CSS Tutorial: Image with Toolbar and Navigation Overlay | Codrops
  6. jCapSlide: A jQuery Image Caption Plugin | Codrops
  7. jPaginate: A Fancy jQuery Pagination Plugin | Codrops
  8. jMaxInput: jQuery Twitter-Like Textarea | Codrops
  9. jQuery Image Cropper with Uploader v1.1 | Codrops
  10. Codrops

October 2009

  1. jStickyNote: A jQuery Plugin for Creating Sticky Notes | Codrops
  2. jBar: A jQuery Notification Plugin | Codrops
  3. The “new” design of IMDb | Codrops
  4. And what about resolution? | Codrops
  5. jQuery Image Cropper with Uploader | Codrops
  6. 33 JavaScript Solutions for Sorting Tables | Codrops
  7. Codrops

September 2009

  1. Google API Showcase: The Live Translator | Codrops
  2. Styling Forms with CSS: Sophisticated Registration Form | Codrops
  3. 21 Free CAPTCHA Sources | Codrops
  4. 42 Famous Login and Registration Forms | Codrops
  5. PHP Login System Reloaded v1.1 | Codrops
  6. How To Play Looping Sound In Your iPhone App | Codrops
  7. Checking Network Reachability on the iPhone | Codrops
  8. Codrops’ New Style: Lessons learned from applying CSS3 | Codrops
  9. Dynamic jQuery Image Gallery with Uploader | Codrops
  10. 42 jQuery Navigation based Techniques | Codrops
  11. CSS3 Styled jQuery Dropdown | Codrops
  12. Switching Styles: jQuery CSS Exchanger | Codrops
  13. jQuery Fancy Draggable Captcha | Codrops
  14. 42+ jQuery Image Gallery Plugins | Codrops
  15. Dynamically Changing Style with jQuery | Codrops
  16. CSS3: Creating Web Site Banners | Codrops
  17. jQuery Sliding Menu Plugin | Codrops
  18. 9 Valuable and Working iPhone Programming Tutorials | Codrops
  19. PHP Login System Reloaded | Codrops
  20. 20 fresh and colorful CSS3 buttons | Codrops
  21. 32 free arrow icons for your web page | Codrops
  22. Using MySQL transactions with PHP | Codrops
  23. Calculate the number of days between two dates | Codrops
  24. How to list files in a directory with PHP | Codrops
  25. CSS3 big style fieldset registration form | Codrops
  26. Codrops

August 2009

  1. CSS button with hover effect | Codrops
  2. Solving PHP MySQL UTF-8 issues | Codrops
  3. PHP function that returns the exact age | Codrops
  4. JavaScript browser detection | Codrops
  5. Free Web 2.0 style glossy buttons | Codrops
  6. CSS Gmail style labels | Codrops
  7. Cool CSS-only registration form | Codrops
  8. Simple CSS chart for dynamic content | Codrops
  9. JavaScript: Changing location or stylesheet according to device or browser | Codrops
  10. Simple CSS: Update box for category or posts | Codrops
  11. Codrops

2014–2026 →