Web前端开发网

fly63.com

首页 资源 工具 文章 教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下

关闭

搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

资源分类

AI智能 酷站推荐 招聘/兼职 框架/库 模块/管理 移动端UI框架 Web-UI框架 Js插件 Jquery插件 CSS相关 IDE环境 在线工具 图形动效 游戏框架 node相关 调试/测试 在线学习 社区/论坛 博客/团队 前端素材 图标/图库 建站资源 设计/灵感 IT资讯
提交资源 / 链接反馈

CSSPeeper
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://csspeeper.com/
网站描述:可视化CSS样式辅助工具
访问官网

“cssPeeper”是还一个基于浏览器端的CSS样式分析扩展插件,如果你是设计师、需要时常去浏览其他网站的话,应该会觉得它几乎为你量身打造,想要分析目标网站的CSS代码,仅仅用谷歌开发模式是不够的,因此有了这款插件你会如虎添翼。 


CSSPeeper使用方法:

浏览器上安装插件以后,开启CSS Peeper的Google Chrome扩充功能页面,点选右上角「加到Chrome」按钮免费下载安装,安装后浏览器右上角会出现CSS Peeper按钮,点选就能使用。点选CSSPeeper 后会开启网站图示、标题和内文字型、CSS 档案大小和载入时间,点选下方按钮可切换至不同功能。

CSSPeeper让使用者以简单、有组织性、更漂亮方式去检查网站样式和各种元件,例如以视觉化方式快速列出网站的配色、查看各部分使用的字型、字体大小、行高、对齐方向和颜色,还能快速汇出页面中的所有图片。

最后CSSPeeper 还有一个查看网页中所有图片的功能,能在下拉功能中显示所有网页图片,将游标移动到缩图会显示图片档名和尺寸,也能单独汇出或一次汇出。

当你在CSSPeeper 开启情况下点选网页中的文字、链结、栏位或按钮,就会侦测出该元件的样式名称、长宽、字型、字体大小、行高、对齐方向及颜色等资讯,对于想知道网页中某个元件的属性非常方便。

CSSPeeper 在操作上跟Fontface Ninja 感觉很类似,不过可以查看各元件的「Inspector」功能非常实用!只要在开启CSSPeeper 情况下去点击网页内的元件,就能以可视化方式浏览它各项资讯与设定值,相较于Google Chrome 内建的Inspector 来说会更直觉。 

仅供个人学习参考/导航指引使用,具体请以第三方网站说明为准,本站不提供任何专业建议。如果地址失效或描述有误,请联系站长反馈~感谢您的理解与支持!

链接: https://fly63.com/nav/565

more>>
相关栏目
sass
成熟、稳定和强大的CSS扩展语言
官网 GitHub
postcss
PostCSS是一个使用JavaScript插件来转换CSS的工具。
官网 GitHub
stylus
Stylus是一个高效、动态以及丰富的CSS预处理器
官网 GitHub
animate.css
齐全的CSS3动画库
官网 GitHub
Metro UI
基于平板界面设计CSS库是一种界面展示技术
官网 GitHub
Spectre.css
轻量响应式 CSS 框架
官网 GitHub
water.css
只需添加CSS框架即可应用样式,无需定义元素类
官网 GitHub
DropCSS
一个用来清理无用 CSS 的小工具
点击进入 GitHub
Pattern.css
一个CSS库,使用美丽的图案填充空的背景。
官网 GitHub
three-dots
一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成
官网 GitHub
CSSeffectsSnippets
提供了漂亮的CSS动画
官网 GitHub
Angrytools
多样定制,实用,支持单个动画代码复制的网站
官网
magic
带多种动画效果的CSS3动画库
官网 GitHub
topcoat
一款为简洁高速Web应用提供CSS开发的工具
官网 GitHub
Biomatic UI
简单,灵活的CSS框架
官网 GitHub
css-animation-101
从零开始介绍 CSS 动画开源电子书
官网 GitHub
首页 技术导航 在线工具 技术文章 教程资源 AI工具集 前端库/框架 实用工具箱

Copyright © 2018 Web前端开发网提供免费在线工具、编程学习资源(教程/框架/库),内容以学习参考为主。All Rights Reserved. 网站备案号:蜀ICP备13022973号

手机预览