努力
也需要大家的支持!
CSS图书馆 » HTML & CSS »
赞助商链接

网页编辑器也美化,FiraCode 代码专用等宽字体

分类: HTML & CSS. 评论

最近在更新设计导航 HTML 代码时,发现有个样式总是加载不出来,经过细看发现竟然是因为用了中文的双引号导致,但因为网页代码编辑器西文和中文的双引号太相似所以忽略查找这个问题,如此初级的问题却浪费了不[……]

阅读全文 »

CSS border-radius 新玩法(含可视化生成工具)

分类: HTML & CSS. 评论

这个 CSS 属性对于前端人员一定不陌生,一直以来都把它当作矩形圆角使用,然而,对于喜欢创新的设计师来说,这是不够的,我们要最大化利用 border-radius,让它玩得更出色。

先来看看截图[……]

阅读全文 »

给网站添加百度地图代码,并可自定义定位坐标

分类: HTML & CSS. 评论

有一次给客户网站的联系我们页面添加一张标注有公司地址的百度地图,结果客户反馈说,为什么我的地图不能用鼠标拖动的啊?没想到现在客户要求这么高了,想偷懒一点也不行。经过几番折腾,发现添加百度地图API代码[……]

阅读全文 »

表单密码强度可视化设计

分类: HTML & CSS. 评论
表单密码强度可视化设计

在填写表单密码时,有的会会显示「弱、中、强」的文案来表示你填写的密码强度,这是一种不错的用户体验方式,然而今天我们分享一个更有趣的体验,就是用「可视化」来表达。

这个「可视化」方[……]

阅读全文 »

Tippy.js 玩转鼠标悬停提示信息

分类: HTML & CSS. 评论
tooltips 鼠标悬停提示效果

网页设计师对 tooltips 鼠标经过提示效果应该不陌生,这种效果虽然可以直接用 css hover 来实现,但是如果想更友好的、更美观的效果,可能就要借助 JS 来实现啦。今天和大家分享的 Tip[……]

阅读全文 »

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

分类: HTML & CSS. 评论
css device pixel ratio

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案直接做成 Web 版,模拟浏览器真实视觉效果,同时能自动识别是否为视网膜显示屏,[……]

阅读全文 »

小创意:圣诞球切换开关

分类: HTML & CSS. 评论

还有几天就到圣诞节,几乎到哪里都能看到圣诞气氛的设计,网站也是如此,为了让网站页面更有气氛,我们不能放过任何小创意,即使是一个小小的切换开关元素。

大家请看下图,这是来自 Chris Ganno[……]

阅读全文 »