前端教程

首页>前端教程

jQuery插件推荐:功能强大的水平垂直选项卡插件!

选项卡是非常实用的插件,同一个地方可以放好多不同的内容,通过切换选项实现对应容器的内容显示,其它内容隐藏,可谓是实现小空间大内容的神器。这里推荐一个拥有水平垂直两种方式的选项卡,功能强大,可以自己定制效果。默认的事件是鼠标点击,可以改成鼠标经过事件。动图效果:插件演示插件下载链接:http://pa...

jQuery插件推荐:简单实用的返回到顶部插件!

返回到顶部几乎是一个网站的标配,不过对于一个小型的网站来说,太过复杂花哨的插件反而不实用。这里推荐一个插件,随着滚动条滚动出现按钮,到了一定的页面深度后,透明度降低,页面滚动效果平滑,简单实用。动图效果:插件演示插件下载链接:http://pan.baidu.com/s/1bWnqwA 密码:0qf...

jQuery插件推荐:三种菜单导航显示和隐藏的插件,平滑好用!

有时候希望随着滚动条的滚动,实现导航菜单平滑的显示或者隐藏,这里推荐一个插件,可以实现三种菜单导航的显示和隐藏效果,实践用下来发现很棒,关键是运动非常平滑,可以实现三种不同的方式,几乎可以满足不同网站的需求。效果如图:插件演示   插件下载:链接:http://pan.baidu...

CSS3第二课:与家庭伦理有关的组合选择器

在CSS2时代,组合选择器中用的最多的是后代选择器,比如#nav li a等。因为这是CSS1版本就有的,IE6都毫无压力地支持。可是,在CSS2中新增的子元素选择器等,IE6就支持不友好了。不过,现在新版本的浏览器几乎都支持这些选择器了。一、组合选择器选择器举例含义版本element e...

CSS3第一课:被IE耽搁了的属性选择器

CSS2系列的教程已经更新完毕很久了,今天终于开始了CSS3系列教程的更新,貌似又是一个漫长的过程!还没有看完CSS2系列教程的童鞋麻烦先学习一遍哦,知识都是有体系的,基础没有打好,后面的内容会更吃力。既然是系列教程,那还是要按照体系来,先把最基础的选择器讲完。CSS3新增了很多很棒的选择器,其中属...

jquery插件推荐:有多种过渡效果的幻灯片vmc slider插件

网站设计中有一个常用的效果就是幻灯片图片展示,各种各样的插件中我推荐一个兼容性好的效果也棒呆的幻灯片。Vmc Slider 是一款带多种过渡特效的jQuery幻灯片插件,该幻灯片内置了20种场景转换特效,可以帮助你轻松实现漂亮的图片切换效果。并且它支持包括IE6在内的多种浏览器,非常的实用。效果演示...

设计时不知道用什么字体?那是因为你不懂字体的情感!

记得小时候,每天放学做完作业都要写几篇字帖,每次写完后拿给父亲检查。父亲写得一手好的钢笔和毛笔字,很多人看了,都说可以算半个书法家,可惜我自己在练字的道路上没有坚持下去。偶尔翻出父亲留下的一本很古老的字帖,仍然感叹怎么有人能写出那么漂亮的字体。不同的字体有不同的风骨,也体现出该字体独特的情感。如果我...

网页文字字体大小,在固定像素px和相对倍数em之间如何自由切换?附一个神器!

以前固定宽度布局的时候,几乎都是固定像素,宽度固定,间距固定,文字大小更是固定像素。可在流布局和响应式布局的催化下,固定宽度,固定大小的布局已经不能满足我们多元化的显示设备,pc端,平板端,手机端,各种尺寸的设备,如果都要重新做一个网页的话,我觉得那不是我们前端人的工作态度,毕竟学会如何偷懒是人的共...

UI学习第十课:蒙版,不破坏原始素材合成图像的武器!

很多新手感觉蒙版有点难于理解,其实,蒙版也是一种选区,可以让你选择性的看被蒙版挡住的对象。一、蒙版上面只有黑白灰非彩色被黑色挡住的对象完全看不见,被白色挡住的对象完全可见,被灰色挡住的对象,根据灰色的深浅呈现不同的般透明度。1、创建蒙版选择某个图层,点击蒙版按钮,默认产生一个白色的蒙版遮挡在图像上面...

UI学习第九课:图层样式,绝对的利器!

如果学习了矢量形状工具,绘制出线性图标也很漂亮的话,或者扁平风格的图标也很潮流,但是如果想获得真实拟物的图标,绝对离不开图层样式。图层样式用好了,可以打造出超级真实的图标。虽然拟物化的潮流已经过去好久,扁平风格正是铁板烧上的鱿鱼,热得发烫,不过轻拟物化的风格还是很受欢迎的。这是典型的拟物图标↓是不是...

