今天和大家分享拥有180种渐变配色方案的网站：Web Gradients，此网站特色不仅提供漂亮的渐变配色，而且还有更多格式选择，比如 PSD, Sketch, PNG 以及可直接复制成一段 CSS 渐变代码，如此一来，设计师们就可以很方便的使用这个配色方案了。 网站名称：Web Gradients 网站地址：https://webgradients.com/ CSS库：https://github.com/itmeo/webgradients 打开网站我们就能直接看到 N…
今天为大家分享配色网站:Grabient，这个网站的交互体验还真不错！拥有它可以方便实现漂亮的渐变效果。 网站名称：Grabient 网站地址：https://www.grabient.com/ 网站特色 支持 CSS 样式代码复制 可以操控360度渐变旋转 自由增加或删除渐变颜色 超方便的交互操作 下面我们来看看这个交互体验不错的配色网站，试过之后你一定会喜欢上它！ 渐变角度变换 点击左下…
这里的demo都只是针对现代浏览器所做，未兼容低版本的IE以及其它非主流浏览器。 11种实现方式分别如下： 1. 使用绝对定位和负外边距对块级元素进行垂直居中 html代码： <div id="box"> <div id="child">我是测试DIV</div> </div> css代码： <style> #box { width: 300px; height: 300px; background: #ddd; position: rela…
圆角，大家一定都会做，border-radius, 内凹圆角如何实现？ 可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部分不透明以后，自适应性不强。 这里介绍一个用径向渐变实现的内凹圆角，可以解决上述问题。可以用CSS生成一个背景透明的内凹圆角。 1. 基本线性渐变 div { height: 100px; width: 200px; backgroun…
怎么说呢， 今天放个轮播代码吧，韩都衣舍天猫店首页轮播，最近刚优化了下，平常可能经常加一些效果代码在上面，为了避免和一些效果代码冲突，可能啰嗦了点，需要店铺支持CSS功能，喜欢的记得点个赞。 首先是CSS部分： 页面代码部分： 欢迎到韩都首页参观，哈哈哈 write my essay
这次的网站推荐合集绝对是长期搜集的成果，其中许多网站素质拔群，虽然并不是那么常见，但是内容大多值得网页设计师仔细收藏。如果你不想错过任何一个优质的网站，不妨一个一个点开仔细查看，也许会惊喜不断呢。上半部分戳这里：《这100个网站和博客，值得每个网页设计师收藏(上)》 51. Logofi Logofi 是一个以LOGO为主题的图库，搜集了来自世界各地最好的LOGO设计作品。 52. Onextrapixel 这是一个旨在分享免费的设计素材、教程和实用的互联网资源的分享社区。 53. A List Apart A L…
设计是一定需要灵感的，而设计同样也是需要不断学习的。我想你们中每个人浏览器当中都没少搜集各类设计站点，部分靠谱的设计师甚至将设计师导航设为浏览器首页。要紧跟设计趋势，提升设计技能，掌握核心技巧，成为成功的设计师，这都是必经的过程。 所以，在导航之外，我们还搜集了100个具有影响力、值得收藏和学习的网站和博客，你可以从中挑选出符合你口味和阶段的那部分。这100个网站和博客内容丰富，涵盖了设计教程，免费资源，设计趋势，设计新闻等等等等。这些网站排名不分先后，也许你得花点时间逐个筛选，不要错过任何一个哟~ 1. Line…
没有人喜欢等待页面加载，滑块或任何其它的加载形式。然而，有一些方法可以使加载更吸引用户，动画的应用在这方面发挥了重要作用。 今天，我们选择了20款免费动画加载形式分享给大家，一般以CSS3、HTML5或jQuery创建。这些将有助于用户直观的适应加载过程，从而提高网站或应用整体用户体验。 Single Element CSS Spinners 一段纯css代码实现的效果，简单易用，可以直接加在页面中。 CSS Rainbow Loader 这是一个用纯CSS实现的彩虹加载效果，采用了圆润的设计和鲜艳的色彩。让网站充…
前端作为一种偏视觉化的编程技术，确实是外行比较适合的编程语言。想找工作的设计师，有一定的编程基础也会更受青睐。但是在我和很多设计师在打交道的过程中，发现大部分人对于学习编程存在一些误区。 比如很多人虽然想学但又认为编程太难有排斥心理；相对地也有一些人用CSS写了一些样式会觉得前端很简单；还有些人不知道从何下手，就开始啃起了枯燥无味的w3school文档（web技术中文文档）。于此我觉得设计师想学会写代码一定要对编程有正确的认知，既要对技术保持一颗敬畏的心，又不能从潜意识里排斥它。 我做了两年前端开发，同时也做过许多…
Flexbox Layout(Flexible Box)模块，W3C官方称为CSS弹性盒子布局， 是在CSS3中定义的一种新的布局模式。Flexbox可以控制在容器内的子元素的对齐方式、排列方式以及排序顺序，即使其子元素的尺寸是未知或者动态的 情况下。弹性容器的主要特点就是能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间。 Flex布局的主要思想是让容器能使其子元素的宽高（或其他属性）能够以最好的方式去填充可用空间（主要是去适应不同的设备跟分辨率）。一个Flex弹性盒子能让子元…
原文来自：http://www.cnblogs.com/jr1993/p/4677921.html 主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画，想不会都难！那么，到底是什么东东呢？先不急，之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》，但是呢，那篇博客只是制作出来效果而已，并没有动画效果，因为当时正期末复习期间，所以就省了制作动画的时间成本。所以，今天就一起把各种效果都实现吧！ 内 容 先看一下效果图，会提升我们的学习兴趣哟： 好的，我将按照此图从上到下的顺序讲解，由于第一…
CSS3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现。 今天主要是和大家分享一个比较有创意、实用的CSS天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。 下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。 STEP1: 整体HTML架构 <div class="icon rainy"> <div class="cloud"></div> &…
今天给大家带来一个css/js卡片特效，比较适合现代浏览器及app特效，可以给你的界面带来比较不错的用户体验。欢迎大家尝试，预览及下载请查看页尾DEMO demo 下载 原文来自：tympanus
本篇文章搜集的内容不是很多，但是很实用的CSS用户界面工具包，你可以免费下载的ui工具包。 每个CSS UI工具包包含按钮、盒子、进度条、滑块、标签、通知、旋转木马、复选框、单选按钮、开关等。 点击图片进入下载页面。 CSS Inbox User Interface Drunken Parrot UI Kit Toolkit GET – S.. DONE Bootflat Amsterdam UI Kit – CSS INK &nb…
CSS滤镜（CSS filter）不少前端人员知道，但大多数的用法十分单一，用得最多的就是黑白应用，其实还有很多高级的应用，对设计师来说也需要知道的，以后对图片特效处理又多一种设计方案选择了。 今天主要和大家介绍 CSSgram 这个CSS滤镜特效库，作者为其创建出很多美丽的图像效果，并且这个CSS滤镜库是小于1KB，效果的实现方法主要使用 CSS filter 和 CSS Blen Mode（混合模式）来实现。 使用教程 STEP 1: 下载 CSSgram 样式库 下载地址：cssgram.min.css ST…
CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品，也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。 今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子，这些 Demo 可以说都是艺术品。（为保证最佳的效果，请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览） 1. JavaScript Mickey Watch Apple watch like Mickey watch …
我们将向大家展示下网页动画的现状地图，并收集了一些具有多变表现力的类库、框架和插件。 图1：网络动画地图 下图分为三个区域，第一部分是一些容易理解的动画类库，撇开已经达到期望的通用动画方法外，还从简单的方法和函数到时间控制都提供了大家所希望的工具。我 们从JavaScript类库中分离了用CSS3过渡的动画元素，也挑选出了能够和SVG，WebGL或者HTML5 Canvas相连接的动画类库。 图2：工具列表 第二部分是专为文档模型中像滚动动画，视差，CSS sprite，3…
是时候为网页设计师的来一组便捷的辅助工具了。日新月异的网页技术革新催生了大量的设计与开发工具，HTML5/CSS3几乎成了设网页设计师的必修课，而强大的JS也为网页提供了更多的可能性。尤其是HTML5，作为一门极为有用且实用的标记语言，它赋予网页设计师创造更优秀网页的可能。 这也是为什么，身为网页设计师的你需要不停地了解最新的技术趋势和新兴工具，这些全新的库、框架、插件和技术能让你的网页如虎添翼。 HTML5使得设计师和开发者在各个不同领域都比之前更强大了。快速，漂亮，安全，响应式，这些特性使使得设计师和开发者可以…
世界上有很多Web设计师、前端人员喜欢到Codepen上展示他们的片段代码，有的代码的确强大而惊人，所以我们经常到这里获取一些小灵感是很不错的。 最近Codepen官网上发布了2014年Codepen上最热门的100个code&CSS片段代码，这些片段中有不少今人惊叹和创意的CSS和code，值得一看，下面我们来看看TOP10的片段有那几个吧： TOP 10: 摇摆的电灯 灯泡好像被微风吹动一样，左右摇摆，很写意。 预览效果 TOP 9: 纯CSS视差滚动 这是比较流行的特效，用纯CSS编写很厉害！ 预览效…
