css - 优设网 - 学设计上优设

菜单优设网 - 学设计上优设

会员

开通优设VIP星球

尊享13项VIP特权持续新增

主题打卡挑战

21天带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

优设私房课免费学

价值178元热销课程

你的私人律师

每月可免费咨询30次

开通VIP

领取更多设计师实用特权

投稿

css 话题

如果用 CSS 逆向推理视觉设计空间，我总结了这3个思考（附素材）

产品

如果用 CSS 逆向推理视觉设计空间，我总结了这3个思考（附素材）

方法之所以称之为方法，是因为具备一定的流程性和可复制性，所以这篇文章尽可能把视觉总结归纳成现实可用的方法。

2021/12/23

CSS为什么这么难学？一定是你的方法不对！

前端开发

CSS为什么这么难学？一定是你的方法不对！

为什么 CSS 这么难学？本文从四个方面给出具体学习建议，帮助大家更好地去学习掌握 CSS。

2021/09/03

用一个实战案例，帮你完全掌握 HTML 和 CSS 的实际应用

UI

用一个实战案例，帮你完全掌握 HTML 和 CSS 的实际应用

只要能把这节课的案例完整实现出来，那么大家就已经掌握了前端的初级水平，文章提供视频教程和源文件案例，快来免费学。

2020/07/17

写给设计师的前端指南：一小时搞懂 CSS 属性应用

产品

写给设计师的前端指南：一小时搞懂 CSS 属性应用

CSS 包含了非常多的属性和规则，学习 CSS 就是学习这些属性的用法，本篇内容中我们会挑选出最常用的属性做说明。

2020/07/16

写给设计师的速成指南：一小时快速了解 CSS 基础

产品

写给设计师的速成指南：一小时快速了解 CSS 基础

这一章，我们开始学习 CSS 样式表有关的知识点，通过 CSS 来控制 HTML 标签和元素的样式的方法和规范。

2020/07/14

写给设计师的编程基础：HTML 和 CSS 是什么？

UI

写给设计师的编程基础：HTML 和 CSS 是什么？

老是看见招聘信息要求懂代码，觉得是不是要懂代码才可以当UI设计师，为什么做设计还需要编程？为了解决这个问题，我们就来分享一个有关设计师和 "编程" 的系列干货，用所有人能看懂的讲解方式，帮助大家掌握这门基础，再也不会被这类招聘要求难倒。

2020/07/04

让网站变灰的CSS代码（支持IE、Firefox和Chrome）

前端开发

让网站变灰的CSS代码（支持IE、Firefox和Chrome）

当需要将网站变灰色来表达平台的哀悼时，如今主流CSS代码为主流方法！网站变灰色的CSS代码<style>html{ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); filter: grayscale(100%);}</style>以上代码除了IE都支持，也是现在国内主流网站常用的方法，都对被嫌弃的IE没做特别...

2020/04/21

酷站两连发！免费可商用图库+CSS前端设计师必备手册

酷站推荐

酷站两连发！免费可商用图库+CSS前端设计师必备手册

编者按：今天的两个酷站，分别是高质量的图库网站+CSS 参考手册，它将所有 CSS 标签都列在网站中，同时提供快速检索功能，当你点击任一标签后会开启详细使用教学，让你真正了解每个语法标记如何使用。MMT这个图库收录许多高画质相片，且都具备一定的拍摄水平和风格，对于想找图的朋友来说也是个值得收藏的网站。MMT 首页很清楚告诉大家：本图库内所有相片皆可自由、免费使用于商业用途，无论是使用在你的网站、主题、模板、专案、印刷或社群网站文案等等，采用 CC0 授权方式释出，每周更新。

2017/05/23

酷站两连发！CSS 滤镜工具+提高效率的音乐网站

酷站推荐

酷站两连发！CSS 滤镜工具+提高效率的音乐网站

