你是会员吗?注册要么登录

CSS.

了解使用CSS和样式表铺设网站的最新提示,技术和方法。

2020年需要掌握的5种新的CSS技术

CSS./ 3 2020年1月

2020年需要掌握的5种新的CSS技术

网页设计师着迷于尝试新的CSS技术和推动CSS可以做的边界。计划良好的CSS几乎可以控制设计的任何方面,并通过更干净、更一致的代码促进更好的总体用户体验。

但是趋势是什么呢?接下来你应该学什么?对于今年的最新发展,我们有一些想法。投入其中,看看哪些是热点,并尝试这些新的CSS技巧和技术,为您的下一个项目带来令人兴奋的优势。

划桨:之前和:在CSS之后

CSS./ 2019年8月7日

划桨:之前和:在CSS之后

我们以前看一下:活跃,一个非常方便的伪类选择器,可用于创建一些令人敬畏的鼠标缩小效果。今天我们将恢复退一步,探索其他一些“伪”项目,这次我们将看待伪元素:之前和:之后。

您可能已经开始在web上的高级CSS示例中看到它们的使用,所以您不妨亲自学习使用它们。

伪元素是什么?它与伪类有何不同?为什么伪元素有时有一个冒号,有时有两个冒号?

如何:之前和:在CSS实施后?开发人员遍布网络的某种方式是使用这些工具来表现现代编码的惊人壮举?

请仔细阅读,找出答案。

绝对定位和相对定位的内幕

CSS./ 6 2019年8月6日

绝对定位和相对定位的内幕

当我第一次学习web开发的时候,CSS的样式方面看起来简单而有趣,但是执行布局上的巨大成就似乎令人困惑。我有点感觉我的方式没有一个坚实的理解如何事情像定位和浮动工作,因此它将花费数小时来执行甚至简单的任务。如果这种情况听起来很熟悉,那么这篇文章就是为您准备的。

我早期得到的一个真正的启示是当我终于能够理解定位上下文是如何工作的时候,特别是当涉及到绝对定位和相对定位之间的区别时。

今天,我们将要解决这个主题,并确保您确切地知道如何以及何时将特定定位上下文应用于给定元素。

5种真正有用的响应式网页设计模式

CSS./ 2019年7月30日

5种真正有用的响应式网页设计模式

响应式web设计需要一种非常不同的布局思考方式,这是既具有挑战性又令人兴奋的。几个世纪以来,布局的艺术已经足够复杂,它被固定的元素所定义,现在,随着布局变得越来越具有适应性,事情变得越来越复杂。

为了帮助重新编程您的大脑以以新的方式考虑布局,我们将看一下一些有趣的响应设计模式,这些设计模式是由才华横溢的设计师实施的。

手机优先设计:为什么它很好,为什么它很糟糕

CSS./ 2019年7月23日

手机优先设计:为什么它很好,为什么它很糟糕

从历史上看,大多数网络设计师和他们的客户都已经首先接近了任何项目的桌面侧,同时将移动部分作为次要完成的次要目标。即使凭借响应设计的兴起,我们中的许多人也从“全尺寸”网站开始,并下来工作。

不过,业界有一种不断增长的趋势,那就是将这种工作流程颠倒过来,实际上是从移动设备开始考虑,然后再发展到更大的桌面版本。

你为什么以这种方式接近一个项目?这一战略的一些优缺点是什么?请仔细阅读,找出答案!

CSS中的内部阴影:图像,文字及更远

CSS./ 2019年7月10日

CSS中的内部阴影:图像,文字及更远

CSS中的阴影是快速和简单的,无论你是在一个盒子阴影或一个文本阴影。但是你对内心的阴影有多舒服呢?你能做一个嵌入的箱形阴影吗?如何在一些文本上做同样的事情?

今天我们将学习一些非常简单的嵌入阴影技术,你只需要几行代码就可以完成。我将向您介绍box-shadow和text-shadow的语法,以及如何更改它们来获得嵌入的阴影。

10个最好的脚本和手写的谷歌字体

谷歌字体/ 2018年8月29日

10个最好的脚本和手写的谷歌字体

一个很好的脚本字体很难找到。当涉及到这个特定的字体区域时,我非常挑剔,往往讨厌我所看到的大部分。通过这篇文章,您可以跳过垃圾排序的工作,并将直接切割到最佳脚本和手写的谷歌字体,这些字体是可读,有吸引力和完美的。

所有字体都以独特的CSS处理方式显示(并且提供了快速实现所需的代码!)它们也都提供了谷歌字体,所以您将启动和运行快速复制和粘贴,不需要下载!

设计很棒的桌子的15个技巧

CSS./ 2018年8月22日

设计很棒的桌子的15个技巧

表格式的信息令人厌烦。从某种意义上说,它们本来就是这样的。一个好的表格能以简洁、容易理解的方式传达大量信息。因为重点应该放在信息上,过度设计表格会降低效率。然而,在合适的人看来,巧妙的设计不仅能使表格更有吸引力,而且还能增加可读性。

今天,我们将介绍几种改进表格功能和美观的方法。我们目前在网上最常见的一个地方就是web应用程序的定价页面,所以我们的大多数例子都会采用这种形式,只要记住这些原则适用于任何类型的信息网格(不管它是不是真的表格)。

用于设计人员的最佳CSS渐变发电机

CSS./ 2018年8月20日

用于设计人员的最佳CSS渐变发电机

我们正在查看最佳CSS渐变发电机中的十个,可以使用它来创建各种梯度样式(并直接拥有CSS输出!)。用手编码渐变并不乐趣(特别是一旦你经过一个简单的双色渐变),那么这些工具就是你的书签文件夹中的必备。

网站设计中最时尚的元素之一是使用渐变背景或彩色覆盖层。双色线性渐变是这种趋势最受欢迎的变化。虽然梯度可能花哨和复杂,它们实际上很容易创建和部署...如果您使用的是正确的工具!

20+超棒的资源引导爱好者

引导/ 2018年3月22日

20+超棒的资源引导爱好者

引导已在Web开发区爆炸。总会有持怀疑态度和仇敌,但总体而言,该项目一直是粉碎的成功,可以在Github的分叉和观看图表的顶部不断看到。

由于Bootstrap的名声,发展社区已经提出了许多巨大相关资源。今天,我们已经将您的收藏收集到您需要使用Bootstrap所需的一切列表中。从介绍性教程到布线套件和自定义生成器,这里有一个引导爱文的东西。

13学习CSS网格的最佳方式

CSS./ 2018年2月26日

13学习CSS网格的最佳方式

CSS网格是一种越来越流行的方法,用于创建复杂的响应式web设计布局,使其在不同浏览器之间呈现更加一致。现在是熟悉CSS网格的时候了,所以我们收集了13种最好的方法来开始今天的学习。

CSS网格允许您创建更多的跨浏览器兼容的更加不对称的布局和更标准化的代码,而不是旧学校方法,允许您创建更多的不对称布局和更标准化的代码。大多数主要的网站浏览器已经支持CSS网格,它是一个W3C候选推荐,它将作为标准做法。它普遍认为CSS网格将成为网站布局的未来。

网页设计中动画的介绍

CSS./ 2017年9月11日

网页设计中动画的介绍

动画不再只是动画片。从全屏移动图像到小的悬停效果,动画的触摸无处不在。动画是时尚的,有趣的和用户友好的。

使用动画的障碍已经开始跌倒。对于大多数用户来说,高速连接以及从简单的移动或愚蠢的GIF创建任何内容到几分钟的动作,动画已经成为实用和有用的网络设计工具。