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. 使用 AFNetworking 进行 XML 和 JSON 数据请求

    (1)XML 数据请求 使用 AFNetworking 中的 AFHTTPRequestOperation 和 AFXMLParserResponseSerializer,另外结合第三方框架 XMLD ...

  2. ux.plugin.ConTpl 模版元素监听扩展

    /* *tpl模版加入按钮 *<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-s ...

  3. Oracle数据库入门——如何根据物化视图日志快速刷新物化视图

    Oracle物化视图的快速刷新机制是通过物化视图日志完成的.Oracle如何通过一个物化视图日志就可以支持多个物化视图的快速刷新呢,本文简单的描述一下刷新的原理. 首先,看一下物化视图的结构:SQL& ...

  4. 关于app.config不能即时保存读取的解决方案

    public void saveValue(string Name, string Value) { ConfigurationManager.AppSettings.Set(Name, Value) ...

  5. java攻城狮之路(Android篇)--ListView与ContentProvider

    一.ListView 1.三种Adapter构建ListView ListView添加条目的时候, 可以使用setAdapter(ListAdapter)方法, 常用的ListAdapter有三种 B ...

  6. 短日期比较 js

    function compareDate(startDate, endDate) { var arr = startDate.split("-"); var starttime = ...

  7. Tips3:通过Layer下拉菜单来锁定游戏物体和控制物体的可视化

    通过把不同的游戏物体放在不同的Layer里面能对不同类的游戏物体进行很方便的控制,如果某些游戏物体创建后你不想再改动,如地面 装饰 什么的, 你可以通过点击Layer下拉菜单把它们锁定了 也可以通过控 ...

  8. SharePoint 2013中的爬网最佳做法

    了解在 SharePoint Server 2013 中爬网的最佳做法 搜索系统对内容进行爬网,以构建一个用户可以对其运行搜索查询的搜索索引.本文包含有关如何最有效地管理爬网的建议. 本文内容: 使用 ...

  9. JS微信分享不好写？来封装一下

    微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码. 代码冗余,即便是复制过来再改也很麻烦. 之前自己封装了一下js,今天来分享一下,希望 ...

  10. Web 开发人员必备的随机 JSON 数据生成工具

    在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...