V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
disinfeqt
V2EX  ›  分享创造

Mad Button

  •  
  •   disinfeqt · 2010-07-29 01:02:19 +08:00 · 4938 次点击
    这是一个创建于 5214 天前的主题,其中的信息可能已经有所发展或是发生改变。
    Inspired by Rogie on Dribbble.
    Pure CSS3 w/o image.
    Totally hover-able & clickable, actually I can't stop myself from clicking it since I made it.

    http://zdx.in/1rvU5t
    http://zdx.in/1rvYd6

    lol
    36 条回复    1970-01-01 08:00:00 +08:00
    lianghai
        2
    lianghai  
       2010-07-29 01:09:00 +08:00
    哈,好可爱!只是感觉按下去之后的边框有点杂乱了,失去了原来状态下的平滑和锐利。
    disinfeqt
        3
    disinfeqt  
    OP
       2010-07-29 01:10:48 +08:00
    @lianghai 嗯 我只是截了一张图放到PSD里先模仿出来,以后会根据自己的理解和用途改进的。还好,一切都是CSS。
    lianghai
        4
    lianghai  
       2010-07-29 01:25:40 +08:00
    @disinfeqt 从这里? http://dribbble.com/shots/33550-Mad-Elements
    虽然视角实在有点过于特别了,但还是觉得很好看——那个下拉列表的设计很不错。
    lianghai
        5
    lianghai  
       2010-07-29 01:32:50 +08:00
    Dribbble 太可爱了!我刚刚才开始了解这个网站。400×300px 的限制就像 Twitter 的字数限制;月初恢复可用的展示额度很有意思。嗯,比 deviantART 更适合我。
    Sai
        6
    Sai  
       2010-07-29 03:04:38 +08:00
    稍稍尝试了一下
    http://img.ly/1MlE
    disinfeqt
        7
    disinfeqt  
    OP
       2010-07-29 13:44:50 +08:00
    @Sai Neat. 不妨做居中?
    disinfeqt
        8
    disinfeqt  
    OP
       2010-07-29 13:45:08 +08:00
    @Sai text-align: left; 擦...
    Sai
        9
    Sai  
       2010-07-29 13:47:33 +08:00
    话说这个btn样式可以把mobile safari里面那个巨丑的默认样式覆盖掉
    disinfeqt
        10
    disinfeqt  
    OP
       2010-07-29 13:59:44 +08:00
    @Sai 你是用什么做的?图?
    Sai
        11
    Sai  
       2010-07-29 14:02:17 +08:00
    @disinfeqt Pure CSS…… 详见这个登录按钮 http://bgm.tv/login
    disinfeqt
        12
    disinfeqt  
    OP
       2010-07-29 14:19:38 +08:00
    Now transforming buttons into anchors...
    我才发现,用 a 来做要比 button 简单几百倍... 而 button 的实用性实在不高。
    disinfeqt
        13
    disinfeqt  
    OP
       2010-07-29 14:20:50 +08:00
    @Sai 质感不给力啊,点击更不给力呀... 老湿...
    Sai
        14
    Sai  
       2010-07-29 14:25:21 +08:00
    @disinfeqt
    其实我做出了Mad Elements里面的质感,但是和网站风格太不搭调。

    (你把
    box shadow的0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 -1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 #0F3E75, 0 0 2px rgba(0, 0, 0, 0.5)
    改成
    0 1px 1px rgba(255, 255, 255, 0.4) inset, 0 -1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 0 #0F3E75, 0 0 2px rgba(0, 0, 0, 0.5)
    就是那种质感了

    用a的话submit让移动设备情何以堪
    disinfeqt
        15
    disinfeqt  
    OP
       2010-07-29 14:29:31 +08:00
    @Sai 囧 我直接用 0 3px 20px #333 inset,方便以后多种颜色。
    disinfeqt
        16
    disinfeqt  
    OP
       2010-07-29 14:37:02 +08:00
    哈哈,改进了 http://grab.by/5DVa
    不知道各位能联想到什么?对!一会儿就来~ XD
    Livid
        17
    Livid  
    MOD
       2010-07-29 14:38:17 +08:00
    好,期待看到。
    disinfeqt
        18
    disinfeqt  
    OP
       2010-07-29 14:39:46 +08:00
    身为一个按钮,如果没有 http://www.zdxia.com/lab/text-selection.html 的话,鸭梨是很大的。
    lianghai
        19
    lianghai  
       2010-07-29 14:43:59 +08:00
    想到了 Mac 的键盘……
    dimlau
        20
    dimlau  
       2010-07-29 15:10:07 +08:00
    其实纯CSS的不见得有多好,从需求出发,一个按钮图片才多大?
    纯CSS却(一般)要加很多不必要的盒子进去。

    ⋯⋯好吧,我承认我blog里的RSS图标也是用纯CSS做的。
    disinfeqt
        21
    disinfeqt  
    OP
       2010-07-29 15:52:11 +08:00
    @dimlau NO redundant boxes outside / inside.
    就是不喜欢用图片,实在是不够酷。
    dimlau
        22
    dimlau  
       2010-07-29 16:02:49 +08:00
    呃⋯⋯

    我的RSS标(思路从一国外大牛那里顺来的,修改了CSS),结构:
    <aside class="rss"><a href="atom.xml" title="订阅更新">RSS<q class="dot"></q><q class="inside ring"></q><q class="outside ring"></q></a></aside>

    CSS更是一大陀。酷到挺酷的,但是本来可以:

    <a href="atom.xml" title="订阅更新">RSS</a>

    CSS一句background搞定。

    明显纯CSS不够简洁。

    当然,你说的“就是不喜欢用图片”,理由也挺充分的,我RSS图标不用图片的理由也差不多——界面里如果能不用就不用图片。
    Sai
        23
    Sai  
       2010-07-29 16:25:39 +08:00
    这个还是需要取舍的,我们在研究这个不需要额外的box,而画feed ico需要这么多不必要的box,对IE用户也不友好。
    disinfeqt
        24
    disinfeqt  
    OP
       2010-07-29 16:30:47 +08:00
    用CSS来画图是很蛋疼的行为,完全没有实用价值,我从来不用。
    但是如果在一个 element 里展现出往往需要多个 elements 配合才能完成的效果,那是值得研究的,这就是为什么我花了一下下午的时间来摆弄这些玩意儿。
    disinfeqt
        25
    disinfeqt  
    OP
       2010-07-29 16:32:59 +08:00
    @Sai 那个登录按钮,三点改进意见:
    1. cursor: pointer
    2. outline: none
    3. hover 不要去掉阴影,active 时去掉

    :)
    Sai
        26
    Sai  
       2010-07-29 16:39:41 +08:00
    @disinfeqt
    outline: none 这个我之前试了,竟然无效=。=
    disinfeqt
        27
    disinfeqt  
    OP
       2010-07-29 16:41:14 +08:00
    http://grab.by/5DYO
    针对IE的 hack... 纯测试,代码未整理...
    brando
        28
    brando  
       2010-07-29 16:43:14 +08:00
    据我所知,小Sai同学做的页面基本上都很让我惊艳,多年前就是了,而且是个很了不得的人。重点是,年龄他还很小噢,很可爱...XD...LOOOOL
    lianghai
        29
    lianghai  
       2010-07-29 16:46:47 +08:00
    @brando 求继续爆料!可以发在 http://v2ex.appspot.com/t/869 里面 XD
    Sai
        30
    Sai  
       2010-07-29 16:52:05 +08:00
    @disinfeqt
    改进了,outline依然无解
    disinfeqt
        31
    disinfeqt  
    OP
       2010-07-29 16:54:22 +08:00
    @Sai 哦 没看到你说无解,加一个 ::-moz-focus-inner{border:none;padding:0;}
    disinfeqt
        32
    disinfeqt  
    OP
       2010-07-29 16:55:09 +08:00
    还有,在元素内加一个 -moz-outline-style:none;
    Sai
        33
    Sai  
       2010-07-29 17:03:32 +08:00
    @disinfeqt
    thx,it's works
    disinfeqt
        34
    disinfeqt  
    OP
       2010-07-29 17:12:51 +08:00
    @Sai ur welcome. btw, "it works"...

    =__________________=
    Sai
        35
    Sai  
       2010-07-29 17:15:18 +08:00
    @disinfeqt
    =。=师太师太,其实我还纠结了一下那个「点」和t的……
    disinfeqt
        36
    disinfeqt  
    OP
       2010-07-29 17:20:22 +08:00
    @Sai
    =___________________________________________________=
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5693 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 03:31 · PVG 11:31 · LAX 19:31 · JFK 22:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.