51工具盒子
谈谈关于CSS&CSS3中伪类选择器的应用
<p><img src="http://static.51tbox.com/static/2024-11-23/col/76726f988a343cfbfe1de64fe74f4895/23b199758d36428c8cb84042c83f13fc.png.jpg" alt="html5-css3.png" />...
CSS3
【SVG】教你给SVG 的内容添加CSS样式
SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG`<use>` 元素在文档中任意位置["实例化"图标](https://css-tricks.com/svg-sprites-use-better-icon-fonts/)。 使用`<use>`元素实例化图标或任何其它的SVG元素或图像，给元素添...
【SVG】CSS vs SVG: 最后一节(上部分)
<p>这是CSS技术和SVG技术对比系列教程中最后一篇。本文选取了几个CSS和SVG的解决方案，而不是一个解决方案------使用CSS和SVG实现。有关于解决方案的每个细节已经有很多这方面的优秀文章。</p> <p>让我们先从CSS和SVG最具争议的主题开始：图标系统。</p> <h2>字体图标 VS. SVG图标&...
【SVG】CSS和SVG之间的图形文本的效果
<p>这篇文章是探索有关于CSS和SVG技术的系列文章第一篇，通过例子来阐述CSS和SVG相关技术的比较。因为大家对SVG有一定的偏见，这个系列文章只是为了证明SVG解决Web上的某些设计问题。因为它是自然图像。但从客观的角度来看，我们要考虑每个技术的利弊，找出何时何地使用CSS或SVG更好。</p> <p>在这篇文章中，我们将复习一些使用C...
SVG基础 | SVG和CSS级联样式表
<p>我们<strong>可以使用CSS来为SVG图形添加样式</strong>。给SVG图形添加样式就是改变它们的外观，可以修改描边颜色和宽度，填充颜色，透明度等等。</p> <p><img src="http://static.51tbox.com/static/2024-11-23/col/f02...
【SVG】用CSS和SVG制作饼图
<p>说到饼图，即使是最简单的只有两种颜色的形式，用Web技术创建也并不简单，尽管都是一些常见的信息内容，从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现，或是使用大型的JavaScript框架来设计更复杂的图表。</p> <p>尽管这个东西并不像它曾经看起来那么难以实现，但是也没有什么直接并且简单...
【SVG】使用CSS和SVG制作带纹理文本的三个技巧
<p>你也许能够熟练的使用PS对文本进行图像掩埋；一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像，你就可以在你的网站上使用；但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗？好消息是，确实可以！</p> <p><img src="http://static.51tbox.com/...
【SVG】CSS vs. SVG:任意图形UI组件
在这个系列教程的前两篇文章中，我们比较了CSS和SVG创建图形文本、复选框和单选按钮的技术与效果。在这篇文章中将介绍CSS和SVG对比技术中的另一个技术------创建图形UI组件的技术。 具体地说，我们将要讨论的是如何创建圆形菜单效果，因为这是非矩形UI组件的典型案例。 有关于圆形菜单的相关教程、插件和工具： * [BUILDING A CIRCULAR NAVIGAT...
【SVG】CSS和SVG中的剪切——clip-path属性和元素
<p>CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有"剪切"的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中，将介绍CSS和SVG中的剪切技术。</p> <p>特别声明：本文提供的DEMO可能在你的浏览器中不能正常的演示，你应该查看这个<a h...
【SVG】CSS vs SVG: 美化复选框和单选按钮
<p>这是有关于CSS和SVG技术对比的系列文章第二篇，目的是通过示例解释两者的利弊，更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。</p> <p>在上一篇文章中，我们讨论了使用CSS和SVG创建带纹理的文本效果，并得到结论是：<strong>目前阶段，使用SVG比使用CSS做更方便，更强大</strong...
