藤藤每日一练

藤藤每日一练——Pure CSS3 Animation Menu

藤藤每日一练——Pure CSS3 Animation Menu

这个效果是没有任何设计图,也没有任何参照样版,藤藤从设计到效果一线完成。使用了CSS3的animation、transform、transition制作了一个动画导航效果,其中利用了Ligature Icon UI制作了导航中的ICON图标。当然还使用了CSS3的其他属性,比如说圆角属性制作了一个圆形,使用opacity控制菜单的动效果效果,最明显的效果是鼠标悬浮时会放大当前菜单项,怎么实现的,你知道?我想你知道的,要是不知道就继续往下看吧。

藤藤每日一练——Ligature Icon UI

藤藤每日一练——Ligature Icon UI

大家好久没有看到藤藤的每日一练了吧,会不会觉得少了什么?难道藤藤同学不写案例了吗?不是的,因为最近我和藤藤一起在整理ICON UI的库,希望这些UI的库能帮助大家解决一些ICON的制作时间,做到拿来就可以用。这些ICON UI我们都是使用字体来制作的,用到的就是CSS3的@font-face属性,制作方法简单。只是类名和实体符的对应,大家可以查对应的类名。您只需要把鼠标悬浮在每个ICON上就能得到相应的类名和实体符。今天要给大家展示的是Kazuyuki Motoyama的Ligature Symbols,希望大家喜欢。

藤藤每日一练——CSS3 Ribbon Menu

CSS3 Ribbon Menu

这个效果是一个类似于彩带的导航菜单效果,整个效果之中,使用的方法都比较简单,关键之处就是如何实现导航菜单两边折角的效果。常用的方法就是“:after”和“:before”生成折角部分,如果你以前从没接触过这种彩带效果制作,不仿先看看《Pure CSS3 Ribbons》以及《CSS3 Ribbons》、《CSS制作图形速查表》、《纯CSS制作的图形效果》几篇教程,能更好的帮助你学习这个案例的制作原理与方法。不过本案例中有一个最不好的地方,就是定死了菜单项的宽度,不能做到收缩自如,所以您要是有兴趣可以在此基础上进行改良。与我们分享。

藤藤每日一练——CSS3制作购物车下拉列表

CSS3制作购物车下拉列表

这个案例主要展示的是使用CSS3实现一个购物车清单下拉列表的效果,在整个效果制作过程中没有过多的技术难题,主要一点是使用什么方法来实现下拉列表的隐藏与显示效果,在本例中还是通过max-height来实现的,至于其他的效果,我想大家要是一路跟着藤藤走下来了的话都非常熟悉了,如果你没有跟着练习也不用害怕,这些效果无外呼包括了gradient制作渐变、box-shadow制作阴影,@font-face实现icon等等。

藤藤每日一练——CSS3 Dropdown Menu

CSS3 Dropdown Menu

这是一个纯CSS3制作的工具提示下拉菜单,当你鼠标悬浮在工具条上时,会自动的向下弹出下拉菜单项。整个工具条是通过@font-face来制作的icon,并使用了gradient给每个下拉菜单块制作了一个不同的渐变色,而下拉菜单的隐藏和显示并不是按照我们传统的制作方法,此处是控制下拉菜单的高度来实现显示与隐藏的效果。当你加载页面时,整个下拉菜单的高度为0,但当你的鼠标悬浮在对应的工具图标上时,此时下拉菜单的高度为180px,当然这个值是一个固定例的值,要完美一点的方法最好不要控制死他的高度,具体如何实现,大家自己想想,前面有讲过这样的案例哟。(^_^)。

藤藤每日一练——Google Plus Tip Buttons

Google Plus Tip Buttons

很早以前在Google Plus UI Button制作一文中详细介绍了Google Plus的UI按钮制作方法以及相关代码,今天藤藤特意将其中tip的提示按钮UI制作方法单独拿出来培析,与大家分享,希望大家喜欢这套由@font-face制作的TIP按钮库。

藤藤每日一练——Pure CSS3 3D Buttons

Pure CSS3 3D Buttons

今天的案例是个老案例,使用CSS3代码来制作3D按钮效果,w3cplus有关于buttons的介绍已经很多,如果你没有看过,不仿点击这里。今天藤藤给大家带来的还是一个系列的3D按钮制作效果,制作方法是老套(万变不离其中),但其中色彩的调各让我很折服,因为很多效果在ps中制作是容易,特别对于设计师来说更容易,但对于一名coder来说,还是有点困难,具体请看制作的代码,让代码来展现所有的一切。我想您和我一样会为这样的效果折服,至少我已膜拜藤藤以css3的了解,以及其对制作过程中的细节的追求。

藤藤每日一练——Pure CSS3 Checkbox

Pure CSS3 Checkbox

这个案例是使用了CSS3制作了六种不同风格的checkbox效果。表单的checkbox自定义效果,在webkit内核下,我们可以随心所意的进行自定义样式的美化,但在其他浏览器下还是有些麻烦,早期使用jQuery插件或者别的JavaScript脚本代码来实现,今天的CSS3属性能让你解决这个难题。当然你要知道制作的思路,不然还是有难度的。在整个效果中,最关键的是标签的配合以及":before"和“:after”等CSS3选择器的应用,特别声明一下,由于input的伪类选择器在部分浏览器下还不支持,所以需要添加一些标签来辅助实现":before"这样的伪类选择器的效果,详细的请看藤藤是怎么制作的吧。

藤藤每日一练——Social Media Buttons

Social Media Buttons

这个案例是使用CSS3制作的一个媒体分享圆形按钮。效果看起来很简单,其实制作也非常的简单的,主要就是径向渐变的运用,以及@font-face实现的ICON效果,当然其中也离开不其他属性的点缀效果,比如说box-shadow制作的阴影,transition制作的动画效果等。

藤藤每日一练——Pure CSS3 Select

藤藤每日一练——Pure CSS3 Select

表单元素向来是前端人员最为头痛的一件事情,众说周知,表单元素的兼容性是最为难处理的,而且想制作一个美丽好看的表单元件,都需要依赖于脚本来实现自定义。其实我们抛开低版本的浏览器,使用CSS3来美化还是可以的,她不需要依赖任何脚本代码,能将表单的元件美化的很靓丽。今天就给大家推荐一个纯CSS3美化的表单中的下拉选择框(select)的效果。这个效果很简单,使用渐变制作了表单select的背景色,同时使用label标签的伪元素“:after”来制作向右的三角。其中最为有特色的是,使用渐变制作了一个美丽的背景方格效果,详细的请看代码。

页面

返回顶部