用CSS变形创建圆形导航
在这个教程中,我会教你使用CSS变形制作圆形导航。 我会带你一步步地创建样式,讲解背后的数学知识和简单的逻辑,让你对这技术有清晰的认识。正如我提到的,使用CSS变形创建样式,会用到相关的基础数学知识。但是不必担心, 用到的数学非常简单,我会带你一步步地客克服它。我要指出原技术属于Ana Tudor。我把它修改成我想要效果,这也是我希望你的在教程结束时去做的:对这技术有深入而且清晰的认识,开始查阅资料并且构建自己的样式。
在这个教程中,我会教你使用CSS变形制作圆形导航。 我会带你一步步地创建样式,讲解背后的数学知识和简单的逻辑,让你对这技术有清晰的认识。正如我提到的,使用CSS变形创建样式,会用到相关的基础数学知识。但是不必担心, 用到的数学非常简单,我会带你一步步地客克服它。我要指出原技术属于Ana Tudor。我把它修改成我想要效果,这也是我希望你的在教程结束时去做的:对这技术有深入而且清晰的认识,开始查阅资料并且构建自己的样式。
Sass是一门优秀的CSS预处理器语言,他有很多自己独特的特性,但具有这些独特的特性基础上,他有很多功能又有所限制。今天根据KrasimirTsonev的《Two handy and advanced SASS features and their limitations》一篇文章进行翻译,给大家介绍了Sass中插值和列表两个特性,以及这两个特性的极限性。KrasimirTsonev在文中分享了他在使用Sass的插值和列表的一些发现,同时也想知道你是否碰到KrasimirTsonev在文章所介绍的Sass限制性,以及您又是如何绕过他们的。
在The Sass Way上看到一篇John W. Long写的《Mixins for Semi-Transparent Colors》文章。文章中详细的介绍了如何使用Sass来定义一个半透明颜色的mixins,觉得很有意思,认真学习之后,结合CSS中的半透明,以及Sass中的半透明做了一点总结,与大家分享。
在Sass中除了可以定义变量,具有@extend,%placeholders和Mixins等特性之外,还自备了一系列的函数功能。前面在《Sass基础——颜色函数》一文中主要向大家介绍了Sass函数中有关于颜色函数的功能以及使用。其实在Sass的函数功能中除了颜色函数之外,还具有字符串函数、数字函数、列表函数、Introspection函数以及三元函数等,当然大家还可以根据需求自定义函数。
在这篇文章中,我们主要对Sass函数中的字符串函数、数字函数、列表函数、Introspection函数以及三元函数的功能能使用做一些简单的介绍,希望对初学Sass的同学略有帮助。
色彩是设计的一个美妙元素和一个至关重要的工具,同时他能帮助你更好的抓住您的客户。更为重要的是,色彩能帮你表达某些特定的情感,把用户视线带到特点的地方或者帮助你传达信息。在Web设计中,主要依靠颜色来表达你的色彩。
如果你只是直接丢一堆颜色给用户,他们也不会集中注意力在你的设计上的。色彩很微妙,所以为了让色彩成为可被利用的工具我们必须正确使用它。像其他设计元素一样,色彩也要好好利用才能发挥它的魔力。
但实际中,仅依靠CSS常用的颜色功能并不能迅速帮我们锁定需要的颜色。特别在很多时候,设计师在设计图中并没有明显标注某个控件其他状态颜色值时,我们不得不依靠设计工具,获取相近色。可这种方法并不是理想方法,很多时候让你的颜色(特别对颜色不感冒的同学)偏离你的产品,直接让你无法抓住你的客户。
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。在《Sass基础——PX to EM Mixin和@function》一文中介绍了通过Sass的mixin和function实现px与em如何进行转换计算,今天在这篇文章向大家介绍Sass中px与rem单位互转的实现方法
CSS单位是一个很意思的东西,到目前为止,CSS的单位不仅仅局限于em,px,pt,com,in...,还出现了新的单位,比如rem,vw,vh,vmin和vmax等等。在CSS-trick有对这些单位进行描述(可以点击这里阅读中文)。在这么多的单位中,其中px与em两者的互转是最令同学们头痛的。简值是一言难尽,理不清呀!今天我们一起来动手探讨如何使用Sass的mixin和function来实现px向em转换。用来解决这个头痛而又麻烦的事情。