DY点线面

  • 首页
  • blog
  • 设计导航
  • 下载
  • 关于
CSS
色彩

WebGradients – 提供180种渐变配色灵感的网站

今天和大家分享拥有180种渐变配色方案的网站:Web Gradients,此网站特色不仅提供漂亮的渐变配色,而且还有更多格式选择,比如 PSD, Sketch, PNG 以及可直接复制成一段 CSS 渐变代码,如此一来,设计师们就可以很方便的使用这个配色方案了。     网站名称:Web Gradients 网站地址:https://webgradients.com/ CSS库:https://github.com/itmeo/webgradients   打开网站我们就能直接看到 N…

2018年6月6日 0条评论 1227点热度 7人点赞 阅读全文
色彩

Grabient 在线渐变配色网站,交互操作超方便

    今天为大家分享配色网站:Grabient,这个网站的交互体验还真不错!拥有它可以方便实现漂亮的渐变效果。       网站名称:Grabient 网站地址:https://www.grabient.com/ 网站特色   支持 CSS 样式代码复制 可以操控360度渐变旋转 自由增加或删除渐变颜色 超方便的交互操作     下面我们来看看这个交互体验不错的配色网站,试过之后你一定会喜欢上它!   渐变角度变换 点击左下…

2018年6月6日 0条评论 671点热度 3人点赞 阅读全文
代码

【笔记】CSS垂直居中的11种实现方式

这里的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…

2017年5月3日 0条评论 315点热度 1人点赞 阅读全文
文章

CSS3黑科技 - 内凹圆角

