现代 CSS

Airen的博客

Web中内嵌内容实现响应式效果

在响应式设计的网页布局中有一些元素没有发挥好,直接损坏响应式设计的布局。其中之一就是iframe元素,因为有时候你需要在页面中嵌入外部资源,比如说YouTobe的视频,这个时候就需要用到iframe元素。在这篇文章中,我将会向您介绍如何使用CSS将嵌套进来的内容具有响应式的效果,比如说视频、日历等能随着浏览器的视窗自动调整。那于在网站上嵌入外部视频,而你又不想添加额外的标签,我们也将会介绍如何使用JavaScript来替代CSS,让其在响应式设计的网站中能自动调整。

Sass:Mixin还是Placeholder

在大约一年半年前使用Sass的时候,有一件事让我花了很长的时间,那就是如何区别Sass的@mixin%placeholder。实际上,%placeholder。在当时的情况这之下,就算是概念对我来说都是黑色地带。如果你也碰到类似的情况,不用担心,因为我会尽量的引导你。今天我们就来探究,什么时候是定义好的,什么时候是定义好的。你就会明白它们服务的目的是不一样的,不能混为一谈。

Sass编写组件

很多开发者都认识到,在网站或应用程序的开发中使一些组件非常强大,但是这些组件开发起来并不是一件易事。今天我们就一起来探讨一下如何使用Sass来开发组件。因为讲述任何东西都没有直接拿用例来介绍更好,我建议我们要采用的示例是大家在网站或应用程序开发中几乎都有用过的,一个响应用户交互的——警告信息(也有很多人称之为“通知”)。使用Sass来创建一个处理不同类型的警告信息的组件是一个很完美的示例,同时还能提高你使用Sass的技术。所以,伙计们,还在犹豫什么,赶紧动手一试吧。

响应式设计、移动端网站与原生应用的优点和缺点

移动端的优化最近成了一个时髦的话题,将来也会有更多关于这方面的讨论。根据Mashable在2013年8月份发布的统计,可以得知,全球所有网站流量的17.4%都是通过移动设备来的,而这个数字在2014年将会继续增长。所以,你如果不想失去一杯羹的话,是时候步入移动端的领域了。

响应式网页字体图标

响应式设计中主要面对的问题之一是如何缩放图标来适应用户界面,不仅仅是针对于物理尺寸,而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下,都是通过内联块元素<img>标签来添加图标。另一种常见的技术是依赖于网格图标和状态——CSS Sprites,并将其保存为.gif.png文件。然而,更糟糕的是图片根据响应式内容不断的放大,对于位图图像会产生锯齿,而且会越明显。更糟糕的是,CSS Sprites(雪碧图)制作的图标更无法轻意的缩放。

Web设计中的CSS混合模式

作为一名前端人员,对一些制作软件并不陌生,而里面的图层混合模式都略有所知。而这些混合模式要是直接应用到Web页面中,将会带来网页制作的一个变革。在2014年开始,在互联网上已经开始在讨论这个东东,并且有一个专业的名词“CSS混合模式”。而这个模式在SVG规范中得到支持,并且在CSS规范中也开始提上议程。在不久的将来,这个新特性就能在各大主流浏览器上得到应用。在文中主要介绍了CSS混合模式将是Web设计中一个重大的变化。并且我们也将陆续向大家推出CSS混合模式相关教程,希望对大家有所帮助。

2014年前端将会发生什么

在过去的几年中,Web开发者被迫接受了几大变化:HTML5的兴趣,预处理器的出现JavaScript框架,结合一个庞统的一系列技术的变革,推动了整个设计的趋势。在很短的时间内,移动响应式设计,扁平化(Flat Design)用户界面和深层次的交互页面成为标准做法。那么在2014年Web前端又将会发生什么?如果您对这个话题感兴趣的话,欢迎进入一起讨论与分享。

使用calc()创建CSS网格

网格系统对于Web前端人员来说不是一个陌生的话题了,在w3cplus上介绍网格系统的教程并不少,不过这些网格系统都有其类似之处。在HTML中为了能应用好网格,都需要添加一些类名,而在样式中,不管你用了几列网格,都有一大串的样式代码。这让一个有代码洁癖的人员来说,总觉得不爽。幸好,CSS预处理器的出现,如Sass。可以让你的代码变得更简单一些,但和以前的网格也极其类似。有时试想,有没有更好的呢?今天看到Create a CSS grid using calc()觉得很有意思,通过calc()和Sass的结合,生成需要的网格。希望此篇文章对大家有所启发。

Flexible Images

玩过响应式设计的同学或多或少都会在一些媒体上纠结,比如说图片,视频等自适应问题。而且有关于这方面的解决方案各有各的说法,似乎是没有一种方案是绝佳的,这样一来让人倍感头痛。这或许就是前端的烦恼吧。我也一样,虽然整响应式设计蛮久的了,但对于图片方面的自适应处理还真没有找到一个好的方案,这回痛下决心,仔细找了一些相关教程阅读了一回。那么今天将整理一下,网络上有关于图片自适应(此处我称之为弹性图片)解决方案,希望这篇文章能帮助大家解决图片在响应式设计中给大家带来的烦恼。

Sass3.3新特性之连体符&

Hugo Giraudel在《Looking Into the Future of Sass》(译文Sass新特性)一文中向大家介绍了Sass的十大新特性。这些特性都将让你的工作变得更简单与方便。那么今天我主要想向大家介绍我自己对Sass3.3中几个新特性的理解与使用心得,希望对大家的学习有所帮助。

页面

返回顶部