• 动态
  • 专题
  • 公告
  • 任务
  • 签到
  • 摸鱼
文章
文章圈子快讯文档网址导航用户

{{userData.name}}已认证

文章

评论

关注

粉丝

¥{{role.user_data.money}}
{{role.user_data.credit}}
您已完成今天任务的
  • 私信列表所有往来私信

  • 财富管理余额、积分管理

  • 任务中心每日任务

    NEW
  • 小黑屋关进小黑屋的人

    NEW
  • 我的设置编辑个人资料

  • 进入后台管理

×
  • 精选分享
    • 网址类
      • Tampermonkey | 「油猴」超好用脚本推荐

        Tampermonkey | 「油猴」超好用脚本推荐

      • PT网站合集

        PT网站合集

      • Galaksion Advertising|收益堪比谷歌广告联盟的跳转广告联盟

        Galaksion Advertising|收益堪比谷歌广告联盟的跳转广告联盟

      • 谷歌镜像站大全

        谷歌镜像站大全

    • 插件类
      • BilibiliPotPlayer|在PotPlayer中播放B站视频/直播和音乐

        BilibiliPotPlayer|在PotPlayer中播放B站视频/直播和音乐

      • Tampermonkey | 「油猴」超好用脚本推荐

        Tampermonkey | 「油猴」超好用脚本推荐

      • 如何下载高清的Instagram图片或视频?

        如何下载高清的Instagram图片或视频?

      • 浏览器快捷搜索框,在线工具搜索引擎

        浏览器快捷搜索框,在线工具搜索引擎

    • 软件类
      • 最新版TikTok 抖音国际版解锁版下载 v37.1.4 去广告 免拔卡

        最新版TikTok 抖音国际版解锁版下载 v37.1.4 去广告 免拔卡

      • WPS电信定制版 v12.8.2.18205【自带 VBA\无广告】

        WPS电信定制版 v12.8.2.18205【自带 VBA\无广告】

      • 美图秀秀解锁+Wink解锁

        美图秀秀解锁+Wink解锁

      • 下载神器IDM 绿色版

        下载神器IDM 绿色版

    • 工具类
      • WPS电信定制版 v12.8.2.18205【自带 VBA\无广告】

        WPS电信定制版 v12.8.2.18205【自带 VBA\无广告】

      • BilibiliPotPlayer|在PotPlayer中播放B站视频/直播和音乐

        BilibiliPotPlayer|在PotPlayer中播放B站视频/直播和音乐

      • 美图秀秀解锁+Wink解锁

        美图秀秀解锁+Wink解锁

      • Open Chat Video Editor|开源的短视频生成和编辑工具

        Open Chat Video Editor|开源的短视频生成和编辑工具

    • 教程类
      • Open Chat Video Editor|开源的短视频生成和编辑工具

        Open Chat Video Editor|开源的短视频生成和编辑工具

      • 支付宝红包-长期有效

        支付宝红包-长期有效

      • Inpaint Anything插件AI实战

        Inpaint Anything插件AI实战

      • 李跳跳自定义规则

        李跳跳自定义规则

  • 每日发现热门
  • 资源Download
  • 圈子广场推荐
  • AI工具箱好玩
    • AI导航
  • 趣导航
    • 趣盘搜
  • …
    • 音乐下载
    • Emoji表情大全
    • 短链接
    • 投稿

CSS Peeper 专业智能CSS查看器

  • 工具类 插件类
  • 19年2月11日
  • 编辑
极客科技达人

今天为大家介绍一款浏览器插件—CSS Peeper ,有了这款chrome 插件,设计师可以不再需要挖掘代码,因为CSS Peeper可以非常方便的查看网页中的css样式。总结一句话就是让设计师专注于设计,并在代码中花费尽可能少的时间。
前段时间我们团队创建了名为CSS Peeper的 Chrome扩展程序,让设计师在工作中更加轻松。曾经我们时常想知道网站上的行高,字体或按钮大小是多少,现在我们为您提供满足您设计好奇心的终极工具。

下面你会看到一个关于这个工具是如何开发的简短故事,以及我们通过Chrome扩展程序为您提供有哪些功能。

目录

  • 1 背景故事
    • 1.1 满足设计师的期望
    • 1.2 选择要检查的项目
    • 1.3 下载素材
    • 1.4 到目前为止发生了什么
    • 1.5 我们需要您的意见!

背景故事

想象一下,您正在重新设计数字产品而没有风格指南可供参考。您可能要做的第一件事就是去产品网站检查设计系统和品牌的本质:颜色,排版,间距以及寻找特定的图像或图标。
你可能想要检查一些现有的CSS样式,获取调色板或下载一些可能有用的素材。问题是:如果不深入浏览器的代码检查器,您如何获得这些?
作为Chrome用户,我去寻找一个基本上可以为我解决这些问题的扩展。我发现了很多不同的插件:设计很差,只解决小问题,都不是以用户为中心。他们中的许多设计都没有注重细节和可用性问题。
事实上,这些插件都没有完全解决我的问题,也没有完美的解决方案。
基本上我无法找到符合我所有需求的Chrome扩展程序。我决定问其他设计师他们是否曾经找到类似的工具。令人惊讶的是,他们会用到非常多的扩展程序去解决当前的问题,这对设计师而言势必是很麻烦的一件事。

我一直希望为每位设计师提供类似瑞士军刀的扩展。这就是我们决定创建CSS Peeper的原因。

经过几个小时的搜索,我决定从零开始创造新的扩展工具。这个想法变成了一个名为CSS Peeper的项目。我已经向我的朋友JędrzejDadowski提出了这个设计概念,他是一位出色的前端开发人员,一切就绪,马上开工!

认识CSS Peeper