编者按：今天推荐两款神器，一个是可以帮我们节省很多的调试图像效果时间的CSS 滤镜，一个是提高设计师工作效率的音乐网站，可以模拟出咖啡馆的噪声，帮你更有效率地工作。今天和大家分享一款在线 CSS 滤镜工具，CSS 中有一个Filter 属性，可以为元素渲染各种像 PS 软件设计出来的照片特效，比如高斯模糊、透明、色彩反差、黑白、色彩饱和度、亮度等效果处理。滤镜属性虽然强大，但调试相当麻烦，所以当你要用 Filter 属性美化图像效果时，建议使用这个推荐的 CSS Filters 在线工具。

2016/09/21

前端干货！实用全面的CSS background 属性使用手册

前端开发

前端干货！实用全面的CSS background 属性使用手册

background是用来设置背景的元素，从最早的纯色填充发展到现在，不仅支持渐变，甚至能用上混合模式！今天@不到布这篇好文将一一为你阐释这些子属性的用法，周末学起来！background 属性是CSS中用于设置元素背景的属性，最简单的background属性名，是针对背景若干设定的合并简写，最早的CSS只能使用单一背景图片，而在现在却可以设置多个背景图片。

2016/06/04

大开眼界！关于高清设计你必须知道的几件事

教程

大开眼界！关于高清设计你必须知道的几件事

如果你曾仔细观察过当今的网页设计，你会发现有一部分网站的画质已经相当惊艳了。从图片、背景到界面元素，无一不是高清画质，它们几乎是为高分辨率甚至视网膜屏幕的笔记本精心定制的网站，当然，这些网站对于网速的要求自然也更高一些，而与此同时，这样的网站在任何设备上浏览自然也就基本不存在模糊这回事了。到底什么是高清设计？

2016/03/31

网页的脊梁！20款素质过硬的响应式CSS栅格系统

下载

网页的脊梁！20款素质过硬的响应式CSS栅格系统

栅格系统这种东西和许多同类工具/素材一样，“系统”二字让它看起来无比高大上，而实际上大多数的栅格系统只是一系列纵横交错的细线构成。很简单？看起来确实如此。

2015/09/24

前端人员必收！10个省时高效的CSS 3代码生成工具

下载

前端人员必收！10个省时高效的CSS 3代码生成工具

今天的资源是完全免费的 WebApp，这些 WebApp 能够为模板，渐变，甚至浏览器属性的前缀生成 CSS3 代码。如果你是前端开发者，这些资源可以帮助你节省很多时间，并可以为以后的项目提供可复用的源码。1. CSS3 GeneratorCSS3 Generator 是最受欢迎的用于代码生成的 web 应用之一。

2015/09/04

酷站两连发！宠物小精灵专属配色网站+CSS Hover动画收集站

酷站推荐

酷站两连发！宠物小精灵专属配色网站+CSS Hover动画收集站

Okepalettes 是一个比较特别的配色网站，它里面所有的配色方案都来自口袋妖怪里面的妖怪角色，口袋妖怪也称：Pokemon、宠物小精灵、神奇宝贝，相信不少用户看过这部动画片或玩过这个游戏。另外一枚网站是专门收集CSS Hover动画的，都很酷炫，来收~Pokepalettes配色网站目前有600多个口袋妖怪角色配色，用户可以输入角色的英文名称或者编号就可以快速转到对应的角色。而主角皮卡丘的编号是#25，所以这里输入数字25然后按回车键就可以了，注意不要输入“#”号！

2015/08/26

写给设计师看的HTML&CSS入门指导

前端开发

写给设计师看的HTML&CSS入门指导

想做一个开发&设计并行的牛人？却不知道如何开始？欢迎观看本文，说不定会引起你对开发的兴趣HTML&CSS是网页设计的基本。

2013/12/28

值得学习研究！纯CSS3编写的面包屑导航收集

前端开发

值得学习研究！纯CSS3编写的面包屑导航收集

@设计达人网：随着Web技术越来越先进，浏览器更新换代也很快，在国内很多网站已经有使用css3和html5的技术了，所以我们也应该多学习这些新知识，设计达人网站整理的资料，你在学校、图书上也是未必能看到的。今天我们整理了10个纯CSS3制作的面包屑导航，这些都是通过CSS3来编写，十分方便，而且实用。有些文章附有教程，大家可以学习研究一下。

2013/12/24

图书推荐

高流量网站CSS开发技术

