`
taro
  • 浏览: 136549 次
  • 性别: Icon_minigender_1
  • 来自: 东京
社区版块
存档分类
最新评论

苹果官网CSS3应用案例分析

    博客分类:
  • CSS3
阅读更多

文章出自本人博客:http://www.tarobjtu.com/blog/apple-site-css3-analysis/

 

      今天苹果在WWDC2012发布了全新Macbook Pro,迫不及待去官网围观,一睹笔记本芳容,结果哈喇子掉一地...【买不起,却各种浮想联翩,骚年的节操掉了一地...】 苹果不仅硬件设备做到了极致,官网也做的精炼之极。

      见到不同寻常的地方就习惯性点击键盘F12,窥视代码构造...

      本文详细介绍CSS3实现图片底边弧形阴影效果

                                          

      上图为主页左下角MacBook Air图片,乍看去红圈内的立体阴影若似图片的一部分,查看源码后却大吃一惊——这丫效果居然是用CSS3实现!苹果的精美设计体现在各种细节之中,佩服之极!

      阴影往往被用来实现标签的立体效果,CSS3实现阴影也很简单,但实现这种弓形阴影不多见。究竟如何实现,我们一一分析~

      实现此图片阴影CSS代码如下:

.promos ul li .curve-down:nth-child(1n) {
     border:none;
     -webkit-border-radius:100% / 8px;
     -moz-border-radius:100% / 8px;
     border-radius:100% / 8px;
     -webkit-box-shadow:rgba(0,0,0,.30) 0 2px 3px;
     -moz-box-shadow:rgba(0,0,0,.30) 0 2px 3px;
     box-shadow:rgba(0,0,0,.30) 0 2px 3px;
}

 

代码解释:
(1).curve-down:nth-child(1n)
       CSS3新加入的选择器:nth-child(an+b),使用公式an+b选择目标元素,其中a,b为参数。

       .curve-down:nth-child(1n)意为选择class为curve-down元素的父元素下全部class为curve-down的元素(太绕口了)。例如:nth-child(3n+1),则选取第1、第4、第7...个元素。

(2)-webkit- -moz- -ms- -o-

       以上CSS属性前缀为不同浏览器的私有前缀-prefix-:

  • -webkit-[Chrome, Safari]
  • -moz-[Firefox]
  • -ms-[IE]
  • -o-[Opera]

      浏览器对实验性CSS属性会采用私有前缀-prefix-,待相关技术成熟并且浏览器能完成相应的测试用例之后,才可以去掉前缀。

-webkit-border-radius:100% / 8px;
-moz-border-radius:100% / 8px;
border-radius:100% / 8px;

      以上三个属性只是同一个内容,即border-radius:100% / 8px; 加上前缀是希望得到对应浏览器的支持,虽然现在新版本的Chrome, Firefox能够直接读懂border-radius,但对于一些旧版本的浏览器还是有必要添加前缀的。

(3)border-radius:100% / 8px;

      border-radius决定一个块级元素四个角的显示弧度,四个角弧度可对立设置,以border-top-left-radius为例:

语法:border-*-*-radius: <length> | <%> ] [ <length> | <%> ]?

举例:border-top-left-radius:50px 100px; 

解释: 50px、100px两个值分别代表椭圆的水平与垂直半径。我们平常只设置一值,就被自动默认为两值相等的圆。

语法:border-radius:<length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

举例:border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;

解释:“/”符号前后四个值按顺序一一对应。

  • 第1个值与第5个值对应左上角(top-left);
  • 第2个值与第6个值对应右上角(top-right);
  • 第3个值与第7个值对应右下角(bottom-right);
  • 第4个值与第8个值对应左下角(bottom-left)。

      每个角的弧度显示效果与border-*-*-radius相同。

      border-radius:100%,100%意为半径等于元素宽度与高度的一半。

      掌握以上知识后即可知border-radius:100% / 8px为垂直半径8px,水平半径为元素宽度的一半。

      用CSS3画好了弓形边,就剩下在边周围涂阴影了。

(4)box-shadow:rgba(0,0,0,.30) 0 2px 3px;

      rgba:red, green, blue色彩值以及alpha透明度值。rgba(0,0,0,.30)为30%透明度的黑色,即灰色。

      0 2px 3px:参数分别为Horizontal Length, Vertical Length, Blur Radius,虽然没写第四个参数,但浏览器会默认第四个参数Spread为0。

  1. Horizontal Length:阴影的水平偏移量,正值代表向右偏移,负值相反,0值无阴影。
  2. Vertical Length:阴影的垂直偏移量,正值代表向下偏移,负值相反,0值无阴影。
  3. Blur Radius:阴影自身颜色模糊效果(透明效果)延伸长度。
  4. Spread:阴影自身颜色的延伸长度。

      border-radius与box-shadow这两个CSS3属性再加上border:none就可以实现图片底边弧形阴影效果。

      

      顺便为大家介绍一个在线CSS3代码生成网站http://css3generator.com/,你只需输入参数并加以调试,WEB应用会自动生成兼容各种浏览器的CSS3代码,方便实用。

分享到:
评论

相关推荐

    苹果官网页面仿写(纯html+css)

    仿写苹果官网,纯html+css,零基础学了三天小成果,使用hbuilder软件

    html5+css3经典案例

    在这个“html5+css3经典案例”压缩包中,你将找到一系列精心设计并带有详细注释的源代码,这些案例涵盖了HTML5的新特性与CSS3的最新样式规则。 HTML5是超文本标记语言的第五个版本,它引入了许多新元素和API,旨在...

    CSS3高级应用

    CSS3高级应用

    256个CSS3案例.zip

    【标题】"256个CSS3案例.zip" 提供了一系列使用CSS3技术实现的创意效果,涵盖了网页设计中的多种重要元素。CSS3是层叠样式表(Cascading Style Sheets)的第三版,它引入了许多新的功能和特性,极大地扩展了网页设计...

    CSS3、1000+案例.zip

    在这个压缩包中,包含的1000多个CSS3案例涵盖了各种不同的设计模式和效果,可以帮助学习者深入理解和掌握CSS3的各种功能。 1. **css3高度灵活的模拟扑克牌切换图片效果**:这个案例展示了如何利用CSS3的transform...

    CSS+div模板精华案例分析

    《CSS+div布局技术深度解析与案例应用》 在网页设计领域,CSS(Cascading Style Sheets)与div元素的组合是构建现代网页布局的重要工具。本篇文章将深入探讨CSS+div布局技术的核心原理,以及如何通过实际案例来提升...

    HTML5+CSS3小应用

    非常实用的HTML5+CSS3小应用。非常适用于初学者。

    苹果科技官网前端界面(纯H5/CSS/Javascript)

    要求解读: 1、 在首页中,包含导航、...多处使用transition,具体查找css文件中的transition属性 5、 公司或产品介绍部分可以使用弹性布局完成页面的自适应 没使用弹性布局(Flex),使用网格布局(Grid)实现页面自适应

    css背景属性案例

    通过本篇文章的学习,我们不仅了解了CSS背景属性的基本概念,还通过一个实际案例掌握了如何应用这些属性来创建美观的网页布局。CSS背景属性的强大之处在于其灵活性和多样性,可以根据不同的需求创造出各种视觉效果。...

    html5+css3实战 例子

    "Web设计:HTML5和CSS3实战.pdf"这本书很可能是深入探讨这两个主题的实战指南,包括实际案例、示例代码和最佳实践,有助于读者将理论知识转化为实际操作技能,进一步提升开发效率和网页设计水平。通过阅读这本书,...

    CSS3实现MacBook苹果笔记本特效.zip

    【标题】"CSS3实现MacBook苹果笔记本特效.zip"揭示了这个压缩包包含的资源是使用CSS3技术来创建的一款模拟MacBook苹果笔记本的网页特效。CSS3是层叠样式表(Cascading Style Sheets)的第三版,是用于描述HTML或XML...

    css高级应用与技巧

    css高级应用与技巧css高级应用与技巧css高级应用与技巧

    CSS:CSS项目实践与案例分析.docx

    CSS:CSS项目实践与案例分析.docx

    纯CSS3模仿苹果官网导航.zip

    在本项目"纯CSS3模仿苹果官网导航"中,我们主要关注的是利用HTML5、CSS3以及可能涉及的JavaScript技术来实现一个与苹果官网类似的导航栏。这个压缩包包含了一个名为"纯CSS3模仿苹果官网导航"的文件,很可能是HTML和...

    Web前端开发案例教程(HTML5+CSS3)(微课版)_源代码.zip

    《Web前端开发案例教程(HTML5+CSS3)(微课版)》是一份重要的教学资料,主要关注现代Web开发的基础技术,即HTML5和CSS3。这些技术是构建交互式、响应式和动态网页的核心工具。源代码的提供使得学习者能够深入理解...

    CSS3时钟案例.zip

    在本案例中,"CSS3时钟案例.zip"是一个压缩包,其中包含了使用CSS3技术构建的时钟示例。...通过这个案例,开发者不仅可以学习到如何创建动态视觉效果,还能深入理解CSS3的核心特性,并将其应用于其他项目。

    图解Css3核心技术和案例源代码

    《图解Css3核心技术和案例源代码》是学习CSS3技术的重要参考资料,它包含了书中的所有实例源代码,旨在帮助读者深入理解CSS3的核心概念,并通过实际操作来提升技能。CSS(层叠样式表)是网页设计的重要组成部分,...

    7款纯CSS3实现的炫酷动画应用

    这些纯CSS3实现的炫酷动画不仅展示了CSS3的强大功能,也为我们提供了丰富的设计灵感和实践案例。通过深入理解并运用这些技术,开发者可以构建出更具吸引力和交互性的网页,提升用户体验。学习和掌握这些知识点,对于...

    图解CSS3核心技术与案例实战

    该书是学习CSS3的好书,通俗易懂,案例详尽,描述详细,带目录。

Global site tag (gtag.js) - Google Analytics