我们追求的目标很简单,它必须是一个不太复杂而方便的代码检查器,并且它能给我展示所有必要的样式。在这些需求的推动下,我为这款工具定义了需求清单:

  • 检查Web上可用的样式,而无需切换插件。
  • 快速浏览网站上使用的排版(字体系列,大小,行高等)。
  • 能够在不检查网站的情况下查看网站上的所有颜色。
  • 检查单个元素以获得大小,填充和样式效果,如阴影,悬停状态等。
  • 只需点击一下即可下载素材(pngs,svgs,jpgs等)。
  • 最佳用户体验的UI设计。
  • 以简单,组织良好和美观的方式提供所有信息。

就是这样子,上面所列的需求被转换为第一版CSS Peeper的所有功能。

满足设计师的期望

我想到的第一件事就是UI的简洁和美观。其实为设计师设计一款工具是一件非常困难的事情。我们必须要看到其他人没有看到的要素,并且界面留给别人的第一印象一定要深刻,使用起来非常愉悦而又完美无瑕。

选择要检查的项目

我们扩展工具的核心功能:当您启动它时,您可以单击网站上的不同对象,如按钮,标题,背景和您要检查的任何内容。

因此,您将获得所选对象的完整信息,并提供一些便于在Sketch或Photoshop中使用的参数属性。

CSS Peeper允许您检查网站上使用的所有颜色。您可以通过在几秒钟内就可以找到你所需要的颜色参数。

我们计划添加快速复制选项,并可以在不同的颜色值(如HSL或RGB)之间切换。如果您在使用过程看到更多改进的空间,请告诉我们,我们将实现这一目标!

下载素材

如果您曾尝试从代码中最深的嵌套中提取某些资源(如图像,svg图标等),那你一定会非常喜欢我们开发的下载资源功能。

CSS Peeper为您简化了繁琐的工作,您无需深入挖掘代码。因为我们提供逐个下载资源或将它们全部打包为.zip文件的功能。

到目前为止发生了什么

我们真的很高兴地宣布,自CSS Peeper推出以来,我们目前拥有超过16,000名用户!太棒了!除了这个数字,我们收集了数百条积极意见,并从我们的用户那里获得了一些非常有价值的反馈。下面你可以找到那段时间的一些有趣的图表。

2016年12月19日至2017年1月2日期间收集的数据

发布后差不多三天,关于CSS Peeper的消息传开了,我们在最受欢迎的设计博客中被推荐:

  • Muz.li by Invision
  • Land-book.com
  • Hey Designer
  • Designer News
  • Webdesigner News
  • CSS Tricks

我们受到了来自世界各地的数百名设计师的热烈欢迎。这是一种激励,并使我们有能力开发CSS Peeper……

我们需要您的意见!

目前我们已经提供了可以免费下载并使用产品,我们希望扩展工具可以满足用户需求。我们对这个小产品有自己的看法,但我们也想直接听取您的意见!

现在免费获取!

或者直接下载

我们真的很想从设计师自己那里听到更多,并了解他们对使用CSS Peeper的感受,以便我们可以设计以用户为中心的工具。您的所有建议和想法对我们来说都是非常宝贵的!
如果您有任何问题,建议或只是想表达您的支持 – 我们建议您发表评论或在Twitter或Facebook上找到我们。
如果你喜欢你所读的内容,别忘了点亮下面的小心!

相关文章:

  1. 匿名聊 | 在线匿名聊天服务汇总
  2. 免费可商用字体集合(二)
  3. Adobe Premiere Pro CC 2017 免安装破解版
  4. 10个简单技巧让你的Youtube视频排在首页

给TA打赏
共{{data.count}}人
人已打赏
工具插件软件
工具类插件类

网页上的夜间阅读模式NightEye

2019-1-30 19:45:01

工具类网址类

360查字体,如何查询字体版权

2019-3-13 22:23:24

猜你喜欢

匿名聊 | 在线匿名聊天服务汇总

20年3月18日24894.3k

免费可商用字体集合(二)

19年3月18日13.8k

Adobe Premiere Pro CC 2017 免安装破解版

19年6月24日25.1k

10个简单技巧让你的Youtube视频排在首页

19年3月31日12.6k
1 条回复 A文章作者 M管理员

您必须登录或注册以后才能发表评论

  1. 肃砼
    肃砼 小学lv1
    22年10月18日

文章

评论

关注

粉丝

{{userData.task+'%'}}

嗨!朋友

所有的伟大,都源于一个勇敢的开始

{{open.name}}登录
  • 公告:
没有公告
全部公告

  • 个圈友 • 个话题

没有圈子
所有圈子

快讯

  • 作者:
全部快讯

订阅与交流

  • TG订阅频道

    极客情报局-Geeker

  • TG交流群组

    极客神秘组织-Geeker Group

❯
个人中心
今日签到
有新私信 私信列表
搜索
客服
  • 扫码打开当前页

返回顶部
幸运之星正在降临...
点击领取今天的签到奖励!
恭喜!您今天获得了{{mission.data.mission.credit}}积分

今日签到

连续签到

  • {{item.credit}}
  • 连续{{item.count}}天
查看所有
我的优惠劵
  • ¥优惠劵
    使用时效:无法使用
    使用时效:

    之前

    使用时效:永久有效
    优惠劵ID:
    ×
    限制以下商品使用: 限制以下商品分类使用: 不限制使用:
    [{{ct.name}}]
    所有商品和商品类型均可使用
没有优惠劵可用!

购物车
  • ×
    删除
购物车空空如也!

清空购物车 前往结算
您有新的私信
没有新私信
写新私信 查看全部
简体中文 | 繁体中文
Copyright © 2025 Geeker
・鄂ICP备12345678号-1
查询 184 次,耗时 0.9946 秒
首页圈子快讯
搜索菜单我的