- 博客(66)
- 收藏
- 关注
RSS订阅翻译 指导学习_指导
在过去的几周中，此博客有点安静。 在当今世界上发生的所有事情面前，没有意识到共享CSS技巧的合适时机，而没有承认在乔治·弗洛伊德（George Floyd）被杀之后人们在街头抗议的真正斗争。 黑人实际上是在争取种族主义世界中存在的权利。 毫无疑问，白人在科技领域的代表人数过多。 在我所在的公司，我们开始就如何改善团队之间的多元化展开对话。 我已经捐赠给了Black Lives Matter和...
2020-07-02 14:45:24
237
翻译 css 颜色_所有CSS颜色
我最近做了一个演示 ，需要在select输入中列出所有 CSS命名的colors作为选项。 我不想手工将它们全部写出来，但是麻烦的是我找不到任何地方的所有148种颜色的纯文本列表。 我最终要做的是从这篇方便CSS Tricks文章 （也包括相应的十六进制代码，并且非常有用）中复制HTML，然后用我实际需要的标记替换周围的表标记。 我真的不想再做一次-所以我已经在Github上创建了此文本文件...
2020-07-02 14:35:24
317
翻译 简单寻找连续段_寻找简单
在过去一个月左右的时间内，我一直在Atomic Smash上构建新的前端框架（最近被称为“ Snap”），该框架包含所有脚本，软件包和启动文件，使开发团队中的任何人都可以获取快速，轻松地开始一个新项目。 在我看来，最简单的目标是在前端开发环境中实现简单性。 我之前写过一些关于我有时对这个行业可能不必要的复杂性感到沮丧的文章，以及关于仅使用HTML和CSS构建小型项目站点的令人耳目一新的经...
2020-07-02 14:25:24
656
翻译 qt4有css写样式吗_我们需要CSS4吗？
詹·西蒙斯（Jen Simmons）在本周向CSS工作组提出了一个有趣的建议 ： 让我们定义CSS 4最近，出现了很多次关于网站制作的人将从CSS工作组正式定义“ CSS 4”以及后来的“ CSS 5”等中受益匪浅的情况。 紧接着Nicole Sullivan和PPK提出了这个想法，随后Chris Coyier进一步讨论了这个想法。 这个想法并非没有缺点。 路易斯·拉扎里斯 （ Lo...
2020-07-02 14:15:24
199
翻译 博客英语作文写作技巧_网络写作技巧
网络写作是一项技能，就像其他技能一样，只有通过实践才能完善。 我已经在此博客上写了两年了，在此之前为其他站点创建内容，我想我对此还可以，尽管总有方法可以改进！ 在本文中，我将分享我多年来获得的一些智慧点，如果您开始写博客，或者甚至从写作转向印刷，这可能会对您有所帮助。 尽管这些内容是在考虑技术内容的情况下编写的，但它们可以应用于许多不同类型的Web内容。 新鲜写 雷切尔·安德鲁（Ra...
2020-07-02 14:05:24
842
翻译 css响应式布局的方法_响应式CSS运动路径的不同方法
在使用CSS Motion Path时 ，总是使我感到困惑，即路径本身无法缩放。 所创建的路径大小本质上是固定大小（以像素为单位）。 这意味着使用Motion Path进行响应式设计有些棘手，并且需要一些解决方法。 缩放路径 令人高兴的是，CodePen的狂热爱好者（和出色的动画师） Jhey Tompkins已经找到了一种方法，可以通过一些富有想象力的思想来缩放路径值，并绘制出库D3的...
2020-07-02 13:55:24
188
翻译 ai网格变形状_带有子网格的不规则形状的链接
基于卡的UI是常用的Web设计模式，构建需要将鼠标悬停（或聚焦）效果应用于整个卡的UI并不少见。 有几种使用CSS来实现这种效果的策略， 这篇CSS Tricks文章涵盖了其中的一些策略。 （它们都不是完美的，而且都有陷阱！） 但是，如果我们的链接悬停效果需要影响许多子项，而又又没有像常规卡片那样整齐地放置在矩形中怎么办？ 使用CSS Grid，我们可以在水平轴和垂直轴上布置项目，以构建...
2020-07-02 13:45:24
1313
翻译 css3鼠标悬停滑动代码_仅CSS的滑动字幕悬停效果
您是否曾经需要构建一个UI，其中标题需要在悬停时在图像上滑动以显示更多内容？ 这是我在整个职业生涯中一直以各种方式实施的任务。 这样做不是很困难：使用position: absolute将标题放置在图像上，然后将其向下转换，在悬停时将其转换回上一级–不要忘了overflow-y: hidden在包含元素上。 这是一个简单的实现： 当需要在悬停前在图像上方“窥视”的部分覆盖物的高度...
2020-07-02 13:35:24
989
翻译 css 自定义属性_视频：有关CSS自定义属性的90秒
去年，我在Future Sync会议上发表了讲话，今年，组织者问我是否可以提供CSS主题的简短记录介绍。 我整理了一段90秒的视频，介绍了CSS自定义属性，这是我最喜欢的（相对）最近CSS功能之一，并想在这里与您分享。 下面还有一个成绩单。 成绩单 CSS自定义属性使您可以存储值以在样式表中重复使用。 如果您熟悉其他编程语言或CSS预处理程序，则可能会遇到变量。 CSS自定义属...
2020-07-02 13:25:24
129
翻译 互动投影 雷达互动_建立互动时间表
本周，英国与世界上许多其他地区一起对日冕病毒（AKA Covid-19）进行了封锁，因此，至少可以说，我们处于一种非常奇怪的状况。 希望大家都保持安全，并照顾好自己和亲人。 我为那些受到个人影响的人，以及前线令人难以置信的NHS工人感到振奋，他们每天都在战斗，冒着自己的健康来保证我们的安全。 就我个人而言，我发现应对这种巨大动荡的最佳方法是控制我所能做的小事情。 作为父母，我和我的丈夫以...
2020-07-02 13:15:24
486
翻译 网格线计算线的长度_负网格线
您是否知道可以使用负行号通过CSS Grid定位网格项？ 直到最近我才发现，或者更确切地说，我没有考虑任何事情，因为我从来没有像以前那样需要过。 但是最近，在撰写了有关网格项的相对位置的文章之后，让我感到困惑的是，在这里负线可能是有利的。 如果使用带有正值的行号放置网格项目，则该行尚不存在（因为网格中没有足够的轨道），则将创建隐式轨道。 通过将项目放置在显式定义的网格之外而在列轴...
2020-07-02 13:05:24
1490
翻译 css网格_带有CSS变量的相对网格项
我最近在帮助我的同事开始使用CSS网格布局，他问我是否有一种相对于彼此偏移网格项的方法，例如“如果第1列在x行结束，使第2列在x + n行开始”。 Grid本身并没有完全做到这一点的方法，在这种情况下，您需要显式放置项目。 但是我想到这可能是CSS变量或自定义属性的用例。 以前，我已经比较了CSS变量和Sass（或其他预处理器）变量之间的差异，类似于const和let在JavaScript中...
2020-07-02 12:45:24
82
翻译 你鼓舞了我是世界杯主题曲吗_20位鼓舞人心的科技女性
马尔科Bijelic ，设计师在Hipinspire ，最近发表的这篇文章中的标题网页设计的传说：他们现在在哪里？ 。 该文章回顾了2004年的Cameron Moll ，他是Web设计领域的人，探讨了当今20个人对Web的影响。 虽然阅读Marko的帖子并反思许多这些领先人物的不可否认的影响很有趣，但是不可能注意到原始名单中女性的明显缺失。 实际上，只有一个女人（ Donna Driscoll...
2020-07-02 12:35:24
185
翻译 一年学完mit计算机课程_一年的实用程序课程
去年在Mud，我们对CSS（即原子CSS）采用了实用程序优先的方法。 具体来说，我们决定使用实用程序类框架TailwindCSS ，该框架提供了一堆类，您可以将这些类应用于您的项目以快速构建UI。 莎拉·达扬（Sarah Dayan）去年发表了一篇很棒的文章，介绍了实用程序优先CSS的好处 ，我建议您阅读该文章，以全面了解该方法的一些好处。 在本文中，我将总结过去一年在代理机构环境中采用原子...
2020-07-02 12:25:24
218
翻译 css路径自动加上了路径_使用CSS沿路径放置文本
在过去的几个月中，我一直在玩CSS Motion Path ，并且在创建演示过程中玩得很开心，您可以在此Codepen集合中找到其中的一些示例 。 但是“运动路径”这个名称有点误导，因为它不仅与运动有关。 实际上，尽管规范仍以“运动路径”作为名称，但用于定义路径的属性已从motion-path更改为offset-path 。 原因很容易理解：一个元素可以放置在路径上的任何位置， 无论是否运动，其...
2020-07-02 12:15:24
415
翻译 网格顶点的拉普拉斯算子_子网格在这里
对subgrid （CSS Grid Level 2规范的一部分）的支持刚刚在Firefox Nightly中登陆！ 要开始尝试它，您需要通过在浏览器中转到about：config ，然后搜索subgrid来启用该功能。 切换layout.css.grid模板-亚格子value.enabled和子网格为true。 现在还处于初期，但是仅仅几个小时的尝试就使我对这将带来的布局可能性感到非常...
2020-07-02 12:05:24
405
翻译 总结2018展望2019_总结2018
过去几天，我一直在阅读许多人的年终点评，他们分享自己的个人和专业成就以及对下一年的希望和目标。 我本来不想做其中之一，但是阅读所有其他内容会让我感到鼓舞，所以我们来了！ 这（主要是CSS博客），我将大部分基于CSS，或者至少基于前端开发。 但这对我个人来说也是非常有趣的一年，因此，如果我偶尔偏离个人，请原谅我。 让我们开始吧... 2018年的新增功能 CSS {In Real Li...
2020-07-02 11:55:24
150
翻译 图片 css 剪切_具有CSS形状和剪切路径的实验版面
最近，使用CSS属性shape-outside来创建有趣和不寻常的文本和布局效果的演示不断涌现。 （ 这是 Mandy Michael 的一个例子 ） shape-outside属性（ CSS Shapes模块的一部分 ）允许我们将文本包装在对象的形状周围。 您希望文本环绕的对象必须具有宽度和高度，并向左或向右浮动。 这是我们要做的最简单的代码： .shape { width: 200p...
2020-07-02 11:45:24
234
翻译 渐进式web应用程序_渐进式Web应用程序：简介
如果您从事网站建设业务，那么您可能会越来越多地听到人们谈论渐进式Web应用程序 （PWA）。 由Google开发的PWA在吸引用户方面具有网络的所有优势，以及用户可以从本地应用程序获得的速度和可靠性。 为什么选择渐进式Web应用程序？ 关键卖点是： 性能 PWA加载速度很快，并且可以快速响应用户交互，而无需任何复杂的动画。 可靠性 PWA始终能够为用户提供体验，即使是脱机...
2020-07-02 11:35:24
508
翻译 css网格_我CSS网格愿望清单
如果您关注此博客，您将知道我是CSS Grid的忠实拥护者，毫无疑问，它使我们开发人员在处理Web布局时比以往任何时候都更有能力。 但是，我CSS布局需求中有一些是Grid尚未完全满足的-希望其中的一些能够在将来实现！ 设置行和列间隙的样式 没有任何网格属性可让您直接将样式应用于行和列间隙。 能够在此处应用背景或边框样式等效果非常好。 目前，如果要执行以下示例中的操作，则需要使用网格项目...
2020-07-02 11:25:24
117
翻译 css 网格布局_具有CSS变量+ CSS网格的超强布局
我们在Mud的生产环境中使用CSS Grid已有几个月了，我绝对喜欢它为布局编码提供的灵活性。 长期以来，我们一直没有一个真正的Web布局解决方案-用float和flexbox对其进行破解只是我们做事的方式。 但是现在，老实说，我无法想象没有网格的生活！ 最近才引起我充分注意的一件事是CSS变量 （或“自定义属性”）。 CSS变量的工作方式与Sass和其他预处理器中的变量类似。 主要区别在于...
2020-07-02 11:15:24
107
翻译 做前端值得吗_值得关注的伟大前端作家
因为这是一个全新的博客，所以我想重点介绍一些网络开发人员，这些人启发了我，并爱了我的文章（和写作风格）。 当我考虑开始CSS {In Real Life}时，我只是想放一个地方，我可以放所有我的文章，不管是长篇还是短篇，以及关于CSS和前端开发的一般随机想法。 我的目的是写关于我发现的东西，并希望为那些花时间阅读文章的人揭开一些神秘面纱。 它可能并不总是完美的，但是我发现写作是一种学习和传递...
2020-07-02 11:05:24
54
翻译 flex实现网格效果_网格还是Flex？
克里斯·科耶尔（Chris Coyier）最近发起了一个Twitter话题，让我思考人们通常如何解释CSS Grid Layout和flexbox的用例： 对于同时了解CSS网格和flexbox的所有人，您最喜欢的解释差异的方法是什么？ -克里斯·科耶尔（@chriscoyier） 2019年1月25日 当然，一些最有见地的回复来自Rachel Andrew和Jen Simmons：...
2020-07-02 10:55:24
839
翻译 css 网格布局_具有CSS网格布局的宽高比单元格
我发现自己最近在CSS Grid中构建了一个以前需要JavaScript才能工作的布局。 它是基于相等大小的正方形网格单元的布局，其中网格项可以在行和/或列轴上跨越一个或两个单元格。 换句话说，网格单元需要保持长宽比（在这种情况下为1：1），但实际的网格项不一定如此，如下所示： 克里斯·科耶尔（Chris Coyier） 在CSS Tricks上的一篇文章中探讨了Grid的长宽比，并记录了...
2020-07-02 10:45:24
659
翻译 不完善的arp解决方案_不完善
对于个人博客，不同的人对写作有不同的看法。 有些人花了很长时间来完善草稿，以确保所有内容都读懂了，没有语法错误，并且所有代码示例都是有用且完美的。 其他人则草拟草稿并尽快发布，然后担心以后再编辑。 我曾经在前一个营地，现在我越来越发现自己在后者。 毫无疑问，任何父母都会承认，自从我在2016年有了儿子以来，我的业余时间非常有限。 我下班回家，共进晚餐，和儿子一起玩耍，给他洗个澡，然后让他上床...
2020-07-02 10:35:24
121
翻译 2019年前端事件回顾_2019年回顾
我将尝试简短地回顾一下2019年的回顾展，但像许多人一样，我发现回顾当年的成就和失望（在后者上住的时间不宜太久）并为来年做好准备是令人陶醉的。 我宁愿避免为来年设定不切实际或无法实现的目标。 但是我确实想给自己设定一些小的，可以实现的野心和里程碑，如果我偏离目标，或者生活受阻，这不会使世界崩溃，但是会带来一些满足感的满足感明年这个时间之前。 因此，请原谅我略微放纵自己过去的一年。 这个博...
2020-07-02 10:25:24
135
翻译 css伪类和伪元素_在CSS网格中使用伪元素
本周，我遇到了几种情况，我需要构建一个具有全角图像，大标题和覆盖图像的半透明边栏的英雄部分，在该情况下，边栏会流到视口边缘，但是（重要的是）边栏的内容与我喜欢的“包装”网格列对齐，即我们实际要放置内容的网格列。 （我有一整篇文章都差不多写在这上面！） 这些天来，这似乎是设计中相当普遍的事情，并且似乎是使用伪元素（ ::before或::after ）作为网格的子项的最佳案例。 我的网格的...
2020-07-02 10:15:24
98
翻译 如何成为一个出色的演讲家_成为技术演讲者
在这篇文章中，我将简要介绍我平常CSS主题，以讨论成为技术演讲者如何帮助我发展职业生涯以及对自己作为开发人员的信心，以及如果您对此持怀疑态度，以鼓励自己您可以尝试一下！ 我为什么说话 在过去的一年中，我进行了五次关于CSS Grid和CSS变量的演讲。 在此之前，我曾做过一次一次性演讲，但仅此而已。 我去年决定开始谈论Grid的原因是因为我发现它是如此有趣，以至于我只想与所有人分享！ 在...
2020-07-02 10:05:24
117
翻译 盖茨比乔布斯_盖茨比简介
如果您还没有听说过， Gatsby是静态站点生成器中的最新热点。 尽管许多静态站点生成器（SSG）使用诸如Handlebars或Moustache之类的模板语言，但Gatsby使用React，有助于为其“快速发展”做出贡献。 以前从未使用过SSG（尽管我已经阅读过有关它们的信息），并且在React方面的经验非常有限，这比使用Gatsby发布我的全新博客（实际上是一个博客）， ！）？ 入门...
2020-07-02 09:55:24
169
翻译 css 不规则 路径运动_CSS运动路径的乐趣
我们通常会为开发人员使用大型旧JS库（例如GSAP ）提供沿路径动画的元素。 但是使用新的CSS运动路径模块，我们可以仅使用CSS来创建奇特的路径动画！ 我创建了一些有趣的小动画，这些动画与这些属性一起运行-我们将逐步介绍本文涉及的一些技术。 简单路径动画 要创建路径动画，我们需要使用offset-path以及要沿其进行动画处理的路径的值（语法类似于SVG路径），并对offset...
2020-07-02 09:45:24
1739
翻译 在Bristol JS上发表的关于超级布局的演讲
上周三，我很荣幸在Bristol JS聚会小组与资深演讲者，JS Whiz和网络音频先驱（也是我的朋友！） Ruth John进行新的演讲。 露丝（Ruth）在Web Workers和Worklets上做了精彩的演讲，其中包括lemmings和许多演示 ，这使我很高兴学习更多关于CSS Houdini和CSS Paint API的知识。 以前我只做过几次演讲，所以对于讲演讲，带有CSS网格和...
2020-07-02 09:35:24
153
翻译 初级开发人员的缺点_指导初级开发人员
上周我在Bath Digital Festival上发表了关于CSS网格和CSS变量的演讲。 我很幸运能够参加一整天的演讲，并观看了一些非常有趣的会议，涉及从组件开发（Jack Franklin）到使用数据作为创意材料（Mike Brondbjerg）到机器学习（Simona Cotin）的话题。 ）。 但是确实有一个话题对我很突出，因为这是我最接近的话题，而这就是塔拉·奥乔 （ Tara Oj...
2020-07-02 09:25:24
77
翻译 捍卫者usb管理控制系统_捍卫错误代码
前几天，我从Microsoft（原Mozilla）的Christian Heilmann看到了一条推文，这是Web行业和技术会议电路中的大牌： <button class =“ button button--主按钮--dark button--chromeless button--withIcon button--withSvgIcon u-padding12 u-borderRad...
2020-07-02 09:15:24
169
翻译 Pixel Pioneers 2019综述
上周，我参加了在我的本地布里斯托尔举行的年度会议Pixel Pioneers 。 在我的日历中，这已经很快成为一个确定的日期，而今年也没有令人失望。 实际上，我什至可以说它可能是迄今为止最好的一种。 由于工作上的承诺，我没有看到所有的演讲，但是我确实看到的演讲都是模范的，每个演讲都需要学习。 这是一些关键主题的简要概述，以及它们在当今网络环境中的位置： 修复这些UX错误 Craig ...
2020-07-02 09:05:24
106
翻译 svg web_为Web优化SVG
优化SVGs对于Web项目（可缩放矢量图形）具有减少文件大小，使它们更容易与工作的双重好处。 但是很多时候，我打开了一个Web项目，发现通过一些直接的优化，SVG资产可以大大缩小。 在本文中，我将分享优化SVG资产的过程，如果您是不熟悉Web上的SVG的设计师或开发人员，这可能会为您提供帮助。 我假设您已经被出售SVG而不是图标字体或PNG所带来的好处–但是如果您不满意， 这里有一篇很容易说...
2020-07-02 08:55:24
512
翻译 和一个单位的同事谈恋爱好嘛_如何成为一个好的同事
过渡到新团队不可避免地需要学习新的方法和流程，并且要适应同事的个性以及适应的先后顺序！ 我在Mud担任初级前端开发人员的前两个星期很有趣，很有趣，而且有时很有挑战性。 所以我想我会分享一些观察结果，以及从我参与过的一些以前的团队中学到的经验教训。 对新手好 每个工作场所都有不同的动力，需要适应不同的过程和程序。 特别是前端团队（有必要）由流程驱动，在第一天从事新工作时，很容易被所有新知识...
2020-07-02 08:45:24
388
翻译 网页无障碍_如何无障碍地分割文本
最近，我在Javascript库Splitting.js的帮助下发表了有关对可变字体进行动画处理的文章。 一些人问到了这种可访问性的含义，因此在本文中，我们将探讨为什么从可访问性的角度来看拆分文本字符串会带来问题，以及如何确保拆分后的文本每个人都可以使用。 Splitting.js回顾 假设您有一个单词，一个标题，一个段落或一个句子，并且想要逐个字母地更改样式。 Splitting.js...
2020-07-02 08:35:24
181
翻译 浏览器状态嘛_浏览器状态说明
查理·欧文（Charlie Owen），《浏览器状态》 我最近很高兴在伦敦的一个社区组织的网络会议“浏览器状态”中发言。 我在较大的舞台上进行了第一次技术演讲，谈到了CSS Grid和CSS变量-在过去的几个月中，我的博客中已经介绍了其中的一些内容。 我的幻灯片可以在这里找到。 该活动进行了一些精彩的演讲-我最喜欢的一些内容包括Ruth John对网络工作者的视听探索，以及Chr...
2020-07-02 08:25:24
185
翻译 2019fresco依赖_在2019年建立一个无依赖网站
我的新改进个人网站的屏幕截图 经过几年的基本无视后，我最近决定是时候刷新我的个人站点了 。 先前的迭代结合了Gulp和Bower，并结合了Susy（网格系统的Sass库）（版本2，而不是最新的版本3）。 我上一次进行此操作的时间大约是2015年，可以说我的工具已经过时了。 这只是不会在2019年削减。 我不想花很多时间为我打算成为一个非常简单的单页网站配置一套新工具。 我不打算使用Ja...
2020-07-02 08:15:24
140
翻译 用网格搜索选择svc_使用伪选择器控制剩余的网格项
我最近写了一些您可能想使用Grid而不是flexbox的情况 ，反之亦然。 我指出的一种情况可能是使用flexbox的一种更好的情况，那就是当您想控制未填充整行的任何剩余网格项的行为时。 由于此网格中只有10个项目而不是12个，因此我们可能希望控制如何显示最后两个项目。 在印刷界，段落末尾不占一行的单词称为寡妇 。 这些网格项目的行为类似，因此我在这里指的是它们。 （附带说明：CSS属性的...
2020-07-02 08:05:24
197
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人