现在是时候再次与我们的设计师和开发人员分享一些宝贵的资源。 让我们开始追逐。
在这一轮中,我们获得了一本免费的书,用于学习基本CSS , 用于单位转换的LESS和Sass 函数的集合,用于显示加载条的动画SVG等等。 如果您不熟悉我们的新资源,请在下面的链接中查看完整的系列。
Mapstylr是一个不错的免费网络应用程序,可让您自定义Google Maps 。 您可以使用非常漂亮的UI轻松创建自己的地图样式。 使用帐户,您可以将自定义的地图样式保存为私人收藏或公共收藏。 另外,您可能想查看我们之前有关如何设置Google Maps样式的教程。
![](https://i-blog.csdnimg.cn/blog_migrate/6adf08189189717dcc8a8a3cd07337f3.png)
您是否讨厌GIF动画来显示加载进度栏(在Hi-DPI屏幕中显示不佳)? 好了,您可以尝试使用此Loading集合 。 加载是使用SVG制作的进度条的集合。 在任何屏幕分辨率下,它们都将显得清晰锐利 。 在撰写本文时,它具有8种加载栏样式。
![](https://i-blog.csdnimg.cn/blog_migrate/f8ebeff9862335e3cc951a49c2769469.png)
Remixins是LESS mixins的集合,用于将px
转换为rem
,但对于不支持rem
浏览器,它将px
保留为后备。 rem
是相对于正文或文档字体大小的度量单位,与em
相似,除了rem 不继承令人讨厌的bug之外 ,在bug中该度量也根据父元素的字体大小进行计算。
请查看我们之前的文章CSS单位:像素,EM和百分比 ,以对此进行更深入的说明。
![](https://i-blog.csdnimg.cn/blog_migrate/23c0688ef430c0086f87f4a1ea05b2cc.png)
如果您正在使用Sass, Unitize可以是Remixins的绝佳替代品。 Unitize是Sass函数的集合,可轻松应用em
和rem
单位。 它包含三个函数unitize()
, rem()
和em()
,可以与需要测量单位的任何属性一起使用。
![](https://i-blog.csdnimg.cn/blog_migrate/00ed788261a805556e2b2bb1eceb844c.png)
Slick是一个很棒的简单jQuery滑块插件,可满足您在滑块中展示内容所需的一切。 完全响应,可滑动,可拖动(使用鼠标)以及CSS3动画和JavaScript后备功能,我们还需要什么? 都在那里。
![](https://i-blog.csdnimg.cn/blog_migrate/f85ced0cced323152fc787c148675d6c.png)
iHover是由CSS3变换和过渡组成的悬停效果的集合。 iHover可能是您学习动画制作方式的参考。 相比之下,CSS3的执行速度要快于JavaScript脚本制作的动画。 使用CSS3是建立未来网站的更好方法。
![](https://i-blog.csdnimg.cn/blog_migrate/80bfb893709a69425cd14df2ac61b8fd.png)
ShareDrop是一个免费的Web应用程序,可让您直接在设备之间共享文件 。 ShareDrop由WebRTC提供支持,WebRTC是一个开放项目,使Web浏览器能够相互通信。 它的工作原理(和外观)类似于Mac的AirDrop 。 您可以通过简单的拖放来共享文件,并且文件可以在同一网络IP内的多个移动设备或台式设备上使用(尽管由于Apple的某些限制,该功能在iOS中可能无法使用)。
![](https://i-blog.csdnimg.cn/blog_migrate/19166b9a58865b9fcc2aad0db211b542.png)
Magic of CSS是供Web设计人员学习CSS基础的免费在线书籍 。 该书当前包含6章:框,布局,表格,颜色,版式和过渡。 随着时间的推移,这本书将更新更多的章节。
![](https://i-blog.csdnimg.cn/blog_migrate/afa417d01221229aaf58b06f1a9cbc43.png)
让我们面对现实吧,无论我们对CSS的熟练程度如何, 调试网站布局都是一件容易的事。 它可能真的令人沮丧。 农药是可以减少Web开发人员这种普遍挫败感的工具。 农药将勾勒网站中所有元素的轮廓,以便您找出哪个元素出了问题并需要修复。
![](https://i-blog.csdnimg.cn/blog_migrate/7bb03863331da2a322884039822becf9.png)
Brick.im是一个开放项目, 将字体带入Web 。 与Google Web字体不同,Brick.im带来的字体无需任何修改或子设置。 因此,字体按原样显示。 尽管其中的字体集目前受到限制,但它仍然是Google Web字体的不错选择。
![](https://i-blog.csdnimg.cn/blog_migrate/a721f02e6b7c232acfb78b57581bd7cc.png)
翻译自: https://www.hongkiat.com/blog/fresh-resources-for-designers-and-developers-may-2014/