有许多新的出色工具和资源可以使Web设计师和开发人员在工作中发挥更大的作用。 这个月,我们提供了一些很棒的免费工具和资源,值得一试,从创建酷炫的照片效果的插件到具有真正酷炫过渡的内容和图像滑动插件。
因此,让我们检查一下。
响应式网页设计现在正成为创建网站的标准做法。 这使该工具对完成工作非常有帮助。 Proto基于SCSS构建,可通过提供准备使用的预定义CSS类,定义响应网格和某些特定于设备的类来快速构建响应式布局原型。
![原始](https://i-blog.csdnimg.cn/blog_migrate/a9d89dd623768b87bdd2c500f956b258.png)
如果您正在使用Bootstrap或Foundation之类的响应式设计框架,则可能需要此书签来跟踪浏览器中的网格。 该工具将在您正在查看的网页上显示一个覆盖网格。 这非常方便,只需将其拖放到“书签”栏中。 只需在需要显示网格时单击书签即可。
![网格显示](https://i-blog.csdnimg.cn/blog_migrate/d6a089f9ffd705d5b88dd40939b0ce07.png)
Windows 8应用了Metro设计语言的简单性。 如果您想在您的网站上采用这种风格,BootMetro可能就是您所需要的。
![引导程序](https://i-blog.csdnimg.cn/blog_migrate/5ba60813e557109e168fe4a0b9981a39.png)
Internet上有许多WordPress入门主题,但是没有其他主题比Underscores更好。 有了它,您就可以指定和个性化主题名称,描述,作者,特别是主题标签,这些主题一旦下载包即适用于主题功能,因此您将获得类似于theme_slug_function
。
![下划线](https://i-blog.csdnimg.cn/blog_migrate/59a3923cdf3436a15e21f4a32eed40a9.png)
就像您在这样的网站上看到的视差效果一样 ? 如果要对网站应用类似的效果,则可以使用JavaScript动画库Jarallax来创建视差效果(几乎没有时间)。
![贾拉拉克斯](https://i-blog.csdnimg.cn/blog_migrate/09935a1d47c34a55edface20eb0d4fbc.png)
您是否对只能水平移动的画廊滑动效果感到厌倦? 然后查看Windy ,它使用3D转换以一种真正独特的方式运行内容。 在这里查看演示。
![有风的](https://i-blog.csdnimg.cn/blog_migrate/14ea1af64340246ebcd2cdacf134c7b7.png)
简而言之,摄影中的tiltShift是一种使照片看起来比实际尺寸更小,几乎像微型照片的技术。 在这篇文章中检查我们收集的此类照片: “倾斜摄影” 。 如果要在照片库中应用这种效果,只需使用此JavaScript库TiltShift.js。
![倾斜移位](https://i-blog.csdnimg.cn/blog_migrate/9ac5aaf912f0ce17cce0dcd848d0dc1b.png)
Sequence.js是具有一些高级过渡效果的响应式jQuery滑块插件。 与其他滑块不同,Sequence没有自带的内置主题。 因此,我们可以完全自定义外观以匹配我们的网站。
![sequence.js](https://i-blog.csdnimg.cn/blog_migrate/216a696dc0ed6e2533bf47a22a21ad31.png)
jQuery UI是一组完整的通用Web用户界面和交互,易于使用。 但是,默认主题很无聊。 因此,如果您想让jQuery UI具有不同的外观 ,但又不想让CSS变得肮脏,则可以简单地将默认CSS样式替换为Delta ,这是jQuery UI的一个漂亮主题。
![三角洲](https://i-blog.csdnimg.cn/blog_migrate/1e81755b9bb3333fd8b55aba39fd7ccb.png)
翻译自: https://www.hongkiat.com/blog/fresh-resources-for-designers-and-developers-november-2012/