• 工作中遇到的特殊CSS布局
    点击上方“前端教程”,选择“星标”前端干货第一时间送达!作者:BrownBearhttps://juejin.im/post/5d23380cf265da1b971a9899日常开发中,设计师总会提出各种奇思妙想的需求,为我们的UI还原工作带来很多挑战。虽然有时确实会让我们花蛮多时间去实现,但从一方面想这也是个机会,让我们更深入了解的浏览器布局方式。本文主要记录之前工作中遇到的特殊布局,都是通过CSS方式去实现。多条件留白布局图中有两个内容块A和B,他们宽度取决于内容宽度,左右侧留白有max-width: ...
  • 【免费送书】小白也能学会的Webpack 应用瘦身技巧
    作者 | 居玉皓对大多数 Web 应用来说,页面性能直接影响着流量。这是一个经常为我们所忽视的事实。用户长时间的等待流失的不仅仅是跳出率、转化率,还有对产品的耐心和信赖。很多时候我们没有意识到性能问题,那是因为平常开发使用的都是高效的设备和网络。而到了真实世界中却会发现,实际用户的网络环境会更加复杂,而如果使用的是移动设备的话,有限的计算能力也会拖慢代码的解析执行,这些都会影响页面的渲染效率。Web 应用的加载速度很大程度上取决于资源的大小,下面是 Youtube 桌面端页面通过 PageSpeed Ins...
  • 卡牌特效: svg不规则倒计时动效
    导语:直播过程中,往往会有各种动画特效增强直播效果,近期需求中,设计要求在企鹅电竞PC官网上实现一种卡牌效果,在不规则图片上叠加倒计时效果。前端项目中,往往使用css来完成动画,像倒计时效果也可以使用css完成,但是相对来说css实现方案比较复杂,层次嵌套较多。倒计时动效要求覆盖图片的倒计时阴影为非规则且半透明的。在日常的圆环动画中,也会有类似的倒计时效果,只不过圆环是规则的,实现起来比较简单。但是基于圆环效果,再加上svg的mask特性,就可以实现此类特殊效果。[ 实现动态图] css的mask属性可以切...
  • 温故而知我不懂的CSS
    点击上方“前端教程”,选择“星标”前端干货第一时间送达!作者:落落落洛克https://juejin.im/post/5d2c7519e51d4550bf1ae91b❗️我们是否想过没有CSS对HTML标签元素的影响,那么我们的标签在浏览器是什么样形式存在的?CSS对HTML标签元素到底产生了什么影响?又做了什么规则限定?来聊聊吧!!!CSS 作为一门标记性语言,但是它的简单易学,很多开发者都不知道它是一门语言,语言的东西必定具备诸多概念,但是我们会往往忽略这些概念,确实,就算你不知道这些概念,你仅仅知道这...
  • 前端,是一种GUI软件
    来源 | https://github.com/fouber/blog/issues/10“喂喂喂,那个切图的,把页面写好就发给研发工程师套模板吧。”“你好,切图仔。”不知道你的团队如何定义前端开发,据我所知,时至今日仍然有很多团队会把前端开发归类为产品或者设计岗位,虽然身份之争多少有些无谓,但我对这种偏见还是心存芥蒂,酝酿了许久,决定写一个系列的文章,试着从工程的角度系统的介绍一下我对前端,尤其是Web前端的理解。只要我们还把自己的工作看作为一项软件开发活动,那么我相信读过下面的内容你也一定会有所共鸣。前...
  • 如何编写轻量级 CSS 框架
    作者 | 叙帝利链接 | www.cnblogs.com/nzbin/p/7073601.html前言这篇文章我已经酝酿了半年之久,或者说拖沓了这么久吧。想说的东西很多,却又无从说起。如今轻量级框架如雨后春笋,层出不穷。我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。在之前的文章中,我提到了面向对象的 CSS(比如 BEM、OOCSS、SMACSS,详见  http://vanseodesign.com/css/dry-principles/)。这是一种思想,并不涉及具体的 CS...
  • 这7款便捷实用的CSS3工具,你知道几款?
    作者 | 杨小二来源 | web前端开发(web_qdkf)俗话说,三分手艺,七分家伙,在开发的路上,学习使用好的家伙,也是非常重要的一步。今天小二给你们分享的这几款好家伙,也是我自己在平时学习工作中用的比较多的,现在把它分享给你们,希望你们也能够用起来,如果你手中也有一些好家伙,也记得跟我分享一下,你可以在留言区告诉我。我跟大家分享的好家伙来了~01、CSS ARROW PLEASE地址:http://www.cssarrowplease.com/CSS ARROW PLEASE 是一个在线生成气泡的工具...
  • 为什么我的网站那么慢?
    译者 | 边城首发 | 开源中国(id:oschina123)前言:Web 性能优化当今数字世界,存在着无数的网站,每天都需要处理各种不同的原因的访问。然而,这些网站中有很大一部分显得笨重,加载慢,使用起来也很麻烦。没怎么优化的网站会被各种各样的问题困扰,包括加载时间、不支持移动设备、浏览器兼容性问题,等等。这篇文章提出 8 个技巧,针对Web性能差这一问题提出解决方案,提高网站的性能,让你的网站快起来。网站加载速度慢有很多原因,代码繁杂、资源处理不当等,针对这一系列问题,我们也有对策:清理代码、压缩图片、...
  • 你未必知道的49个CSS知识点
    作者:老姚,《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。需要说明的是,顺序仍是按当时发布顺序罗列的,还没有系统的总结,多多包涵。另外这里,老姚谢谢各位一如既往的支持。😘😘😘01.【负边距】💘负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似02.【sh...
  • CSS大会 | 打破常“规”:挖掘语法解析器规则漏洞
    2019年7月30-31日,第五届互联网安全领袖峰会(CSS 2019)在北京开幕。作为前沿技术安全研究团队代表,Tencent Blade Team两位高级安全研究员受邀登台,探讨如何挖掘语法解析器规则漏洞。许多基础软件中都包含有语法解析部分,一旦出现规则漏洞影响,范围极大,而这块领域的安全研究相对较为缺乏,此次Tencent Blade Team对如何挖掘语法解析器规则漏洞做了从理论到实战的详细分析,并提出了如何编写安全的规则建议。Tencent Blade Team由腾讯安全平台部成立,专注于物联网,...
  • 你未必知道的49个CSS知识点
    作者:老姚,《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。需要说明的是,顺序仍是按当时发布顺序罗列的,还没有系统的总结,多多包涵。另外这里,老姚谢谢各位一如既往的支持。????????????01.【负边距】????负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上...
  • 20个让你效率更高的CSS代码技巧
    在这里想与你分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。1.注意外边距折叠与其他大多数属性不同,上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另一个元素的上边缘时,只会保留两个margin值中较大的那个。例如:HTML<div class="square red"></div><div class="square blue"></div>CSS...
  • 19中存css实现的loading动效
    演示地址 https://wow.techbrood.com/fiddle/29490 Html 部分 <h1>CSS LOADERS</h1> <div class="box">loader 1 <div class="loader-01"></div> </div> <div class="box">loader 2 <div class="loader-02"></div> </div> <div class="box">loader 3 <div class="load...
  • 18个强大的纯CSS3动画案例分享
    编辑整理 | web前端开发在之前,我也分享过很多关于CSS3,HTML5的动画案例,今天我要与你分享的这18个动画案例,也是比较炫酷的,可以实现很多交互,这些CSS3动画,可以给你的网页增添不少趣味性,让其更加生动。以下,就是我今天将与你分享的18个非常炫酷的CSS3动画案例,希望你会喜欢。1、纯CSS3实现烧烤动画这个CSS3动画相当有创意,动画中所有的烧烤元素都是利用CSS3绘制而成,冒出的烟雾也是由CSS3动画实现,相当酷。2、超经典的CSS3磁带动画这是一个CSS3磁带动画,整个磁带也是由CSS3...
  • 你所不知道的 CSS 负值技巧与细节
    写本文的起因是,一天在群里有同学说误打误撞下,使用负的 outline-offset 实现了加号。经过一番尝试,修改上述 div 的 outline-offset为 -118px。div { width: 200px; height: 200px; outline: 20px solid #000; outline-offset: -118px;}加个动画效果,大概是这样:CodePen Demo -- 使用outline实现加号很有意思,我尝试了很多不同的情况,最后总结了一个简单的规律,要使用负的 outline-offset 生成一个加号有一些简单的限制:容器得是个正方形outline 边框本身的宽度不能太小outline-offset 负值 x 的取值范围为:. - < x < -在这个例子后,我又想,CSS 属性可以取负值的地方有很多。下文就再介绍一些 CSS 负值有意思的使用场景。
  • 2019年大前端技术趋势分析(下篇)
    在上一篇文章《2019年大前端技术趋势分析》中已经介绍了大前端关于状态管理、UI组件、小程序、跨平台和框架层的内容。结合个人和团队经历对2019上半年做个技术总结,将各类技术框架/语言/工具分作两个维度:技术采用生命周期技术方向编程语言来自statesofjs的统计,在类JS编程语言上,ES6遥遥领先,TypeScript也获得接近半数的使用量。在2019 stateofcss也有关于CSS特性使用情况的统计,每个特性的外圈代表听过过的数量,内圈表示真正使用过的数量。
  • 12 个令人惊叹的 CSS 项目
    如果你对太空场景情有独钟,那么一定会被这个 CSS 实现的太阳系动画所震撼。Francine 就是一个纯 CSS 制作、展示的 18 世纪风格的绘画作品。或许,你会惊讶 CSS 实现的效果竟能如此逼真。不用那么复杂,纯 CSS 就可以搞定。它的灵感来源于 CSSgram。最后利用 JS,我们能实现各种让人惊叹的页面/动画效果,但 JS 并不是最轻量的解决方案。
  • CSS混合模式
    在CSS中我们可以通过background-blend-mode和mix-blend-mode来应用混合模式这一强大的效果。示例demo链接可点击跳转,可以分别选择不同的混合模式来应用效果。除了常规模式,一共有15种混合模式,想要准确地记住所有模式的原理其实比较困难。所以我们可以将其简单分为几类,当我们需要某一类效果时,可以直接缩减范围,尝试满足这一类效果的混合模式。注意,当存在多背景时,background-blend-mode混合模式的顺序与background-img属性一致。如果混合模式的值长度小于背景图的值长度,则会重复混合模式的值,循环匹配。
  • css加载会造成阻塞吗
    点击上方“蓝字”带你每天阅读全栈前端精选好文可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,css加载会阻塞DOM树渲染。因为你加载css的时候,可能会修改下面DOM节点的样式,如果css加载不阻塞DOM树渲染的话,那么当css加载完之后,DOM树可能又得重新重绘或者回流了,这就造成了一些没有必要的损耗。由上面的推论,我们可以得出,css加载不会阻塞DOM树解析,但是会阻塞DOM树渲染。这也就说明了,css加载会阻塞后面的js语句的执行。
  • CSS预处理语言的模块化实践
    最理想的情况是,所有的模块都寄存在一个公共的库里,哪里需要用到就从库中直接调过来。这个美好的愿望不是不可实现的,借助预处理语言,我们可以很轻易地完成这事情。预处理语言是一种类css的语言,我们知道css本身不是语言,而预处理语言的诞生,就是为填补这一部分语言功能。目前流行的预处理语言主要有两种:less和sass。我比较常用sass,所以以下内容都是以sass为基本语言做介绍,两者在特性上有很多相似的地方,所以大家不必担心实现上有什么千差万别。在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错。
官方公众号
活跃用户
《科技日报》是富有鲜明科技特色的综合性日报,是面向国内外公开发行的中央主流新闻媒体,是党和国家在科技领域的重要舆论前沿,是广大读者依靠科技创造财富、提升文明、刷新生活的服务平台,是中国科技界面向社会、连接世界的明亮窗口。
让创业者不再孤独@i黑马
凤凰科技频道官方账号,带你直击真相。
数字生活家,手机新娱乐
腾讯新闻旗下腾讯科技官方账号,在这里读懂科技!
普及数据思维,传播数据文化
定期推送python基础,开发框架,数据库,前端,linux等相关知识,致力打造一个实用的推送平台,希望能够成为大家的宝典.
分享最有价值的互联网技术干货文章,AI、Python、Java、Android、iOS、前端、后端等,助力您成为有思想的全栈架构师,聊架构,聊职场、聊人生!打造最有价值的架构师圈子和社区,助力你的个人提升和发展~
讨论和学习C/C++编程知识,分享C语言和C++开发相关的技术文章和工具资源
分享编程思想、职业发展、个人见解。
阿里巴巴官方技术号,关于阿里的技术创新均呈现于此。
记录工作,生活的地方。
推崇基础学习与原理理解,不谈大而空的架构与技术术语,分享接地气的服务器开发实战技巧与项目经验,实实在在分享可用于实际编码的编程知识。
最有价值的架构师圈子和社区,我们分享各种互联网架构技术干货,探讨架构设计和实战经验,不定期送书、分享学习资料与面试题等。关注学习,早日成为架构师。
通俗易懂,用大白话、幽默风趣地讲解web前端知识,让每个新手入门无难度
分享Web后端开发技术,分享PHP、Ruby、Python等用于后端网站、后台系统等后端开发技术;还包含ThinkPHP,WordPress等PHP网站开发框架、Django,Flask等Python网站开发框架。
你的健康生活小助手,预约挂号老朋友。
专注年轻人的AI学习与发展平台
感谢订阅,我叫杨钊,也叫big banana,大家都叫我大蕉。技术探针一枚。主要分享最近关注或者将要关注的东西。万一能对您有一点点的帮助那就更好了。
TechWeb专注于互联网消费领域,每日专业提供互联网产品、智能设备及互联网服务等方面的最新资讯。