发布于

    使用CSS3的appearance属性改变元素的外观

    前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。那么今天在这篇文章中我们一起来体会一下“appearance”的使用。

    作者:大漠
    阅读全文
    发布于

    CSS3的calc()使用

    calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog,希望对大家有所帮助。
    作者:大漠
    阅读全文
    发布于

    Responsive Web Design

    上次花一天的时间写了一篇《Responsive设计的十个基本技巧》,在这篇文章中主要向大家介绍了Responsive设计的十个基本技巧,其中涉及的面也非常的广,一时理解或者说学习起来还是有一定的难度。有些初次听过Responsive的或者初次接触Responsive的同学还是有点难度,为了能帮助大家进一步的了解和学习Responsive,今天我为大家整理了一篇《Responsive Web Design》,这篇文章主要从几个内容引导大家如何学习Responsive设计。希望对大家有所帮助。

    作者:大漠
    阅读全文
    发布于

    走向视网膜(Retina)的Web时代

    Retina对我来说是一个全新的概念。初次接触还不知道是什么意,后来翻译后才知道“视网膜”,在互联网上海量搜索一翻,这是我们前端的一个新知识点——视网膜Web。的确是个NB的新事物,我一开始看简直不知道是什么东西,后来慢慢的看了一些专业术语,结合业务的高人写的博客,总算是对其有一点点的了解。同时把这几天看的东西做了一下学习笔记,希望对一些新接触 Retina的同学有许些的帮助。(因为自己对这一块知道的不多,有可能有写错的地方,希望这些地方不会误人子弟,罪过罪过),更希望有错的地方能得到同行朋友的指正。

    作者:大漠
    阅读全文
    发布于

    image-set实现Retina屏幕下图片显示

    最近一直在学习Retina屏幕下图片的处理方法,从《走向视网膜(Retina)的Web时代》一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在《移动Web——CSS为Retian屏幕替换图片》和《使用css sprites来优化你的网站在Retina屏幕下显示》中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来《Web设计师如何制作Retina图像》学习了Retina屏幕下的图片制作技巧。其实可以说,这几篇文章可以让我知道如何在Retina屏幕下处理图片的技巧和细节了。因为这几篇文章从概念到制作Retina屏蔽下的图片,以及Coding实现,可以说是一条龙了。这些都是自以为事,为什么呢?除了这些方法,其实还有更先进的方法,这也就是我接下来要说的事情了。

    作者:大漠
    阅读全文

    iPads和iPhones的Media Queries

    CSS3 Media Queries是一个强大的媒体查询功能,他的出现使用我们的站点可以随着不同的设备展现出不同的样多风格。紧随着Responsive设计的出现,Media Queries的功能是越来越得到前端人员的亲眯。

    我也不另外,跟着这股时尚流行风,从接触到学习,紧接的到应用,对这个属性有了基本上的了解和实战经验。为了大家方便使用Media Queries,W3cplus通过互联网的搜集整理了一份CSS3 Media Queries模板。随着移动端上的应用越来越多,特别是苹果公司的系列产品型号的增加,给前端人员对Media Queries的运用带些许的麻烦。为了解决这个麻烦,在互联网上搜集了相关的资料,专门针对苹果的iPads和iPhones的Media Queries模板,希望这些模板能帮助大家减少在网上查找的时间。

    作者:大漠
    阅读全文
    发布于

    Clip

    Clip属性是大家经常会误解的一个属性,这篇文章帮助大家充分的了解和学习clip属性,用这个属性制作出更好的效果。如果你不知道也不用担心,接下来的内容将会涵盖clip属性的各个方法。详细阅读这篇文章,你将对clip属性有一个很深的了解。Clip属性在W3C官网是这样进行描述的:“通过对元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了clip属性”。

    作者:大漠
    阅读全文