2012年36个最佳前端开发指南

淩亂°似流年 2022-04-14 05:53 179阅读 0赞

学习新开发技术通常都比较艰难和费时。以前Web开发人员是会买相关书籍，或者阅读其他开发人员编写的指南。如今每周都有很多新博文和教程。[spyrestudios][] 博主 Jake 收集、整理并分享他个人最喜欢的36篇前端开发指南文章。涵盖 CSS3、动态条幅、响应式内容结构、实时地理信息、响应式时间轴、图片选中3D效果、jQuery区域图表、3D餐馆菜单、纯CSS加载动画……

**[Animated Tabs Widget][]**

[![Animated Tabs Widget][Animated Tabs Widget 1]][Animated Tabs Widget 1]

**[Dynamic Web Banners][]**

[![Dynamic Web Banners][Dynamic Web Banners 1]][Dynamic Web Banners 1]

**[CSS3 Animated Tooltips][]**

[![CSS3 Animated Tooltips][CSS3 Animated Tooltips 1]][CSS3 Animated Tooltips 1]

**[Radio Button Switches][]**

[![Radio Button Switches][Radio Button Switches 1]][Radio Button Switches 1]

**[CSS3 Psuedo Buttons][]**

[![CSS3 Psuedo Buttons][CSS3 Psuedo Buttons 1]][CSS3 Psuedo Buttons 1]

**[Responsive Content Navigator][]**

[![content navigation widget css3 web development][]][Responsive Content Navigator]

**[Custom Dropdown Lists][]**

[![unique styles for html5 select dropdown lists][]][Custom Dropdown Lists]

**[CSS3 Page Transitions][]**

[![custom web development tuts page transitions][]][CSS3 Page Transitions]

**[Real-Time Geolocation][]**

[![Node.js JavaScript scripting webapp location maps][]][Real-Time Geolocation]

**[Custom Login Form][]**

[![html5 css3 web development contact form][]][Custom Login Form]

**[Modern Blockquote Styles][]**

[![custom css3 blockquote html5 web design styles tutorial][]][Modern Blockquote Styles]

**[Vertical Showcase Slider][]**

[![jQuery images gallery slider slideshow][]][Vertical Showcase Slider]

**[Sliding Image Panels][]**

[![custom sliding jQuery JavaScript CSS3 image panels][]][Sliding Image Panels]

**[CSS3 Accordion][]**

[![custom radio buttons checkboxes accordion form inputs][]][CSS3 Accordion]

**[Portfolio Filter][]**

[![jQuery plugin effects filtering portfolio entries][]][Portfolio Filter]

**[Cards Sorting Plugin][]**

[![Freebie jQuery plugin sorting cards dynamically website][]][Cards Sorting Plugin]

**[Responsive CSS Timeline][]**

[![quotes timeline web design tutorial css3][]][Responsive CSS Timeline]

**[Timed Notifications][]**

[![timed notifications alert boxes tutorial][]][Timed Notifications]

**[Circle Hover Effects][]**

[![circle web design hover effects transitions][]][Circle Hover Effects]

**[Image Accordion Widget][]**

[![basic image gallery accordion design css3][]][Image Accordion Widget]

**[3D Thumbnail Hover Effects][] 3D 缩略图悬浮特效**

[![thumbmnail image hover effects jQuery css3][]][3D Thumbnail Hover Effects]

**[Parallax Slideshow][]**

[![css3 transitions slideshow images html parallax scrolling][]][Parallax Slideshow]

**[Custom List Menu][]**

[![dropdown links navigation menu custom styles css3][]][Custom List Menu]

**[Fullscreen Slider with jQuery][]**

[![fullscreen website layout design jquery effects][]][Fullscreen Slider with jQuery]

**[Background Image Slideshow][]**

[![fullscreen images background photo slideshow css3 tutorial][]][Background Image Slideshow]

**[Bookblock jQuery Flip Plugin][]**

[![flipping page effect jQuery html content][]][Bookblock jQuery Flip Plugin]

**[Fullscreen Transitions][]**

[![transition website layout design fullscreen][]][Fullscreen Transitions]

**[Animated Swatch Book][]**

[![CSS3 Colors Swatch Book HTML5 jQuery web development][]][Animated Swatch Book]

**[jQuery Area Charts][]**

[![data tracking updated charts dynamic jQuery][]][jQuery Area Charts]

**[3D Restaurant Menu Layout][]**

[![food restaurant bar website layout menu animated][]][3D Restaurant Menu Layout]

**[Triple-Panel Image Slider][]**

[![images slider three coding web developer css3][]][Triple-Panel Image Slider]

**[CSS Loading Animations][]**

[![CSS3 animated loading ajax images][]][CSS Loading Animations]

**[Lightbox Photobooth Strips][]**