UI学习第八课:矢量形状工具(附漂亮的线性图标源文件下载)

对于UI来说,在很大一部分时间被人认为是画图标的,虽然这种说话太局限性,但是也可以看出绘制图标对于UI的重要性。图标的绘制主要使用的工具就是矢量形状工具,当然包括钢笔工具以及基础形状工具。除了万能的钢笔工具之外,矢量形状工具主要指的是:矩形工具圆角矩形工具椭圆工具多边形工具直线工具自定形状工具这些工...

UI学习第七课:钢笔(附很棒的练习游戏网站)

钢笔工具比起其他选区工具和矢量绘图工具来说,具有一定的难度。钢笔可以绘制直线和曲线,尤其是绘制流畅的曲线。首先明白什么是贝塞尔曲线。在使用钢笔工具之前一定要打开“橡皮带”,可以预览曲线。1、曲线是由节点、方向线、方向点构成的。节点控制线段的位置和长短,方向线控制曲线的形状,方向点控制方向线的位置。2...

UI学习第六课:画笔

其实,我以为:画笔完全可以取代大部分选区工具的使用。因为ps是图像合成处理软件,而画笔就是合成最最重要的工具。想想我们处理青春痘的时候,污点修复画笔工具多么得心应手。再配合历史记录画笔,磨皮大法用起来也毫不费劲。当然,仿制图章工具几乎不用了。想想我上大学的时候,ps老师用仿制图章工具复制了一个小黄鸭...

UI学习第五课:图层模式

ps中的很多工具都可以使用图层模式,而图层模式又是很多同学搞不清楚的。其实,我们要掌握它的规律,不管是哪种工具使用图层模式,原理都是一样一样的。图层模式分为6大块。第一块的正常就是什么效果都没有。溶解需要透明度的配合。透明度越低,溶解效果越明显。第二个模块是变暗模式,就是说这个模块里面的五个命令都会...

喜欢一个字体,但是不知道是什么字体怎么办?

做设计的时候常常遇到这样的问题,看到别人的设计效果图上的字体很漂亮,好想用,但是不知道是什么字体?于是跑去设计师群里问大神,“求大神,这是个什么字体?”于是,得到这样一张图片。今天就教大家一个小技巧,如果用求字体网找字体,而不是去求人。1、每天扫图看别人的设计的时候,关注一下字体,看到好看的字体自己...

UI学习第四课:选区

选区作为基础的选取对象工具,主要有规则选区、不规则选区和魔棒等工具。有一个细节要注意,如果选区内没有像素,要变换选区则要使用“变化选区”的命令,如果选区内部有像素,则可以使用“自由变换(ctrl+T)”的命令。1、使用了“自由变换”或者“变换选区”命令后,再右键单击,就可以出现变换面板,主要包含“自...

UI学习第三课:初识ps

学习了素描中基本的点线面、三大面、五大调子、透视等基础后,开始进入ps的学习。一、ps的模块1、菜单栏菜单分为公共菜单和私有菜单。比如“文件”、“编辑”、“窗口”、“帮助”等菜单是绝大部分软件都有的,如果有学习过别的软件的基础,这几个菜单应该很好掌握。文件菜单主要负责“新建”、“打开”、“保存”、“...

UI学习第二课:透视

如果想让自己画的画不变形,看起来不别扭,就需要掌握一点透视的基础。一、透视的常用术语视平线:就是与画者的眼睛平行的水平线。心点:就是画者眼睛正对着的视平线上的一点。视点:就是画者眼睛的位置。视中线:就是视点与心点相连,与视平线成直角的线。消失点:就是与画面不平行的成角物体,在透视中伸远到视平线心点两...

UI学习第一课:素描之三大面五大调子的学习

UI1703直播班开班了,记录下整个班级的学习过程,也是为学生们做好笔记吧。3.2日开始第一课,每天一个下午,上午学生练习做作业。第一天的课程讲解素描的基本技法,主要就是握笔姿势、画线、三大面,五大调子的学习。一、握笔的姿势↓二、排线的姿势利用手腕和手臂的力量画线。但是也有人说,摆的是膀臂,不是手腕...

原来衬线字体和非衬线字体是这样区分的!

最近常看一些设计类的文章,其中关于字体的两个术语把我弄晕了:衬线字体和非衬线字体。于是百度了一下,终于搞明白了,如果你也有这样的疑惑,可以看看哦。先看看下面Google的logo图,有两种字体,你能分清楚哪个是衬线体,哪个是非衬线体吗?简单总结就是:衬线体的笔画在开始和结束处有额外的修饰,并且笔画横...
Top