现代 CSS

博客

纯CSS3制作满屏图像幻灯片

记得前段时间在《完美的页面背景图片制作》介绍了几种实现全屏背景图片的制作方法,其中第一种就是使用的CSS3的background-size来实现的。今天看了Mary Lou (Manoela Ilic)写的一篇有关于全屏背景图像的幻灯片效果的教程《Fullscreen Background Image Slideshow with CSS3》,觉得特有意思,同时勾起了我动手的冲动。

网站设计的黄金比例应用

记得以前读书时有一个黄金分隔线,今天在网站上看到一些有关于这个黄金比例在Web设计中的应用,觉得很有意思,于是在GG中寻找了这方面的相关资料学习了一回。个人觉得有必要了解一下,如果你对这个也感兴趣的话,不仿跟着我一起往下阅读。

十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行。今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的“position”中的“static、relative、absolute、float”使用,觉得蛮有意思的。整理了一下贴上来与大家一起分享。希望大家能喜欢。

在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考:

HTML Markup

表单button的outline问题

outline的使用,大家都喜欢在reset样式表中直接重置:

    * {
      outline: none;
    }
  

Eric Meyers在他的CSS Reset是这样重置的:

表单button的text-indent问题

昨天在《表单button的行高问题》一文中简单的描述了一下表单中的“button”(包括input[type="submit"]/input[type="reset"]/button)行高在Firefox和Opera中不以按设置值解析。今天我想和大家一起来说表单中“button”的“text-indent”属性在IE中的bug。

首先我们来看一个实例:

HTML Markup

    <input type=”submit” value=”Submit” id=”btn” />
  

CSS Code

表单button的行高问题

昨天下午@为之给我发了一个有关于buttonline-height问题的文章——《The Firefox Input Button Line-Height Bug》。看后明白了许多,顺便整理了一下,与大家一起知道这个问题。

下面我们先来看一个Demo的实例:

HTML Code

    <input type="submit" id="button" value="engage"/>
  

CSS Code

Responsive设计的关键三步

最近一直在学习这个Responsive设计相关知识点,前面我在本站陆续发布了与“Responsive”设计的相关教程:

CSS3制作 Progress Bars

Progress Bar直译过来就是“进度条”,也就是说今天要和大家一起探讨进度条的作方法。我想进度条大家都有看到过,而且还随处可见,他们表示的是某个过程,显示目前完成状态。最常见的是文件的上传和下载,有一个动态的进度条,通过这个进度可的动态变化告诉我们文件上传或下载的完成程度。换而言之,无论在某一个点或一个桌面程序,或者说我们的Web应用程序或,我们都需要使用到进度条的UI制作。那么在这篇文章中,我和大家一起来学习如何使用CSS3的相关属性来创建一个时尚的、动态的进度条,而且还将扩展一部分jQuery代码,让其从0至100%动态完成。

我们首先来看一看下面的DEMO效果:

下面我们针对上面的DEMO来说说其制作过程。

CSS选择器的优化

前面花了几个篇幅着重介绍了CSS的选择器的使用,我将其分成三个部分:CSS基本选择器CSS属性选择器以及CSS伪类选择器。那么今天我主要想和大家一起来学习——CSS选择器方面的性能优化。因为对性能这一块一直都是很弱的,所以今天先从选择器开始入手,加强自己。如果你也感兴趣那就跟我一起来吧。

了解Responsive网页设计的三个特性

页面

返回顶部