我要反馈问题

加入众成翻译官方交流群(群号:362419683)

关注《奇舞周刊》微信号
阅读更多精选前端技术文章

友情链接

猿说:互动氛围更好的IT交流学习平台

互动氛围更好的IT交流学习平台

立即访问
声享:制作精彩的有声幻灯片

使用声享在线PPT快速制作分享优质内容

立即体验

京ICP备17024260号

myvin

文本锁定 | CSS-Tricks

566阅读 · myvin 2017-07-09翻译  
SVG CSS

SVG 提供了 <tspan> 标签。尽管这个标签的功能类似于 HTML 的 <span> 标签,但是可以通过设置多个属性来解锁强大的文字变形功能。 <svg viewBox="0 0 100 100">...

Olmsted

图解SVG中的path语句

465阅读 · Olmsted 2016-12-27翻译  
C SVG Web

Path 元素乃是SVG中的终极绘图元素。它可以绘制任何东西!我听说所有绘制元素的底层,最终都是使用path来绘制的。Path 元素使用一个单独的属性来描述它缩绘制的图形:d 属性。它的值是一个完全属于自己的代码。它看起来确实是难以辨认,那是一个有着海量的数字和字母混...

hxh

SVG 2 的难题

598阅读 · hxh 2016-12-21翻译  
SVG Chrome WebKit

我们所熟悉并热爱的 SVG 现在到 1.1 第二版了。SVG 2 处于 W3C 草案编辑阶段,这是从来没有过的巨大风险,它的章程在推广之前不能续用。 这是 Tavmjong Bah 中提到的部分原因: 令人震惊和意想不到的是,它没有从狭小的空间走出来。工作组中只剩下...

camiler

如何创建响应式删格系统

1355阅读 · camiler 2016-11-19翻译  
CSS HTML SVG

对自定义网页设计来说,最好的补充之一就是定制的响应式栅格系统。你可以自定义你需要的一切,包括有多少列数,列的大小,列之间的间隔,甚至是需要改变布局的临界点。 不幸的是,许多人甚至不会尝试着为他们的网页设计去建立自定义栅格,因为他们缺乏建立那样一个系统的知识和信心。 因...

betsey

如何使用SVG动画来制作游戏

1412阅读 · betsey 2016-11-18翻译  
CSS SVG HTML

游戏的灵感 在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样,好的游戏拥有...

echodis

2016年10月的CSS运动路径——Dan Wilson在CodePen上的演示

828阅读 · echodis 2016-11-10翻译  
CSS Chrome SVG

2015年的夏天带来了新的CSS运动路径模型的首次实现,通过三个新的CSS属性:motion-path, motion-offset,motion-rotation。2016年,Motion Path和其他规范中的相关部分进行合并,包括圆形显示和极坐标,模型有了些许改...

開開心心的想念

介绍 SVG 动画 - O'Reilly Media

832阅读 · 開開心心的想念 2016-11-01翻译  
SVG CSS HTML

介绍 SVG 动画 了解为什么 SVG 里面的动画和 CSS 里面的动画不一样,并解决你可能会遇到的一些常见的坎。 由 Sarah Drasner 2016年10月19日 Illustration 里的 SVG 动画。 (来源: Sarah Drasner). 注册...

cherryvenus

手把手教你处理下划线

724阅读 · cherryvenus 2016-10-26翻译  
Safari CSS SVG

译者百科: descenders:降部(不明白的看wiki百科) 设计链接的下划线可能是一件棘手的事,我总是忘记在什么情况下用什么方法。 然而谢天谢地, John Jameson 让我们在这篇博客中加快了处理这个问题的速度. 有许多不同的方法让你设计下划线。也许你还记...

showzeng

我开始制作完美像素图标,以下是这一路探索所得

745阅读 · showzeng 2016-10-22翻译  
Icon Sketch SVG

我开始制作完美像素图标。以下是这一路探索所得。 有些设计师对这种深入到像素的制作并不足够重视,其他人会认为它会魔性地从天而降,而只有极少数人接受这个挑战并切实地去创作。我个人深信不疑,图标是一个好的设计的非常重要的一环,因此,每个设计师都应该能够设计出一套图标系统,只...

善意的闲人

网页色彩死抠指南

1023阅读 · 善意的闲人 2016-10-08翻译  
CSS SVG Web

网页色彩的使用方式有很多。而我认为,但凡用一件东西,懂得其原理肯定大有裨益。网页色彩也不例外。现在就来死抠一下网页色彩的究竟吧。 颜色混合 众多使用色彩的人,他们对色彩的理解还与孩童时候鼓弄颜料时一样。但电脑上的情形已然不同,因为颜色混合机制有变。你小时候用的是颜料。...

XYZ

使用CSS相对单位构建可缩放的组件

2199阅读 · XYZ 2016-09-25翻译  
CSS SVG Relative

这是 Ahmad Shadeed 的一篇博客,他为我们列举了使用相对单位的诸多好处。说到em这类相对单位,可能大多数人的第一反应是可以用于设置字体大小,事实上,还有许多其他yong chu用处,比如将字体大小与其他视觉元素的尺寸绑定。 在这个动态的世界中,我们所做的任...

yanni4night

优化 Ember 模板

595阅读 · yanni4night 2016-09-05翻译  
Ember JavaScript SVG

模块构成了你的 Ember 应用的 60%,然后呢? 用编译器或转译器处理源代码时,很容易让代码的源体积与真实线上的代码大小失去关联性。 这对于 Ember 的模板来说更是如此,很小的改动将带给生成的 JavaScript 的体量以深远的影响。 “每一比特都很重要...

hidoos

如何使用 CSS 和 SVG 剪切和遮罩技术

