博客

如何使用JavaScript构建模态框插件

作为一位Web开发人员而言,模态框(Modal)并不会陌生。就我个人而言,我更为熟悉的是怎么通过CSS来编写一个模态框以及怎么通过CSS给模态框添加一些动效。正好最近工作中也和Modal框杠上了。另外想更好的设计一个模态框用来满足业务需求的普遍性和实用性,甚至是达到可配置性。所以一直在探究模态框相关的知识,同时正好看到了@Ken Wheeler的教程,对于我这样的菜鸟,能很好的了角如何使用原生的JavaScript来构建一个可用的模态框插件,另外为以后如何使用Vue构建更为灵活的模态框组件打下坚实的基础。如果你对该文章感兴趣,或者你也正在加强JavaScript的学习和实战,欢迎继续往下阅读,或许对你有所帮助。

聊聊《重学前端》

这两天票圈被@Winter大大在极客时间平台推出的《重学前端》刷屏了,而且在微信群和知乎上都有相关讨论。讨论中各种声音都有,可算是热闹了。今天我也凑个热闹,来聊聊我对这个课程的看法。

图说 CSS:CSS 的值和单位

CSS 的值和单位是 CSS 另一个独立功能模块,到目前为止,该模块已到了 Level 4 阶段(CSS Values and Units Module Level 4)。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说,对于 CSS 中的值和单位应该不会感到陌生,但大部分同学应该都会把精力集中于单位这一块,事实上也是如此,在这篇文章中,我们所涉及到的大部分内容也是聊单位这一块,对于值这一部分只会花一点点内容略为带过。

如何通过CSS自定义属性给CSS属性切换提供开关

CSS自定义属性相关的教程在互联网上可以说是铺天盖地,从简单的介绍,到使用指南的整理,以及相关的经验之谈等等。时至今天而言,CSS的自定义属性是一项很成熟的CSS特性,在很多方面都可以给前端开发者带来诸多的益处。而且在现代浏览器中也得到了较好的支持。当然,虽然CSS自定义属性已得到很好的支持,但很多同学还在担心其是否可以运用于生产环境,甚至也有不少的同学还在排斥该特性。虽然如此,我还是想花点时间再和大家聊聊今天的主题。这个主题来自于@Ana tudor大神在去年年底发布的两篇文章,可以说是把CSS自定义属性运用的淋漓尽致。

currentColor与CSS自定义属性之间的差异

变量对于CSS而言是这两年大家关注的一个话题。对于变量而言,最早是出于CSS的一些处理器语言当中,比如Sass、LESS之类的。随着CSS的发展,变量的概念也被引入到CSS中。时至今日,在CSS中的变量不被称作变量,而被称为CSS自定义属性。该特性让我们维护CSS、编写CSS变得更易。而事实上呢?在CSS最早的变量之一是currentColor。该特性也可以更好的帮助我们编写CSS和扩展CSS。那么今天我们来开另一个话题,currentColor和CSS自定义属性又有何差异呢?接下来的内容,我们就来一起探讨这方面的细节。currentColor和自定义属性之间还是存在一些有趣的区别。这两个都是CSS中动态属性的例子,但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同,接下来的内容将向大家揭开。

FLIP技术给Web布局带来的变化

用户界面是最直观的呈现给用户,而其中动画在这方面又扮演着重要的角色。正如@Nick Babich所说:动画将用户界面带入生活。而且,UI动画在用户体验方面也是重要的一环。特别是移动端开发的同学更清楚这一点。移动应用中的UI动画是体验的核心部分之一,而不是事后的想法。可是呢?事实上我们经常遇到的Web运用程序或App只是从一个视图跳到另一个视图,并没有给用户足够多的时间来处理当前环境中刚刚发生的事情。同时,很多同学都认为,动画通常在用户体验方面仅仅是锦上添花,并且被认为是不必要的、过渡的或太复杂的,无法实现的,也是因为这些原因,UI动画在很多Web应用中被忽略了。更糟糕的是,缺乏意义的动画会给自己产品体验方面带来损害。

初探CSS对象模型(CSSOM)

今年花了不少的时间在学习DOM相关的知识,经过这段时间的学习,可以通过一些JavaScript的API操作和处理Web页面上的HTML元素。在Web中除了DOM之外还有另外一个对象模型:CSS对象模型(即CSSOM)。或许你已经在项目中已经用过了,只不过没有意识到这一点而以。今天这篇文章中,我们主要来一起探讨有关于CSSOM相关的特性。

CSS的逻辑属性对盒模型带来的变化

在《理解CSS的逻辑属性和值》一文中,我们对CSS逻辑属性和值(CSS Logical Properties and Values Level 1)有所了解。事实上对于广大前端开发者而言,自从Web诞生以来,就习惯了使用用物理CSS属性。比如上、右、下和左,映射到CSS的盒模型就是marginpaddingbordertoprightbottomleft设置元素。但随着CSS的书写模式特性的出现,的概念在某种程度上已经失去了其意义。

Vue 2.0学习笔记:Vue的animation

上一节我们学习了Vue 2.0中的<transition>实现元素从状态A到状态B的过渡效果。对于元素过渡的效果是通过CSS的transition来完成,具体什么时候执行是由Vue来控制的。而transition的效果毕竟有所限制,对于一些复杂的动效,还是需要通过别的方式来完成。在Vue中除了transition之外还可以完成animation的效果。也就是可以将CSS的animation运用到Vue中来,实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的animation

CSS中的函数

大家都知道,CSS只是一个声明式的语言,主要为标记语言服务。很多程序员鄙视它,有一部分原因是CSS并不像其他程序语言一样,具有一些逻辑能力以及函数功能等特性。随着CSS的不断变革,其慢慢地也变得越来越强大。时至今日,CSS中也有具有函数和运算相关的能力。比如我们今天要聊的CSS函数。在CSS Values and Units Module Level 4中把函数标记(Functional Natations单独提取出来做为该规范的一部分。而这部分主要介绍了一些具有数学计算能力相关的属性值,比如大家熟悉的calc()和不怎么熟悉的min()max()。而我们今天要聊的是CSS中的函数,其中就包括这些部分。如果大家感兴趣,欢迎继续往下阅读。

页面

返回顶部