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

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

先来看看截图[……]

阅读全文 »

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

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

阅读全文 »

表单密码强度可视化设计

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

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

阅读全文 »

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

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

阅读全文 »

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

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

阅读全文 »

小创意：圣诞球切换开关

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

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

阅读全文 »

给网站增加交互音效 – Loud links轻量插件

想必大家玩过 APP 游戏，里面的按钮每点击一下都会有一个响声来回应你的点击状态，这是很不错的交互效果，若想在网页也能实现这样的交互声音，请看今天达人分享的 Lound links JS 插件，它可以[……]

阅读全文 »

Macy.js 网页流布局JS插件，仅4KB大小

花瓣网我想大家都知道了吧，它就是使用流布局来展示图片，这种排版方式特别适合展现大量图像的页面，如果你也想加入这种排版，可以试试今天分享给大家的 Macy.js 插件。

这款流布局JS插件仅有4K[……]

阅读全文 »