1611阅读 · hidoos 2016-08-24翻译  
SVG CSS HTML

SVGs 能够很好的在 web 上工作, 剪切和遮罩允许你使用有趣的方式去展示或隐藏 web 图像, 使用这些技术也能让的设计变得更加灵活因为你不需要去修改或者创建新的图像——这些都可以用代码来实现。通过结合使用 CSS 和遮罩技术,你将会拥有更多的可能性去使用网络图...

camiler

SVG Stroke属性

638阅读 · camiler 2016-08-03翻译  
SVG

内联SVG对完全自定义图形提供所有使用途径以及对其输出的控制。当在浏览器中手动创建形状,或者对现有图形进行编辑时,这就特别方便。 在SVG中有若干和stroke相关的属性,这就允许我们可以控制图形的具体细节,跟矢量图形软件一样。这篇文章就是作为一个通用指导,通过这些属...

loveky

Canvas与SVG: 选择合适的工具

965阅读 · loveky 2016-07-25翻译  
SVG HTML DOM

在jCanvas入门: 当jQuery遇上HTML5 Canvas发表在SitePoint之后,由Craig Buckler发起的一项讨论如雨后春笋般涌现出来:是否存在一些使用场景更适合使用HTML5 Canvas而不是SVG呢? 两者都是可以用来创建经验的图像与视觉...

hanyuxinting

jQuery 3.0 的新特性

812阅读 · hanyuxinting 2016-07-22翻译  
jQuery CSS SVG

jQuery 称霸互联网世界已有十个年头了,它能一直坚守不是没有理由的。经过很长一段时间,jQuery在上个月发布了新版本:jQuery 3.0和jQuery Compat 3.0(兼容版本)。该版本更轻量、更快速,考虑了向后兼容。获得最新访问版请访问:jQuery下...

MinweiShen

通过例子学习如何用D3.js实现数据可视化

1068阅读 · MinweiShen 2016-07-20翻译  
SVG HTML D3.js

D3.js是一个基于数据来改变html文档的JavaScript库。D3使用HTML,SVG以及CSS来帮助你把数据变得现实可见。 ### 更多该作者的文章 用Websockets和Server-Sent Events制作实时的App 小建议 - 给HTML5...

betsey

SVG和Canvas的纠结----1像素问题

648阅读 · betsey 2016-07-01翻译  
SVG Design

SVG和Canvas的纠结----1像素问题 作者博客, 25 January 2010, SVG 和 canvas作为两种极为出色的技术,正在改变着我们在web上使用图形的方式。我喜欢使用这两种技术,而且现在对他们的支持也在逐步地改善。(IE...

刘涛

如何使用SVG文本

539阅读 · 刘涛 2016-06-14翻译  
SVG Design

SVG文本可以说是一种两全其美的选择。它可以像其他图形 元素一样被渲染,所以你可以像操作形状、线条、 箭头一样给它添加描边和填充 ;它最终会被封装为XML格式的数据,这说明它是真正的文本。 SVG文本 是容易获取的。你可以选中、复制并在其他地方粘贴。 它可以使用屏幕...

为之漫笔

SVG图标好用后备难做

799阅读 · 为之漫笔 2016-06-12翻译  
SVG Android CSS

最近,图标字体用得越来越少了,好像有很多不错的理由都建议不再用图标字体,而改用SVG图形。对于《金融时报》(Financial Times)而言,我们大致同意这个观点, 是该考虑一下过渡方案了。 浏览器对SVG的支持非常好,94%以上都完全支持SVG 1.1,如果你不...

十年踪迹

用 CSS 隐藏页面元素的 5 种方法

1759阅读 · 十年踪迹 2016-06-09翻译  
CSS JavaScript SVG

用 CSS 隐藏页面元素有许多种方法。你可以将 opacity 设为 0、将 visibility 设为 hidden、将 display 设为 none 或者将 position 设为 absolute 然后将位置设到不可见区域。 你有没有想过,为什么我们要有这么多...

小象

SVG兴衰史

958阅读 · 小象 2016-05-13翻译  
SVG Web HTML

1998的一天, 一位老同事来到我在贝塔斯曼集团公司的办公室。此时她已去Adobe公司工作,她向我介绍了一项全新的技术,PGML,又称“精密图像标识语言”,是一种具有Adobe特点的用于矢量图形的XML。她知道我一定会感兴趣。Jon Warnock对PGML描述如下:...

iamsuyi

使用Segment.js实现svg菜单图标的动画效果

762阅读 · iamsuyi 2016-01-04翻译  
SVG CSS Icon

本教程基于Tamas Kojo在Dribbble网站上的一篇文章,使用SVG和Segment.js实现菜单图标的动画效果,其中Segment.js是一个绘画以及动态化svg-path元素的js库。 今天我们非常高兴和你分享一个有趣的菜单图标动画效果。这个想法基于Ta...

为之漫笔

何时需要文档兼容模式(IE)

639阅读 · 为之漫笔 2015-12-24翻译  
SVG

Windows Internet Explorer的每个主要版本都会增加新功能,目的是让浏览器更好用、更安全、更符合行业标准。随着功能的增多,很多旧网站面临无法正确显示的风险。本文介绍Windows Internet Explorer近期版本的变化情况,以便大家明白为...

为之漫笔

指定使用遗留的文档模式(IE)

717阅读 · 为之漫笔 2015-12-23翻译  
JavaScript SVG Mac

有时候需要限制Windows Internet Explorer在解析某个网页时使用特定的文档模式。在此,我们介绍x-ua-compatible头部属性,这个属性可以让用户就像使用旧版本IE一样查看当前网页。 简介 最后更新:2013-8 正如Defining doc...

玩命加载中……
已经到底啦