2024-11-24 厉飞雨 阅读(206) 评论(0) 赞(16)

<p>这篇文章是探索有关于CSS和SVG技术的系列文章第一篇，通过例子来阐述CSS和SVG相关技术的比较。因为大家对SVG有一定的偏见，这个系列文章只是为了证明SVG解决Web上的某些设计问题。因为它是自然图像。但从客观的角度来看，我们要考虑每个技术的利弊，找出何时何地使用CSS或SVG更好。</p> <p>在这篇文章中，我们将复习一些使用C...

2024-11-24 厉飞雨 阅读(306) 评论(0) 赞(16)

<p>我们<strong>可以使用CSS来为SVG图形添加样式</strong>。给SVG图形添加样式就是改变它们的外观，可以修改描边颜色和宽度，填充颜色，透明度等等。</p> <p><img src="http://static.51tbox.com/static/2024-11-23/col/f02...

2024-11-24 厉飞雨 阅读(291) 评论(0) 赞(20)

<p>说到饼图，即使是最简单的只有两种颜色的形式，用Web技术创建也并不简单，尽管都是一些常见的信息内容，从简单的统计到进度条指标还有计时器。通常是使用外部图像编辑器来分别为多个值创建多个图像来实现，或是使用大型的JavaScript框架来设计更复杂的图表。</p> <p>尽管这个东西并不像它曾经看起来那么难以实现，但是也没有什么直接并且简单...

2024-11-24 厉飞雨 阅读(324) 评论(0) 赞(14)

<p>你也许能够熟练的使用PS对文本进行图像掩埋；一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像，你就可以在你的网站上使用；但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗？好消息是，确实可以！</p> <p><img src="http://static.51tbox.com/...

2024-11-24 厉飞雨 阅读(373) 评论(0) 赞(21)

在这个系列教程的前两篇文章中，我们比较了CSS和SVG创建图形文本、复选框和单选按钮的技术与效果。在这篇文章中将介绍CSS和SVG对比技术中的另一个技术------创建图形UI组件的技术。 具体地说，我们将要讨论的是如何创建圆形菜单效果，因为这是非矩形UI组件的典型案例。 有关于圆形菜单的相关教程、插件和工具： * [BUILDING A CIRCULAR NAVIGAT...

2024-11-24 厉飞雨 阅读(400) 评论(0) 赞(13)

<p>CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有&quot;剪切&quot;的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中，将介绍CSS和SVG中的剪切技术。</p> <p>特别声明：本文提供的DEMO可能在你的浏览器中不能正常的演示，你应该查看这个<a h...

2024-11-24 厉飞雨 阅读(354) 评论(0) 赞(14)

<p>这是有关于CSS和SVG技术对比的系列文章第二篇，目的是通过示例解释两者的利弊，更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。</p> <p>在上一篇文章中，我们讨论了使用CSS和SVG创建带纹理的文本效果，并得到结论是：<strong>目前阶段，使用SVG比使用CSS做更方便，更强大</strong...

2024-11-24 厉飞雨 阅读(286) 评论(0) 赞(14)

<p><img src="http://static.51tbox.com/static/2024-11-23/col/5d5e481029da2cd49f4ae318330a478b/9568edf6df0b4fa2bdb8c0c4b5ef194c.png.jpg" alt="html5-css3.png" />...

2024-11-19 厉飞雨 阅读(355) 评论(0) 赞(14)

### 前言 {#前言} `tailwindcss`是有一个什么[Dark Mode](https://tailwindcss.com/docs/dark-mode) 的，但是我觉得这个，不够用，也不好用。翻了网上的一些方法，发现还是css变量的方式更加好用，在这里做个记录。 ### 思路 {#思路} 首先，我们按照正常的思路来，想要实现网页的主题切换。我们只需要准备几套...

2024-11-19 厉飞雨 阅读(312) 评论(0) 赞(15)

CSS(Cascading Style Sheet)层叠级联样式表 {#csscascading-style-sheet层叠级联样式表} ==================================================================== CSS3 概述 {#css3-概述} ------------------ * CSS3 在 CSS...