前端开发者学堂 - fedev.cn
  • 首页
  • 视频专栏
    新
  • 会员专栏
  • CSS
  • JavaScript
  • Mobile
  • SVG
  • 标签云
    #css3#button#gradient#box-shadow#:before&:after#藤藤每日一练
    发布于13 年前

    藤藤每日一练——CSS3 Chunky Button Pack

    这是一个CSS3使用gradient、box-shadow制作的按钮集合,在w3cplus有关于按钮方面的实例不少,随便搜索css3 button就会有大把相关介绍。今天老调重谈,还是使用按钮的制作,不过这里想给大家呈现的一种思想是,只要你敢想,就有实现的方法,在这里一共展示了15种不同颜色的按钮,而且在":hover"和“:active”下都有不同的效果。制作方法是一样,但配色,特别是gradient实现渐变色还是需要一定的功底的,不信你就试试吧,我可是信了,因为我也做不到。(^_^)

    作者:藤藤
    阅读全文
    #css3#gradient#box-shadow#提高篇#藤藤每日一练#:before&:after
    发布于13 年前

    藤藤每日一练——CSS3制作Freebie标签

    这个案例主要使用css3来制作标签,不过使用的的属性还是常见的那几种,可是要实现还是有一定的难度。其中最有亮点的是使用css3来实现斜线背景以及方格背景,然后就是使用@font-face来制作icon图标。原理简单,重要的是思路,以及这两种背景实现的细节。感兴趣的同学直接看源码。

    作者:藤藤
    阅读全文
    #css3#transfrom#transition#box-shadow#:before&:after
    发布于13 年前

    CSS3重构百度图片首页中图片展示效果

    今天使用百度图片搜索图片时,无意之中看到首页的图片展示效果具有旋转、阴影等效果。好奇之下查看其源码,使用了一些CSS3属性制作,但不知道出与什么原因,在制作这个效果中并不什么完美(我个人认为),于是动手自己整了一个,放上来与大家分享,希望大家喜欢

    作者:大漠
    阅读全文
    #css3#gradient#box-shadow#高级篇#藤藤每日一练
    发布于13 年前

    藤藤每日一练——CSS3制作Twitter信息框

    今天与大家分享一款使用CSS3制作的Twitter信息分享框。在这个DEMO中,使用的CSS3属性还是那么几个,css3的渐变gradient,盒子阴影box-shadow,css3的选择器等,不过在这个案例中两个特色之处,一个是使用了":before"配合gradient制作了内凹圆角效果,类似于chrome浏览器上的tabs效果,这个效果可有点难度(思路来自于Tabs with Round Out Borders),还有一个亮点就是使用gradient制作了渐变的线条。想一探究竟的同学,看下面的代码吧。

    作者:藤藤
    阅读全文
    #css3#box-shadow#gradient#Form#藤藤每日一练
    发布于13 年前

    藤藤每日一练——CSS3制作3D表单

    藤藤今天给大家带来一款使用CSS3制作的3D立体表单效果。在这个案例中主要使用了CSS3的渐变制作了body的背景;使用box-shadow制作的3D立体input框和3D立体按钮;使用@font-face制作的icon图标。

    作者:藤藤
    阅读全文
    #css3#Menu/Navigation#box-shadow#gradient#:before&:after#提高篇
    发布于13 年前

    CSS3制作立体导航

    首先非常感谢verycd的@不点同学提供案例。这个案例是使用CSS3制作的一个多颜色3D立体导航。在这个案例中有两个关键之处,其一使用box-shadow制作导航立体效果,其二使用gradient配合:before选择器制作导航项之间的分隔线。详细请参阅代码。
    作者:大漠
    阅读全文
    #css3#Menu/Navigation#gradient#box-shadow#animation#提高篇
    发布于13 年前

    CSS3制作卷角菜单

    这个案例是由@猫仔同学提供的。最大的亮点就是使用了CSS3制作了卷边效果,配上js的移动效果,真是与众不同。在这个demo中主要运用了border-radius制作卷边效果,使用gradient实现了导航的渐变效果,而且还使用了border绘制了向上的箭头,同时给箭头配上了一个css3的动画效果。真的不错哟。
    作者:大漠
    阅读全文
    #css3#Form#gradient#@font-face#box-shadow#入门级
    发布于13 年前

    CSS3制作登录表单

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

    作者:大漠
    阅读全文
    #css3#gradient#:before&:after#藤藤每日一练#Form#提高篇
    发布于13 年前

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

    今天藤藤给大家带来的是一个CSS3制作的登录表单效果,这个效果有两上亮点,第一是渐变制作内凹圆角效果,第二个就是渐变制作花边效果。可以说这两个效果的实现都有一定的难度,如果你对css3的渐变属性gradient和CSS3的多背景不了解的话,你是无法实现的。如果你对这个效果感兴趣,那就自己动手一试吧。
    作者:大漠
    阅读全文
    #css3#gradient#border-radius#藤藤每日一练#入门级
    发布于13 年前

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

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

9/22

下一页

©前端圈™ 2026. All Rights Reserved.粤ICP备15067035号-8