发布于

    用CSS变形创建圆形导航

    在这个教程中,我会教你使用CSS变形制作圆形导航。 我会带你一步步地创建样式,讲解背后的数学知识和简单的逻辑,让你对这技术有清晰的认识。正如我提到的,使用CSS变形创建样式,会用到相关的基础数学知识。但是不必担心, 用到的数学非常简单,我会带你一步步地客克服它。我要指出原技术属于Ana Tudor。我把它修改成我想要效果,这也是我希望你的在教程结束时去做的:对这技术有深入而且清晰的认识,开始查阅资料并且构建自己的样式。

    作者:大漠
    阅读全文
    发布于

    Sass两个先进特性与局限性

    Sass是一门优秀的CSS预处理器语言,他有很多自己独特的特性,但具有这些独特的特性基础上,他有很多功能又有所限制。今天根据的《Two handy and advanced SASS features and their limitations》一篇文章进行翻译,给大家介绍了Sass中插值和列表两个特性,以及这两个特性的极限性。在文中分享了他在使用Sass的插值和列表的一些发现,同时也想知道你是否碰到在文章所介绍的Sass限制性,以及您又是如何绕过他们的。

    作者:大漠
    阅读全文

    Sass基础——Sass函数

    在Sass中除了可以定义变量,具有@extend,%placeholders和Mixins等特性之外,还自备了一系列的函数功能。前面在《Sass基础——颜色函数》一文中主要向大家介绍了Sass函数中有关于颜色函数的功能以及使用。其实在Sass的函数功能中除了颜色函数之外,还具有字符串函数数字函数列表函数Introspection函数以及三元函数等,当然大家还可以根据需求自定义函数

    在这篇文章中,我们主要对Sass函数中的字符串函数数字函数列表函数Introspection函数以及三元函数的功能能使用做一些简单的介绍,希望对初学Sass的同学略有帮助。

    作者:大漠
    阅读全文

    Sass基础——颜色函数

    色彩是设计的一个美妙元素和一个至关重要的工具,同时他能帮助你更好的抓住您的客户。更为重要的是,色彩能帮你表达某些特定的情感,把用户视线带到特点的地方或者帮助你传达信息。在Web设计中,主要依靠颜色来表达你的色彩。

    如果你只是直接丢一堆颜色给用户,他们也不会集中注意力在你的设计上的。色彩很微妙,所以为了让色彩成为可被利用的工具我们必须正确使用它。像其他设计元素一样,色彩也要好好利用才能发挥它的魔力。

    但实际中,仅依靠CSS常用的颜色功能并不能迅速帮我们锁定需要的颜色。特别在很多时候,设计师在设计图中并没有明显标注某个控件其他状态颜色值时,我们不得不依靠设计工具,获取相近色。可这种方法并不是理想方法,很多时候让你的颜色(特别对颜色不感冒的同学)偏离你的产品,直接让你无法抓住你的客户。

    作者:大漠
    阅读全文

    Sass基础——Rem与Px的转换

    remCSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素htmlfont-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。在《Sass基础——PX to EM Mixin和@function》一文中介绍了通过Sass的mixin和function实现px与em如何进行转换计算,今天在这篇文章向大家介绍Sass中px与rem单位互转的实现方法

    作者:大漠
    阅读全文

    Sass基础——PX to EM Mixin和@function

    CSS单位是一个很意思的东西,到目前为止,CSS的单位不仅仅局限于em,px,pt,com,in...,还出现了新的单位,比如remvwvhvminvmax等等。在CSS-trick有对这些单位进行描述(可以点击这里阅读中文)。在这么多的单位中,其中pxem两者的互转是最令同学们头痛的。简值是一言难尽,理不清呀!今天我们一起来动手探讨如何使用Sass的mixin和function来实现px向em转换。用来解决这个头痛而又麻烦的事情。

    作者:大漠
    阅读全文