现在的位置: 首页 > 综合 > 正文

提高前端开发的2012年36个最佳开发教程(上)

2013年05月14日 ⁄ 综合 ⁄ 共 2513字 ⁄ 字号 评论关闭

2012年即将过去,在这一年里,很多流行的前端效果都被展现了出来,我们最常见的打开一个网站,瀑布流映入眼前,动画延迟加载也被很好的发挥,良好的title工具提示也有大的使用,等等,还有很多影响着前端界面的新技术被应用,因此年底有必要对12年使用到的新技术进行汇总

我已经把我个人最喜欢的教程进行了收集,这些教程主要集中在网络技术,如动态横幅,导航菜单,照片幻灯片,以及表单输入的影响,如果本文章对你有帮助,请推荐一下,让更多的开发者受益

Animated Tabs Widget

在本教程中我们要使用单选按钮执行一些简单的 CSS3 内容标签:

 

窗口小部件使用CSS3 jQuery的动画标签

 

 

Dynamic Web Banners

这个教程使用CSS3动画来增添我们的网页横幅广告,广告或任何内容

ads advertisements html5 css3 tutorial banners jquery

CSS3 Animated Tooltips

这个教程告诉你如何创建一些简单的动​​画工具提示使用CSS  transitions 和伪类 :before and :after,目前很流行的前端设计,值得推荐

网站图标网页设计工具提示悬停效果

Radio Button Switches

在本教程中,我们将创建逼真的开关按钮,使用伪元素和复选框。

定制的HTML5输入单选按钮样式

CSS3 Psuedo Buttons

在本教程中,将告诉你只用一个锚标记如何创建与扭曲的按钮

CSS3伪按钮悬停效果

Responsive Content Navigator

这个教程我向您展示如何创建一个具有响应性,CSS的内容导航样式

内容导航部件CSS3 Web开发

Custom Dropdown Lists

一个jQuery插件将下拉列表中选择输入转化成一些简单的扩大效果。值得推荐

对HTML5的独特的风格选择下拉列表

CSS3 Page Transitions

在过去的几年里,我们已经看到了很多的单页网站,他们中的大多数使用JavaScript的一些过渡效果。好了,这个教程教你如何使用CSSTransitions 和 the :target property属性来执行CSS3过度效果

自定义的Web开发TUTS页面转换

实时地理定位

有关如何创建一个简单的实时显示的位置,游客在互动地图上使用Node.js和HTML5地理定位API的应用程序的一个教程。

Node.js的JavaScript脚本语言web应用程序的位置地图

定制登录表单

在本教程中,我们将使用了一些有趣的CSS技术和HTML5技术创建一些现代性和创造性登录表单。

HTML5 CSS3网络的发展联系表格

Modern Blockquote Styles

让我们创建一些有趣的和现代风格的block quotes我们将使用不同的技术来创造独特的外观。

自定义CSS3 BLOCKQUOTE HTML5网页设计风格教程

Vertical Showcase Slider

在本教程中,我们将创建一个非常简单的和敏感产品的网上商店或组合滑块

jQuery的图片画廊滑块幻灯片

Sliding Image Panels

这个教程向您展示如何创建一些巧妙的滑动图像只用CSS面板。我们的想法是,当点击标签时会使用面板的背景图片和动画

自定义滑动的jQuery JavaScript的CSS3图像面板

CSS3手风琴

使用隐藏的输入和标签,我们将创建一个CSS手风琴

自定义单选按钮,复选框手风琴表单输入

Portfolio Filter

 

jQuery插件效果,过滤组合项目

Cards Sorting Plugin

 Baraja 是一个简单易用的 jQuery 插件,它能让你实现像摆放扑克牌一样来显示图片以及洗牌式的切换效果。此插件基于 CSS3 的变换效果而实现。它可让你设置图片展开的速度,顺时针或逆时针展开,切换效果(淡入淡出等)等等。

免费的东西的jQuery插件动态排序卡网站

响应CSS时间轴

个教程如何创建一个实验性的CSS只带3D效果的时间表。

报价时间安排CSS3网页设计教程

定时通知

快速提示有关如何创建一些简单的定时与CSS动画的通知。我们的想法是与一个特定的时间的进度条显示通知,然后让它消失

定时通知,警告框教程

圈悬停效果

使用CSS过渡和3D旋转圆有关如何创建不同的有趣的悬停效果的一个教程

圆的网页设计悬停效果的转换

图片手风琴小工具

在本教程中,我们将创建一个图像手风琴,使用sibling选择符和一个嵌套的结构,我们可以控制项目/幻灯片的单选按钮。

基本的图像画廊手风琴设计CSS3

Parallax Slideshow

在本教程中,我们将创建一个幻灯片使用了CSS3属性的视差效果。

css3 transitions slideshow images html parallax scrolling

Custom List Menu

如何创建一些自定义的下拉列表中的教程。我们会告诉你5个不同的下拉菜单,并列出各种用途的例子。

dropdown links navigation menu custom styles css3

Fullscreen Slider with jQuery

一个教程:如何创建一个全屏幕幻灯片打开当前幻灯片时,导航到下一个或上一个。使用jQuery和CSS动画的内容元素,我们可以创造出独特的幻灯片切换效果。

fullscreen website layout design jquery effects

Background Image Slideshow

创建一个CSS唯一的全屏背景图片的幻灯片。我们将创建不同的图像转换,也使用CSS动画创建标题。

fullscreen images background photo slideshow css3 tutorial

Bookblock jQuery Flip Plugin

使用它可以创建动态的类似书本翻页效果的幻灯。希望大家喜欢!

flipping page effect jQuery html content

Fullscreen Transitions

如何创建一个100%的宽度和高度平滑滚动使用单选按钮,导航和选择符,我们会触发相应的内容面板,创建一个“平滑滚动”的效果。

transition website layout design fullscreen

Animated Swatch Book

有关如何创建一个组件,它可以让你打开和旋转的样本我们将使用CSS转换和过渡,创建一个简单的jQuery插件。

CSS3 Colors Swatch Book HTML5 jQuery web development

jQuery Area Charts

在本教程中,我们将介绍一些基本的D3.js,并创建一个信息图表与多个区域图以及上下文工具进行缩放和平移的数据。

data tracking updated charts dynamic jQuery

3D Restaurant Menu Layout

一个3D菜单概念餐厅网站。我们的想法是一个折叠的传单,将其展开,以显示菜单项。

food restaurant bar website layout menu animated

Triple-Panel Image Slider

一个教程如何创建一个三板的jQuery图像滑块具有3D外观和图像转换效果。

images slider three coding web developer css3

CSS Loading Animations

在本教程中,将告诉你如何使一些有创意的CSS只加载动画。

CSS3 animated loading ajax images

Lightbox Photobooth Strips

在今天的教程中,我们将向您展示如何创建一些可爱的照片带

photo booth images strips css3 tutorial

Fullscreen Video with BigVideo.js

使用BigVideo.js有关如何创建一个类似幻灯片的全屏视频背景的

HTML5 fullscreen oversized videos streaming slideshow tutorial

CSS3 Annotations

如何创建一个叠加效应的项目或图像

fancy tutorial website guide annotations css3 jquery

Image Thumbnail Groups

这个jQuery插件,可以自动分组缩略图,点击缩略图将调转到具有共同属性的一组数据

Adaptive responsive image galleries thumbnails

 

123

抱歉!评论已关闭.