圆角,大家一定都会做,border-radius, 内凹圆角如何实现? 可以拿个白色圆盒子盖住方形盒子的大半边实现,但是这样,是不透明的,背景发生改变时,就要改遮盖盒子的颜色,或者背景是渐变,改起来更麻烦,或背景是图片等等,就直接不太好改了,这种方法就有局限性。 说白了就是遮盖的那部分不透明以后,自适应性不强。 这里介绍一个用径向渐变实现的内凹圆角,可以解决上述问题。可以用CSS生成一个背景透明的内凹圆角。 1. 基本线性渐变 div { height: 100px; width: 200px; backgroun…

2017年3月29日 0条评论 317点热度 12人点赞 阅读全文
代码

韩都衣舍全屏轮播代码

怎么说呢, 今天放个轮播代码吧,韩都衣舍天猫店首页轮播,最近刚优化了下,平常可能经常加一些效果代码在上面,为了避免和一些效果代码冲突,可能啰嗦了点,需要店铺支持CSS功能,喜欢的记得点个赞。 首先是CSS部分:     页面代码部分: 欢迎到韩都首页参观,哈哈哈 write my essay

2016年10月20日 0条评论 337点热度 6人点赞 阅读全文
灵感

这100个网站和博客,值得每个网页设计师收藏(下)

这次的网站推荐合集绝对是长期搜集的成果,其中许多网站素质拔群,虽然并不是那么常见,但是内容大多值得网页设计师仔细收藏。如果你不想错过任何一个优质的网站,不妨一个一个点开仔细查看,也许会惊喜不断呢。上半部分戳这里:《这100个网站和博客,值得每个网页设计师收藏(上)》 51. Logofi Logofi 是一个以LOGO为主题的图库,搜集了来自世界各地最好的LOGO设计作品。 52. Onextrapixel 这是一个旨在分享免费的设计素材、教程和实用的互联网资源的分享社区。 53. A List Apart A L…

2016年10月12日 0条评论 379点热度 0人点赞 阅读全文
灵感

这100个网站和博客,值得每个网页设计师收藏(上)

设计是一定需要灵感的,而设计同样也是需要不断学习的。我想你们中每个人浏览器当中都没少搜集各类设计站点,部分靠谱的设计师甚至将设计师导航设为浏览器首页。要紧跟设计趋势,提升设计技能,掌握核心技巧,成为成功的设计师,这都是必经的过程。 所以,在导航之外,我们还搜集了100个具有影响力、值得收藏和学习的网站和博客,你可以从中挑选出符合你口味和阶段的那部分。这100个网站和博客内容丰富,涵盖了设计教程,免费资源,设计趋势,设计新闻等等等等。这些网站排名不分先后,也许你得花点时间逐个筛选,不要错过任何一个哟~ 1. Line…

2016年10月10日 0条评论 390点热度 0人点赞 阅读全文
用户体验

【译】20个免费的网页加载动画

没有人喜欢等待页面加载,滑块或任何其它的加载形式。然而,有一些方法可以使加载更吸引用户,动画的应用在这方面发挥了重要作用。 今天,我们选择了20款免费动画加载形式分享给大家,一般以CSS3、HTML5或jQuery创建。这些将有助于用户直观的适应加载过程,从而提高网站或应用整体用户体验。 Single Element CSS Spinners 一段纯css代码实现的效果,简单易用,可以直接加在页面中。 CSS Rainbow Loader 这是一个用纯CSS实现的彩虹加载效果,采用了圆润的设计和鲜艳的色彩。让网站充…

2016年10月5日 0条评论 451点热度 2人点赞 阅读全文
代码

避开这3个误区,来看设计师学编程的正确姿势

前端作为一种偏视觉化的编程技术,确实是外行比较适合的编程语言。想找工作的设计师,有一定的编程基础也会更受青睐。但是在我和很多设计师在打交道的过程中,发现大部分人对于学习编程存在一些误区。 比如很多人虽然想学但又认为编程太难有排斥心理;相对地也有一些人用CSS写了一些样式会觉得前端很简单;还有些人不知道从何下手,就开始啃起了枯燥无味的w3school文档(web技术中文文档)。于此我觉得设计师想学会写代码一定要对编程有正确的认知,既要对技术保持一颗敬畏的心,又不能从潜意识里排斥它。 我做了两年前端开发,同时也做过许多…

2016年9月22日 1条评论 309点热度 0人点赞 阅读全文
代码

腾讯【tgideas】谈谈Flexbox布局

Flexbox Layout(Flexible Box)模块,W3C官方称为CSS弹性盒子布局, 是在CSS3中定义的一种新的布局模式。Flexbox可以控制在容器内的子元素的对齐方式、排列方式以及排序顺序,即使其子元素的尺寸是未知或者动态的 情况下。弹性容器的主要特点就是能够调整其子元素的宽度或者高度以使其能在不同分辨率的屏幕下能用最好的方式去填充可用空间。 Flex布局的主要思想是让容器能使其子元素的宽高(或其他属性)能够以最好的方式去填充可用空间(主要是去适应不同的设备跟分辨率)。一个Flex弹性盒子能让子元…

2016年6月4日 0条评论 292点热度 0人点赞 阅读全文
代码

详解用CSS3制作圆形滚动进度条动画效果

原文来自:http://www.cnblogs.com/jr1993/p/4677921.html 主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢,那篇博客只是制作出来效果而已,并没有动画效果,因为当时正期末复习期间,所以就省了制作动画的时间成本。所以,今天就一起把各种效果都实现吧! 内 容 先看一下效果图,会提升我们的学习兴趣哟: 好的,我将按照此图从上到下的顺序讲解,由于第一…

2016年4月18日 0条评论 265点热度 0人点赞 阅读全文
HTML5

让ICON生动起来 纯CSS实现带动画的天气图标

CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现。 今天主要是和大家分享一个比较有创意、实用的CSS天气图标动画,静态的天气图标看上去是很呆板,若加上动画,看起来会更加真实生动,以下例子就是很好的参考案例。 下面我们来做一个会下雨的天气图标实例,过程其实很简单哦。 STEP1: 整体HTML架构 <div class="icon rainy"> <div class="cloud"></div> &…

2016年1月21日 0条评论 437点热度 0人点赞 阅读全文
HTML5

【CSS/JS】一个漂亮的网页卡片特效

今天给大家带来一个css/js卡片特效,比较适合现代浏览器及app特效,可以给你的界面带来比较不错的用户体验。欢迎大家尝试,预览及下载请查看页尾DEMO     demo 下载     原文来自:tympanus

2015年11月2日 0条评论 551点热度 0人点赞 阅读全文
HTML5

8个献给前端开发者的免费CSS UI工具包

本篇文章搜集的内容不是很多,但是很实用的CSS用户界面工具包,你可以免费下载的ui工具包。 每个CSS UI工具包包含按钮、盒子、进度条、滑块、标签、通知、旋转木马、复选框、单选按钮、开关等。 点击图片进入下载页面。 CSS Inbox User Interface   Drunken Parrot UI Kit   Toolkit   GET – S.. DONE   Bootflat   Amsterdam UI Kit – CSS   INK &nb…

2015年10月30日 0条评论 282点热度 0人点赞 阅读全文
HTML5

CSSgram:让CSS滤镜帮你实现漂亮的图像特效

CSS滤镜(CSS filter)不少前端人员知道,但大多数的用法十分单一,用得最多的就是黑白应用,其实还有很多高级的应用,对设计师来说也需要知道的,以后对图片特效处理又多一种设计方案选择了。 今天主要和大家介绍 CSSgram 这个CSS滤镜特效库,作者为其创建出很多美丽的图像效果,并且这个CSS滤镜库是小于1KB,效果的实现方法主要使用 CSS filter 和 CSS Blen Mode(混合模式)来实现。 使用教程 STEP 1: 下载 CSSgram 样式库 下载地址:cssgram.min.css ST…

2015年10月29日 0条评论 335点热度 0人点赞 阅读全文
HTML5

赞!15个来自 CodePen 的酷炫 CSS 动画效果

CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。   今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品。(为保证最佳的效果,请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览) 1. JavaScript Mickey Watch Apple watch like Mickey watch …

2015年5月27日 0条评论 317点热度 0人点赞 阅读全文
HTML5

网页动画:JavaScript和CSS3 动效库大全

我们将向大家展示下网页动画的现状地图,并收集了一些具有多变表现力的类库、框架和插件。   图1:网络动画地图 下图分为三个区域,第一部分是一些容易理解的动画类库,撇开已经达到期望的通用动画方法外,还从简单的方法和函数到时间控制都提供了大家所希望的工具。我 们从JavaScript类库中分离了用CSS3过渡的动画元素,也挑选出了能够和SVG,WebGL或者HTML5 Canvas相连接的动画类库。     图2:工具列表 第二部分是专为文档模型中像滚动动画,视差,CSS sprite,3…

2015年5月26日 0条评论 412点热度 1人点赞 阅读全文
HTML5

干货!献给网页设计师的HTML5/CSS3/JS便捷工具

是时候为网页设计师的来一组便捷的辅助工具了。日新月异的网页技术革新催生了大量的设计与开发工具,HTML5/CSS3几乎成了设网页设计师的必修课,而强大的JS也为网页提供了更多的可能性。尤其是HTML5,作为一门极为有用且实用的标记语言,它赋予网页设计师创造更优秀网页的可能。 这也是为什么,身为网页设计师的你需要不停地了解最新的技术趋势和新兴工具,这些全新的库、框架、插件和技术能让你的网页如虎添翼。 HTML5使得设计师和开发者在各个不同领域都比之前更强大了。快速,漂亮,安全,响应式,这些特性使使得设计师和开发者可以…

2015年5月9日 0条评论 349点热度 0人点赞 阅读全文
代码

惊人技术!2014年Codepen上最热门的100个code&CSS片段代码

世界上有很多Web设计师、前端人员喜欢到Codepen上展示他们的片段代码,有的代码的确强大而惊人,所以我们经常到这里获取一些小灵感是很不错的。 最近Codepen官网上发布了2014年Codepen上最热门的100个code&CSS片段代码,这些片段中有不少今人惊叹和创意的CSS和code,值得一看,下面我们来看看TOP10的片段有那几个吧: TOP 10: 摇摆的电灯 灯泡好像被微风吹动一样,左右摇摆,很写意。 预览效果 TOP 9: 纯CSS视差滚动 这是比较流行的特效,用纯CSS编写很厉害! 预览效…

2015年4月21日 0条评论 444点热度 0人点赞 阅读全文

D.Young

A designer who looks like a Csser.

站内搜索
标签聚合
设计 CSS 网页设计 动效 图标 字体 用户体验 logo

Copyright ©2014-2021 DY点线面. All Rights Reserved. 站点地图

THEME KRATOS MADE BY VTROIS

鲁ICP备15008799号-1