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. 将Word转为带书签的PDF

    将word文档存为PDF可以带来很多便利,在这里就不多说了.下面讨论一下转换方法. 我现在使用的是Word2010+Acrobat9,所以这里仅讨论使用这种组合的转换方法. 在Word2010中有两种 ...

  2. 使用sp_addextendedproperty添加描述信息

    -- For table EXECUTE sp_addextendedproperty N'MS_Description', '描述内容', N'user', N'dbo', N'table', N' ...

  3. Quiz（贪心，快速幂乘）

    C. Quiz time limit per test 1 second memory limit per test 256 megabytes input standard input output ...

  4. 推荐一款炫酷的提示框插件SweetAlert

    官方网址 http://t4t5.github.io/sweetalert/ 项目地址 https://github.com/t4t5/sweetalert

  5. HIVE: UDF应用实例

    数据文件内容 TEST DATA HERE Good to Go 我们准备写一个函数,把所有字符变为小写. 1.开发UDF package MyTestPackage; import org.apac ...

  6. Powerdesigner逆向工程从sql server数据库生成pdm (转载)

    第一步:打开"控制面板"中的"管理工具" 第二步:点击"管理工具"然后双击"数据源(odbc)" 第三步:打开之后,点击 ...

  7. MFC ADO连接Oracle12c数据库 客户端环境搭建

    ADO连接方式一:Provider=MSDAORA.1; 环境配置如下: 去官网下载ODAC121024Xcopy_32bit.zip安装 安装方式如下: (1)解压文件 (2)用命令行CD到该文件的 ...

  8. 使用uploadify上传控件无法进入后台问题分析

    分别在.net mvc 和java struts2中使用到 uploadify上传 文件,遇到同样的问题,选中文件上传后,文件无法上传,打上断点后发现没有进入后台. 逐步断点发现 项目共同点是加入了 ...

  9. c# File 操作

    //1.---------文件夹创建.移动.删除--------- //创建文件夹 Directory.CreateDirectory(Server.MapPath("a")); ...

  10. 后端码农谈前端（HTML篇）第一课：HTML概述

    一.什么是HTML? HTML不是编程语言,是用来描述网页文档(页面结构)的一种标记语言: HTML指超文本标记语言(Hyper Text Markup Language),之所以称为超文本标记语言, ...