讲解CSS基础知识、CSS高级技巧、CSS3选择器/属性，以及各种CSS设计模式的图书可谓浩如烟海。本书无意在这些领域标新立异，而是探讨了大型团队或多个团队一同工作的情况，以及处理包含众多页面或子站点且访问量相当可观的网站时，所要面对的挑战。我们不介绍如何用最新最炫的技术实现图片替换或跨浏览器的圆角，而将关注点放在让团队中的新人更容易理解原有代码，并在其上添砖加瓦，让网页中的CSS代码从一开始就经过深思熟虑，且以完善、高效的方式构建。

2013/11/13

神站推荐：Codecademy！轻松圆你的编程梦

酷站推荐

神站推荐：Codecademy！轻松圆你的编程梦

曾几何时，你有没有过发誓要学会编程的冲动？结果面对着一行行如同天书的英文单词和符号，搞的挫败感爆棚？今天，我要告诉你的是，跟你的编程小白人生说拜拜吧！

2013/04/10

最新出炉的20个CSS3特效打包下载（附特效预览+源码）

前端开发

最新出炉的20个CSS3特效打包下载（附特效预览+源码）

@榮榮-小黑_丫这些特效真的非常赞，本人已经体验并打包喽，大家也可以各取所需，按需下载。以下为17个网页CSS样式原件.zip 微盘下载地址→ http://t.cn/zTvTIdM1. Putting CSS Clip to Work : Expanding Overlay Effect教程地址 2. Flipping Circle Slideshow教程地址 3. 有创意的CSS加载动画教程地址 4.丰富多彩的CSS3动画导航菜单教程地址 5. 利用CSS3和jQuery实现照片集实时预览教...

2013/03/26

多个细节帮助你更优雅地书写页面

教程

多个细节帮助你更优雅地书写页面

我们常以“整齐”，“易读”，“亲切”，“易于维护”，“复用性强”等来形容一些优秀的开发者所写的代码。现在，对代码的好评还有一个更为时尚的词“优雅”，是不是听起来觉得很亲切呢？页面是互联网产品的表现层面，不仅讲求外观，而且会应对更新迅速的互联网产品需求。

2012/12/02

教程

经典推荐：CSS学习中的瓶颈

虽已数年，但未就学习专门写过文章，这回破处了。苍蝇不叮没有缝隙的鸡蛋，领导不做没有跟拍的表演，同样，想到写CSS学习的文章也是有原因的（虽然我的不少行为没有原因）。情景再现（尊重隐私，下面故事中人名均为化名，有加工）：如月姑娘（本届D2上微博中奖上台最漂亮的那位）的内部分享会——关于CSS3 background相关内容~~…

2012/11/17

没有更多文章了

大家都在看

UI设计

文章 946

交互设计

文章 813

职场规划

文章 415

用户研究

文章 143

网页设计

文章 966

求职面试

文章 158

设计师干货

文章 217

PS教程

文章 784

优设大课堂

文章 139

热门频道

设计专题

热门设计知识精挑细选

细节猎人

1分钟小短文揣摩设计真谛

优设读报

行业资讯一站知晓

优设琅琊榜

顶尖设计作品聚集地

优设9图

优设爆火的干货频道

设计问答

高手大咖在线答疑解惑

热门频道

设计灵感

支持与服务

优设微博

@
优秀网页设计
380W粉丝！每日更新设计干货
@
优设
强烈推荐！优设官方品牌微博
@
优优教程网
官方微博，海量教程看不完
@
优设基础训练营
零基础入门，带你成为软件高手
官方群
优设官方微信群
01优设25+设计师交流群
02优设30+设计师交流群
03优设求职招聘群
04优设同城交友群
05优设私单群
06优设学生交流群

07优设UI设计师交流群
08优设插画师交流群
09优设平面品牌设计师交流群
10优设3D设计师交流群
11优优教程自学团
12优设VIP知识星球交流群
微信扫码添加管理员招财

微信号：扫码添加

严格审核打造高质量交流群

进群会有面试题谢绝打广告
优设微信

每天官微五分钟

一年萌新变大神

扫码关注

1000W

优设新媒体矩阵等你来关注

优优教程网

优设大课堂

设计师导航

优设训练营