CSS vs SVG: 美化复选框和单选按钮
这是有关于CSS和SVG技术对比的系列文章第二篇,目的是通过示例解释两者的利弊,更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。在上一篇文章中,我们讨论了使用CSS和SVG创建带纹理的文本效果,并得到结论是:目前阶段,使用SVG比使用CSS做更方便,更强大。在这篇文章中,我们将处理自定义的复选框和单选按钮的效果。
这是有关于CSS和SVG技术对比的系列文章第二篇,目的是通过示例解释两者的利弊,更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。在上一篇文章中,我们讨论了使用CSS和SVG创建带纹理的文本效果,并得到结论是:目前阶段,使用SVG比使用CSS做更方便,更强大。在这篇文章中,我们将处理自定义的复选框和单选按钮的效果。
这篇文章通过示例一步一步的告诉大家如何使用CSS来创建3D球体效果。并且如何利用CSS的box-shadow
和渐变来给3D球体添加一些光泽效果,让球体更具像是在一个3D空间。并且配合CSS的animation
让整个球体运动起来。通过上面的示例再次证明了,运用好了box-shadow
和渐变能制作出各种各样的效果。
SVG图形的一个最常见用例是图标系统,其中最常用的SVG sprite技术就是使用SVG<use>
元素在文档中任意位置“实例化”图标。使用<use>
元素实例化图标或任何其它的SVG元素或图像,给元素添加样式时经常会碰到一些问题。这篇文章的目的是尽可能给你介绍一些方法来解决:使用<use>
引入的内容添加样式受限的问题。但是在开始之前,我们先快速浏览一下SVG的主要结构和分组元素,然后慢慢进入use
的世界中,以及shadow DOM,然后重回CSS的怀抱。我们会逐步讲解为什么给<use>
内容添加样式会比较麻烦,以及有什么好的解决方案。
在这个系列教程的前两篇文章中,我们比较了CSS和SVG创建图形文本、复选框和单选按钮的技术与效果。在这篇文章中将介绍CSS和SVG对比技术中的另一个技术——创建图形UI组件的技术。具体地说,我们将要讨论的是如何创建圆形菜单效果,因为这是非矩形UI组件的典型案例。
在 CSS 2.1 中,只能指定图片相对左上角的偏移量,或者使用关键字定位到其他的角落。如果需要让背景图距离元素四边距有一定的偏移量,相对而言是较为麻烦。在这篇文章中,作者通过background-position
新特性、修改background-origin
以及calc()
函数等三种方法,实现了一种灵活型的背景图定位。希望这篇文章对大家有所帮助。
border-radius
属性在CSS中已经不是什么新东东。大家都知道它可以帮助大家很容易完成圆角效果。有些时候,我们只希望容器的内部边框是圆角的,但是外部轮廓线要是矩形的,要完美的实现还是需要一定的技巧的。这篇文章告诉大家如何通过数学中的勾股定理来实现内凹圆角效果。
和其他视觉设计相关的媒体一样,在 Web 上各类大小、颜色、角度不同的纹理也非常流行。不过,实现这些纹理的技术却并不理想。通常,我们需要创建独立的位图,如果有需求变更的话都需要重新更改文件。有些开发者使用 SVG 替代位图,但是 SVG 仍然是一种独立的文件,而且其语法也不够友好。那么是否有一种出色的方法让我们直接在 CSS 中创建纹理呢?你会惊喜的发现,我们将在文中逐步解决这一问题。
顾名思义Chrome开发工具就是一个工具,它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具,你可以做很多有趣的事情。
我结束了最近的“如何使用<picture>
和srcset
”教程,不知道你们是否也看过。给大家呈现了一些简单的知识来达到很好的教学目的,却没有让你为更多的不寻常的应用程序遇到的难看的效果做处理。我遇到过一些比较冷僻的例子和需要当心的怪异模式,也发现了一些上面说的不寻常的应用程序。可能他们可以帮到你。
这是CSS技术和SVG技术对比系列教程中最后一篇。本文选取了几个CSS和SVG的解决方案,而不是一个解决方案——使用CSS和SVG实现。有关于解决方案的每个细节已经有很多这方面的优秀文章,如果你感兴趣的话,可以阅读有关于这个系列的所有文章。