SEE Conf 2021!  支付宝体验科技大会

入门级

CSS3制作登录表单

CSS3制作登录表单

站上已经放了多个CSS3制作的表单效果了,但为增强大家的视野,继续跟大家分享一个CSS3制作的登录表单。这个案例其实很简单,主要使用box-shadow做了分层纸张效果,使用gradient制作渐变按钮效果,然后就是@font-face制作的icon效果。其实这些理论方面的知识在站上都能找到,如果你是第一次接触这些,不仿试着查找一下。

藤藤每日一练——CSS3制作价格标牌

藤藤每日一练——CSS3制作价格标牌
今天藤藤给大家带来一个使用CSS3制作价格标牌的例子,这个例子相对来比较简单,最主要的关键点是如何使用border-radius来制作圆形的效果。同时这个例子中还运用了CSS3的渐变,阴影。

藤藤每日一练——CSS3制作登录表单

藤藤每日一练——CSS3制作登录表单
W3cplus从今天刚开推出藤藤练习的CSS3系列。出这个系列主要是为了让同样有着CSS3兴趣的同学更有动力,在这个系列中都是由W3cplus美女成员藤藤每天根据国外搜集的有关psd设计图,然后将设计图通过css3的代码转换成DEMO案例。一是为了自己提高,二是与其他有同样爱好的同学一起分享。如果你喜欢,那就持续关注w3cplus的有关更新。

CSS3制作下拉菜单

CSS3制作下拉菜单
导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3制作的下拉菜单。在这个导航中主要两点,一个是渐变运用,另一个就是box-shodow制作的立体效果。

CSS3制作日历备忘录

CSS3制作日历备忘录
在发这个案例前,首先非常感谢藤藤加入w3cplus,今天开始w3cplus又多了一员猛将,我们会继续为大家制作一些实际可用的CSS3案例,帮助喜欢CSS3的同学一起学习和成长。今天这个案例就是藤藤(本来是要用藤藤的名发布,但由于我们设置还出了问题,所以先放上来让大家看看效果吧)制作的,将两张psd图转换到一个CSS3案例中。在这个案例中主要使用了:CSS3渐变制作日期的头部渐变效果;使用box-shadow制作了多层纸张的效果。

css3复选框

css3复选框
本实例主要应用了checkbox的:checked状态来设置其同级后面的label元素的样式及:before&:after生成的内容。所以我们看到的样式其实不是checkbox的,而是其同级后面的label元素的。

CSS3 Loading Bar

CSS3 Loading Bar
CSS3制作一个类似于文件Loading的效果,在这里没有写动画效果,主要考虑文件加载对应的文本,css实现效果会有难度。在这个DEMO中主要运用了四个知识点:第一是google font api,用来制作特殊的英文字体效果;第二个是使用CSS的渐变,制作了渐变的面板效果;第三使用box-shadow,制作面板之类的描边效果;第四就是使用border-radius制作圆角效果。

CSS3制作凤凰网导航

CSS3制作凤凰网导航
今天在群讨论一个导航制作(凤凰网娱乐),看过同学发来的gif动画图,想将此图转画为CSS3导航,动手试了一下,还是可以实现的。在这个实例中中要运用了以下知识点:box-shadow,CSS制作图形,旋转,动画。感兴趣的同学可以来围观。

CSS3 Menu

CSS3 Nav Menu
导航是WEB页面中不可或缺的一部分,以前制作渐变、圆角类型的导航,都需要使用背景图片来制作,今天给大家介绍一个使用CSS3制作的导航效果,在这个实例中主要运用了CSS3的渐变和box-shadow。

CSS3制作3D立体分页导航

CSS3制作3D立体分页导航
收集了很多DEMO和相关的PSD,于是想能不能通过自己学的CSS3相关技巧,将有关PSD图效果转换成CSS3效果。灵光的冲动,让我开始做起了这件事情,今天开始我会开始制作一些CSS3的DEMO效果,而这些DEMO效果都是由对应的PSD转换过来的,换句话说,如果你不考虑兼容IE低版本的话,这些DEMO你都可以使用。那我们开始吧

页面

返回顶部