51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

前端开发

SVG基础 | SVG和CSS级联样式表

SVG基础 | SVG和CSS级联样式表

厉飞雨 阅读(6) 评论(0) 赞(0)

我们**可以使用CSS来为SVG图形添加样式**。给SVG图形添加样式就是改变它们的外观,可以修改描边颜色和宽度,填充颜色,透明度等等。 ![600.png](http://static.51tbox.com/static/2024-11-23/col/f023882d9a24efd84699ca309c052e89/8a677c90fd0147338d6b44aaa9527...

【SVG】用CSS和SVG制作饼图

【SVG】用CSS和SVG制作饼图

厉飞雨 阅读(7) 评论(0) 赞(0)

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

【SVG】使用CSS和SVG制作带纹理文本的三个技巧

【SVG】使用CSS和SVG制作带纹理文本的三个技巧

厉飞雨 阅读(5) 评论(0) 赞(0)

你也许能够熟练的使用PS对文本进行图像掩埋;一个比较好的方法是在文字上添加一些纹理或者是一个背景图片。然后把这个文本存储为图像,你就可以在你的网站上使用;但是如果可以只使用HTML和CSS来产生相同的效果不是更好吗?好消息是,确实可以! ![svg.png](http://static.51tbox.com/static/2024-11-23/col/8e4dd81a9a0a...

【SVG】CSS vs. SVG:任意图形UI组件

【SVG】CSS vs. SVG:任意图形UI组件

厉飞雨 阅读(6) 评论(0) 赞(0)

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

【SVG】CSS和SVG中的剪切——clip-path属性和元素

【SVG】CSS和SVG中的剪切——clip-path属性和元素

厉飞雨 阅读(5) 评论(0) 赞(0)

CSS和SVG有很多共同之处。CSS有很多特性都是从SVG中引入过来的。其中就有"剪切"的特性。CSS和SVG都允许我们对一个元素进行非矩形的剪切。在这篇文章中,将介绍CSS和SVG中的剪切技术。 特别声明:本文提供的DEMO可能在你的浏览器中不能正常的演示,你应该查看这个[表格](https://github.com/awgreenblatt/css-g...

【SVG】CSS vs SVG: 美化复选框和单选按钮

【SVG】CSS vs SVG: 美化复选框和单选按钮

厉飞雨 阅读(4) 评论(0) 赞(0)

这是有关于CSS和SVG技术对比的系列文章第二篇,目的是通过示例解释两者的利弊,更好的帮助大家在Web制作中解决常见设计问题时能做出更好的选择。 在上一篇文章中,我们讨论了使用CSS和SVG创建带纹理的文本效果,并得到结论是:**目前阶段,使用SVG比使用CSS做更方便,更强大**。在这篇文章中,我们将处理自定义的复选框和单选按钮的效果。 你可能已知道,使用CSS来美化表单...

您是否会用CSS3和jQuery实现翻牌动画效果?

您是否会用CSS3和jQuery实现翻牌动画效果?

厉飞雨 阅读(7) 评论(0) 赞(0)

![html5-css3.png](http://static.51tbox.com/static/2024-11-23/col/5d5e481029da2cd49f4ae318330a478b/9568edf6df0b4fa2bdb8c0c4b5ef194c.png.jpg) 2016的里约奥运会已过半,看到中国金牌数在近几届中最低,心有不悦,只能说很多项目在退步,新老交替...

如何设置关于不法分子攻击的html页面提示

如何设置关于不法分子攻击的html页面提示

厉飞雨 阅读(5) 评论(0) 赞(0)

夏柔之前发布过一个关于不法分子的html页面,但局限于提醒不法分子 很多人都不知道怎么设置这个页面,非常迷茫 来让夏柔教大家如何在宝塔面板设置拦截html 教程开始: ----- 首先打开 宝塔面板 - 软件商店 - 专业版插件 - Nginx / Apache ![如何设置关于不法分子攻击的html页面提示-WordPress极简博客](http://static.5...

Typecho不解析表格?不解析html?

Typecho不解析表格?不解析html?

厉飞雨 阅读(6) 评论(0) 赞(0)

* typecho 原生markdown解析器非常弱,可以解析HTML,但是无法解析表格。可以配合以下插件使用[typecho-plugin-Parsedown](https://github.com/kokororin/typecho-plugin-Parsedown) 或者 [typecho-markdown](https://github.com/mrgeneralgoo...