jquery主页第一眼看到的就是这个玻璃渣效果，设计者利用高光和阴影制造出这种效果。

怎么做出这种感觉呢？

第一步：导航区设定为半透明，颜色为rgba(0,0,0，.1)

第二步：左上角和右上角切出圆角（not important）

第三步：导航区上部起高亮border-top: 1px solid rgba(255,255,255,.3)

第三步：导航区四边起阴影box-shadow:0 0 5px rgba(0,0,0,.7)

第四布：增加左侧导航区阴影效果border-left: 1px solid rgba(0,0,0,.3)

好的歌唱也唱不厌，jquery主页许多地方有类似的手法，不信请往下看：

okokokokkokoko

 

看不见。。。。好吧，我也是买了一个放大镜才看到的，效果的样子类似于：用刀在灰色的岩石上画了一条线，就像..就像古碑上刻的字。 所做的设置很简单，根据背景的颜色选取高光和阴影的颜色；颜色确定后，开始设置阴影：box-shadow: 0 -1px #000；设置高光：border-top: 1px solid #333

嗯，写到这了，以后继续补充---------------------------the world ain't all sunshine and rainbows

美丽的阴影（剖析jquery主页）的更多相关文章

  1. 通过案例来剖析JQuery与原生JS

    首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: ...

  2. box-shadow 阴影剖析

    box-shadow的四个值分别是左右偏移,上下偏移,向四周模糊扩算,距离四周边缘的距离,最后一个是阴影的颜色值,如图示例: 上代码,复制代码,就可以看到上图的效果 <!DOCTYPE html ...

  3. jQuery源码分析系列

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...

  4. jQuery源码分析-01总体架构

    1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, und ...

  5. jquery 源码学习（一）

    从上边的注释看,jQuery的源码结构相当清晰.条理,不像代码那般晦涩和让人纠结   1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQ ...

  6. jQuery 实验教程

    jQuery 实验教程 jQuery 简介.语法及事件处理 jQuery 以其特有的简练的代码风格,极大得改变了 JavaScript 代码编写的方式.本教程以实例代码为基础,讲解 jQuery 的使 ...

  7. jQuery概述,代码举例及最新版下载

    jQuery是一个快速的,小巧的,具有强大功能的JavaScript库. 它的基本功能包括: 1)访问和操作DOM元素 2)控制页面样式(可以兼容各种浏览器) 3)对页面事件的处理 4)大量插件在页面 ...

  8. [转]jQuery源码分析系列

    文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...

  9. jQuery 顶部导航尾随滚动，固定浮动在顶部

    jQuery 顶部导航尾随滚动.固定浮动在顶部 演示 XML/HTML Code <section> <article class="left"> < ...

随机推荐

  1. mac x Yosemide（10.10） 下安装 jdk 1.7 (jdk 1.8)的方法

    当我们想在mac x yosemide 系统中更新jdk到1.7(1.8)的时候,会弹出下面的错误提示 解决这个问题的办法如下: 1.下载 好jdk 1.7(1.8) 地址:http://www.or ...

  2. 基于MSP430F413水果电池供电的低功耗时钟

      我最早接触MSP430时候,看到书的第一页就是一张水果电池的图片,一直以来想做一个低功耗的可以水果电池供电的系统,毕业之后的下半年选择MSP430F413单片机来画了一个低功耗的板子,一直没有调试 ...

  3. 用CentOS 7打造合适的科研环境 :zhuan

    这篇博文记录了我用CentOS 7搭建地震学科研环境的过程,供我个人在未来重装系统时参考.对于其他地震学科研人员,也许有借鉴意义. 阅读须知: 本文适用于个人电脑,不适用于服务器: 不推荐刚接触Lin ...

  4. 【转载】dirs、pushd、popd指令

    转载自:http://hi.baidu.com/linuxtrip/item/47a38c8eec00e98f4414cfb7 一.目录栈指令 目录栈是用户最近访问过的系统目录列表,并以堆栈的形式管理 ...

  5. 十分钟搞懂什么是CGI

    原文:CGI Made Really Easy,在翻译的过程中,我增加了一些我在学习过程中找到的更合适的资料,和自己的一些理解.不能算是严格的翻译文章,应该算是我的看这篇文章的过程的随笔吧. CGI真 ...

  6. SQL Server里的自旋锁介绍

    在上一篇文章里我讨论了SQL Server里的闩锁.在文章的最后我给你简单介绍了下自旋锁(Spinlock).基于那个基础,今天我会继续讨论SQL Server中的自旋锁,还有给你展示下如何对它们进行 ...

  7. 谈论XSS

    XSS 叫跨站脚本攻击(Cross Site Script),那么XSS原本应该叫做CSS,但是由于CSS的简称已经被连级样式表 使用了,所以就换个称谓XSS. 为什么叫做跨站脚本攻击呢? 它的意思就 ...

  8. CentOS6.5菜鸟之旅：安装VirtualBox4.3

    一.下载VirtualBox的RHEL软件库配置文件 cd /etc/yum.repos.d wget http://download.virtualbox.org/virtualbox/rpm/rh ...

  9. BlocksKit初见:一个支持将delegate转换成block的Cocoa库

    简介 项目主页: https://github.com/zwaldowski/BlocksKit BlocksKit 是一个开源的框架,对 Cocoa 进行了扩展,将许多需要通过 delegate 调 ...

  10. 一个关于explain出来为all的说明及优化

    explain sql语句一个语句,得到如下结果,为什么已经创建了t_bill_invests.bid_id的索引,但却没有显示using index,而是显示all扫描方式呢,原来这还与select ...