现代 CSS

博客

Sass函数功能——rem转px

性能对于Web前端开发人员是必备的一项技能。CSS3和HTML5的新特性帮助我们改善了应用程序,但有时这些特性并没有得到很好的支持。这就是优雅降级。你想在新的浏览器中使用这些特性,但不能忽视对传统浏览器的支持。我最近开始在做一个新的项目,他必须要支持IE8。由于级联问题的嵌套,使用EM单位时不好把控,所以我决定在这个项目中开始使用有用的rem单位,这样更容易理解和维护。这种方法的主要问题是IE8不支持rem单位。最后,我们需要针对于这种情景创建一个后备方案:使用px单位做降级处理。

CSS3 Object-fit和Object-position

RWD设计中图片、视频、iframe元素的根据不同设备分辨的响应是令Web前端开发师最为头痛的问题,目前的种种解决方案都并不是一种完美的解决文案。另外很多时候在Web中,产品展示,发布的图片尺寸都不一定一致,致使我们需要通过一定的程序或者手工修改,以达到一种较为完美的展示方式。这些工作对于我们来说都是一种隐形的开发成本。不过,值得庆幸的是,CSS3提供了两个新的属性object-fit和object-position可以很好的帮我们实现图片的长宽比例,并且能快速响应。只不过到目前为止,支持的浏览器为数不多,但我们应该相信,技术是向前发展的,总有一天,这两个属性会广大的前端开发人员提供便利。如果您对他们感兴趣,不仿花点时间阅读一下。

如何设计一个响应式的HTML电子邮件

在过去的几年中,移动端使用的飙升,使我们向网络用户提供内容的方法引起了一场进化或者革命。最终目标是流体的,适应移动端和device-agnostic Web以及一个已成为受人青睐的学派:响应式设计。然而,虽然响应式设计思想高涨,而电子邮件设计和开发一直在努力跟上。在某种程度上,HTML电子邮件对开发者而言是一个异常复杂的介质,这是一个铁的事实。古老的电子邮件客户技术无法呈现现多的许多的规则,致使一些代码无效。但电子邮件仍然是一个关键的营销渠道,这非常的重要,不能让人忽视的是2012年上半年Litmus公布了一个在移动设备上打开电子邮件的报告,报告显示使用移动设备查阅电子邮件增加了80%。同年Campaign Monitor显示,第一次他们的移动电子邮件打开率实际上已经超过了桌面和Web邮箱。

响应式电子邮件设计

自从Ethan Marcotte在2010年5月25日发布的《A List Apart》文章开始,响应式网页设计(RWD)讨论的热度并没有减少,但在相同的时间内我们构建电子邮件的方式并没有太多的改变。值得庆幸的是,在过去的一年,人们开始使用RWD和运用类似的方法来设计电子邮件。

开始制作HTML Email

向用户发布最新的更新、业务或产品,HTML电子邮件是一个最好的方式,但他们有点棘手。电子邮件客户端对CSS的支持不一致。因此我们必须借助于老的技术,如使用表格和内联CSS。今天,我将不可的大家一起创建一个简单的HTML电子邮件。作为Web开发人员,编写HTML电子邮件是一件非常具有挑战性的任务,我们也必须得处理。幸运的是,当我的第一个客户要求我设计和编写一个HTML电子邮件的通知,他耐心的陪我渡过整个编写过程,让我明白了编码HTML电子邮件的一切。你可能不会有我那么幸运,所以本教程可以帮你做好一切的准备。

HTML Email Boilerplate

处理HTML电子邮件将是考验人的耐心。看似小格式问题无法避免地出现,你认为自己:“我是一个优秀的Web开发人员,我甚至擅长HTML5/CSS3,我可以很好的解决这些问题”。几杯咖啡时间之后,你开始发狂,你在开始考虑给大家做什么,提供一个{这里填写空白的电子邮件客户端}。HTML Email Boilerplate可以做出很好的说明。Boilerplate为您提供一些例子和有用的技巧,保证您的电子邮件设计尽可能的在电子邮件客户端正常渲染。您可以使用Boilerplate做为您创建电子邮件的起点。或者,如果你是高级用户,你可以选择里面你需要的片段做为您需要的。

HTML Email Boilerplate源码阅读

这篇文章主要是来阅读HTML Email Boilerplate模板的源码,以及扩展其相关的知识点,帮助大家更好的理解EDM模板的设计与开发。首先这是一个HTML电子邮件模板,这里的代码及示例代码是创建一个没有设计或布局的模板。他主要作用就是帮助你避免一些最常见的电子邮件客户端(如,Gmail,Outlook和Yahoo邮箱等)渲染时引起的主要问题。虽然不是可以直接插入使用(你知道的,你必须要做一些事情。),但它提供了一些非常有用的例子和代码片段,这些都可以帮助你设计和开发的HTML电子邮件在邮件客户端上能得到更好的渲染。

CSS3 3D Transform

早前2011年5月就在站上写了一篇《CSS3 Transform》介绍CSS3中Transform属性的简单应用。但这篇文章里的知识无法满足大家对Transform的一个全面认识,最近重新整理了一个Transform系列的文章,希望对初学者有所帮助。前几天介绍了《CSS3 Transform——transform-origin》、《Transform-style和Perspective属性》和《CSS3 2D Transform》。今天是这个系列的最后一篇——CSS3 3D Transform。

HTML电子邮件应该知道的一些事

电子邮件是一个非常不错的媒体。它可以直接进入收件箱和ROI广泛的报到可达到4000%。它也是永远被误解和经常做得不好。最近智能手机的爆增,我们更常使用iPhone和Galaxy阅读我们的电子邮件,但不幸的是很多电子邮件营销却不能跟上。我认为这是一个大好机会,因为一个好的电子邮件可以轻松打开和取得巨大成功。

从头开始构建一个HTML电子邮件模板

EDM模板向来都是Web开发人员不想面对的事情,虽然在站上发布了一系列有关于EDM制作的教程,但很多人都只是略带而过,并没有亲手去实践。也就说都停留在理论的基础上,也并不知道这些理论是否正确。然后最好的理解方式就是自己动手,从头开始实战一回。如果你想实战,那么机会来了,今天我们一起跟随的《Build an HTML Email Template From Scratch》中的用例,一步一步,手把手的教你制作一个EDM模板。让你更好的理解EDM模板如何制作,希望大家喜欢。

页面

返回顶部