[![photo booth images strips css3 tutorial][]][Lightbox Photobooth Strips]

**[Fullscreen Video with BigVideo.js][]**

[![HTML5 fullscreen oversized videos streaming slideshow tutorial][]][Fullscreen Video with BigVideo.js]

**[CSS3 Annotations][]**

[![fancy tutorial website guide annotations css3 jquery][]][CSS3 Annotations]

**[Image Thumbnail Groups][]**

[![Adaptive responsive image galleries thumbnails][]][Image Thumbnail Groups]

英文原文：[spyrestudios][]，编译：[伯乐][Link 1]在线

译文链接：[http://blog.jobbole.com/31281/][http_blog.jobbole.com_31281]

[spyrestudios]: http://spyrestudios.com/36-best-frontend-web-development-tutorials-of-2012/
[Animated Tabs Widget]: http://tympanus.net/codrops/2012/04/12/animated-content-tabs-with-css3/
[Animated Tabs Widget 1]: http://blog.jobbole.com/wp-content/uploads/2012/12/01-animated-tabs-widget-css3-jquery.png
[Dynamic Web Banners]: http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/
[Dynamic Web Banners 1]: http://blog.jobbole.com/wp-content/uploads/2012/12/Dynamic-Web-Banners.jpg
[CSS3 Animated Tooltips]: http://tympanus.net/codrops/2012/02/01/how-to-create-animated-tooltips-with-css3/
[CSS3 Animated Tooltips 1]: http://blog.jobbole.com/wp-content/uploads/2012/12/03-dynamic-animated-tooltips-css3.png
[Radio Button Switches]: http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/
[Radio Button Switches 1]: http://blog.jobbole.com/wp-content/uploads/2012/12/04-custom-input-buttons-radio-css3.png
[CSS3 Psuedo Buttons]: http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/
[CSS3 Psuedo Buttons 1]: http://blog.jobbole.com/wp-content/uploads/2012/12/05-css3-psuedo-buttons-effects.png
[Responsive Content Navigator]: http://tympanus.net/codrops/2012/03/23/responsive-content-navigator-with-css3/
[content navigation widget css3 web development]: http://spyrestudios.com/wp-content/uploads/06-responsive-web-content-navigator.png
[Custom Dropdown Lists]: http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/
[unique styles for html5 select dropdown lists]: http://spyrestudios.com/wp-content/uploads/07-simple-effects-css3-dropdown-lists.png
[CSS3 Page Transitions]: http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/
[custom web development tuts page transitions]: http://spyrestudios.com/wp-content/uploads/08-page-transitions-with-css3-jquery.png
[Real-Time Geolocation]: http://tympanus.net/codrops/2012/10/11/real-time-geolocation-service-with-node-js/
[Node.js JavaScript scripting webapp location maps]: http://spyrestudios.com/wp-content/uploads/09-nodejs-gps-location-script.png
[Custom Login Form]: http://tympanus.net/codrops/2012/10/16/custom-login-form-styling/
[html5 css3 web development contact form]: http://spyrestudios.com/wp-content/uploads/10-custom-css3-login-form-styles.png
[Modern Blockquote Styles]: http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/
[custom css3 blockquote html5 web design styles tutorial]: http://spyrestudios.com/wp-content/uploads/11-modern-css3-blockquote-html5-tutorial.png
[Vertical Showcase Slider]: http://tympanus.net/codrops/2012/10/01/vertical-showcase-slider-with-jquery-and-css-transitions/
[jQuery images gallery slider slideshow]: http://spyrestudios.com/wp-content/uploads/12-vertical-showcase-slider-jquery.png
[Sliding Image Panels]: http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/
[custom sliding jQuery JavaScript CSS3 image panels]: http://spyrestudios.com/wp-content/uploads/13-sliding-image-panels-jquery.png
[CSS3 Accordion]: http://tympanus.net/codrops/2012/02/21/accordion-with-css3/
[custom radio buttons checkboxes accordion form inputs]: http://spyrestudios.com/wp-content/uploads/14-custom-accordion-css3-jquery-radio.png
[Portfolio Filter]: http://tympanus.net/codrops/2012/01/09/filter-functionality-with-css3/
[jQuery plugin effects filtering portfolio entries]: http://spyrestudios.com/wp-content/uploads/15-filter-portfolio-items-css3.png
[Cards Sorting Plugin]: http://tympanus.net/codrops/2012/11/13/baraja-a-plugin-for-spreading-items-in-a-card-like-fashion/
[Freebie jQuery plugin sorting cards dynamically website]: http://spyrestudios.com/wp-content/uploads/16-baraja-jquery-plugin-cards-sorting.png
[Responsive CSS Timeline]: http://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/
[quotes timeline web design tutorial css3]: http://spyrestudios.com/wp-content/uploads/17-css3-timeline-responsive-web-design.png
[Timed Notifications]: http://tympanus.net/codrops/2012/06/25/timed-notifications-with-css-animations/
[timed notifications alert boxes tutorial]: http://spyrestudios.com/wp-content/uploads/18-timed-css3-notification-boxes.png
[Circle Hover Effects]: http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
[circle web design hover effects transitions]: http://spyrestudios.com/wp-content/uploads/19-circle-hover-effects-css3-transitions.png
[Image Accordion Widget]: http://tympanus.net/codrops/2012/06/06/image-accordion-with-css3/
[basic image gallery accordion design css3]: http://spyrestudios.com/wp-content/uploads/20-css3-image-accordion-transition-slideshow.png
[3D Thumbnail Hover Effects]: http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/
[thumbmnail image hover effects jQuery css3]: http://spyrestudios.com/wp-content/uploads/21-3d-thumbnail-image-hover-effects.png
[Parallax Slideshow]: http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
[css3 transitions slideshow images html parallax scrolling]: http://spyrestudios.com/wp-content/uploads/22-css3-image-transition-slideshow.png
[Custom List Menu]: http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
[dropdown links navigation menu custom styles css3]: http://spyrestudios.com/wp-content/uploads/23-custom-dropdown-menu-list-styling.png
[Fullscreen Slider with jQuery]: http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/
[fullscreen website layout design jquery effects]: http://spyrestudios.com/wp-content/uploads/24-fullscreen-slit-slider-webdesign-tutorial.png
[Background Image Slideshow]: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
[fullscreen images background photo slideshow css3 tutorial]: http://spyrestudios.com/wp-content/uploads/25-fullscreen-image-photo-css3-slideshow.png
[Bookblock jQuery Flip Plugin]: http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/
[flipping page effect jQuery html content]: http://spyrestudios.com/wp-content/uploads/26-bookblock-plugin-jquery-content-flip-effect.png
[Fullscreen Transitions]: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
[transition website layout design fullscreen]: http://spyrestudios.com/wp-content/uploads/27-css3-transition-fullscreen-website-layout.png
[Animated Swatch Book]: http://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/
[CSS3 Colors Swatch Book HTML5 jQuery web development]: http://spyrestudios.com/wp-content/uploads/28-css3-swatch-book-jquery-dynamic.png
[jQuery Area Charts]: http://tympanus.net/codrops/2012/08/29/multiple-area-charts-with-d3-js/
[data tracking updated charts dynamic jQuery]: http://spyrestudios.com/wp-content/uploads/29-multiple-charts-recordings-data.png
[3D Restaurant Menu Layout]: http://tympanus.net/codrops/2012/09/25/3d-restaurant-menu-concept/
[food restaurant bar website layout menu animated]: http://spyrestudios.com/wp-content/uploads/30-3d-css3-html5-menu-jquery-website.png
[Triple-Panel Image Slider]: http://tympanus.net/codrops/2012/08/16/triple-panel-image-slider/
[images slider three coding web developer css3]: http://spyrestudios.com/wp-content/uploads/31-triple-panel-image-slider-showcase.png
[CSS Loading Animations]: http://tympanus.net/codrops/2012/11/14/creative-css-loading-animations/
[CSS3 animated loading ajax images]: http://spyrestudios.com/wp-content/uploads/32-creative-animated-jquery-css3-loading.png
[Lightbox Photobooth Strips]: http://tympanus.net/codrops/2012/08/01/photo-booth-strips-with-lightbox/
[photo booth images strips css3 tutorial]: http://spyrestudios.com/wp-content/uploads/33-css3-html5-photo-booth-strips-lightbox.png
[Fullscreen Video with BigVideo.js]: http://tympanus.net/codrops/2012/09/19/fullscreen-video-slideshow-with-bigvideo-js/
[HTML5 fullscreen oversized videos streaming slideshow tutorial]: http://spyrestudios.com/wp-content/uploads/34-fullscreen-video-slideshow-bigvideo-js.png
[CSS3 Annotations]: http://tympanus.net/codrops/2012/05/14/annotation-overlay-effect-with-css3/
[fancy tutorial website guide annotations css3 jquery]: http://spyrestudios.com/wp-content/uploads/35-css3-jquery-annonation-overlay-bubbles.png
[Image Thumbnail Groups]: http://tympanus.net/codrops/2012/11/21/adaptive-thumbnail-pile-effect-with-automatic-grouping/
[Adaptive responsive image galleries thumbnails]: http://spyrestudios.com/wp-content/uploads/36-adaptive-thumbnail-images-gallery-jquery.png
[Link 1]: http://www.jobbole.com/
[http_blog.jobbole.com_31281]: http://blog.jobbole.com/31281/