.shadow {
  width: 150px;
  height: 150px;
  background-color: yellow;
  position: relative;
}
.shadow:after {
  position: absolute;
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

.test {
    width: 300px;
    height: 300px;
    left: 50px;
    top: 50px;
    border-bottom-left-radius: 250px 45px;
    position: absolute;
    overflow: hidden;
    transform: rotate(-19deg);
    Box-shadow: -9px 10px 31px 6px gray;
    backface-visibility: hidden;
}

.test:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: yellowgreen;
    border-bottom-left-radius: 45px 250px;
    background-image: radial-gradient(circle at 50px 180px,rgba(255,255,0.3),transparent 70px),radial-gradient(circle at 85px 215px,0.4),radial-gradient(circle at 120px 250px,transparent 70px);
    Box-shadow: -9px 10px 14px 22px gray;
}

10个优秀的 HTML5 & CSS3 下拉菜单制作教程_html/css_WEB-ITnose

　　下拉菜单是一个很常见的效果，在网站设计中被广泛使用。通过使用下拉菜单，设计者不仅可以在网站设计中营造出色的视觉吸引力，但也可以为网站提供了一个有效的导航方案。使用 html5 和 css3 可以更容易创造视觉上充满吸引力的下拉菜单。

本文出处【http://www.cnblogs.com/lhb25/】

您可能感兴趣的相关文章

小伙伴们惊呆了！8个超炫的 Web 效果 8个惊艳的 HTML5 和 JavaScript 特效 10大 Metro UI 风格 Bootstrap 主题 35款精致的 CSS3 和 HTML5 网页模板 10套精美的免费网站后台管理系统模板

效果很精美 CSS3 菜单，可以让给你的网站提升一个层次。制作教程非常详细。

立即学习“前端免费学习笔记（深入）”；

在线演示     源码下载

这是一个点击弹出的下拉菜单，传统的下拉菜单都是鼠标悬停的时候显示，这个则是采用的单击显示。

在线演示     源码下载

这是一个基于 CSS3 的两级下拉菜单，当鼠标悬停在父元素的时候，子菜单会滑出。

在线演示     源码下载

基于 CSS3 的多层下拉菜单，金属质感的菜单图标。这也是一个基于 UL-LI 结构的菜单效果。

在线演示     源码下载

这是一个滑出效果的下拉菜单，非常时尚。多彩的 Tab 让整体感觉很漂亮。

在线演示     源码下载

另一个基于 CSS 的下拉菜单框架，代码简洁干净，对标准友好，易于使用。

在线演示     源码下载

这个下拉菜单使用 CSS3、HTML5 和 jQuery 创建，实现一个易于使用，对用户友好的导航菜单效果。

在线演示     源码下载

这是一个有点类似 Mac 风格的下拉菜单，使用了 Border-radius, box-shadow 以及 text-shadow 等 CSS3 特效。

在线演示     源码下载

这是一个借助强大的 CSS3 动画功能实现的 CSS3 动画效果菜单。

在线演示     源码下载

这个下拉菜单效果常见于电子商务网站，因为能够显示大量的弹出内容。

在线演示     源码下载

这个也是基于 HTML5 & CSS3 制作的下拉菜单，菜单的内容可以自定义。

在线演示     源码下载

您可能感兴趣的相关文章

35个让人惊讶的 CSS3 动画效果演示
让人爱不释手的Web应用程序图标素材 10套精美的免费网站后台管理系统模板 期待已久的2012年度 jQuery 插件揭晓 10大流行的 Metro UI Bootstrap 主题

本文链接：10个优秀的 HTML5 & CSS3 下拉菜单制作教程

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

10款基于HTML5+CSS3实现的超酷源码动画_html/css_WEB-ITnose

1.基于Bootstrap的jQuery登录表单

这是一款基于bootstrap的登录表单，表单的外观自然不用说，沿用了bootstrap的风格，非常漂亮。这款登录表单有一个经过css3处理过的头像图片，同时还有html5表单字段的简单验证，css3的使用，让整个登录表单的投影显得更加立体。

在线演示

源码下载

2.很酷的CSS3多窗口邮件阅读器

这是一款非常炫酷华丽的CSS3邮件阅读器界面，它的特点是你可以同时点开多个邮件，而不必跳转页面。当你阅读完后可以点击关闭按钮关闭当前邮件的窗口。对于这种交互式的窗口，之前也分享过一个CSS3聊天窗口，大家也可以关注一下。

立即学习“前端免费学习笔记（深入）”；

在线演示

源码下载

3.jQuery图片抖动插件

这是一款简易的jQuery图片抖动动画，当我们将鼠标滑过图片时，图片会产生一系列抖动动画。还记得以前分享过一个更高级的图片抖动动画，可以有很多种抖动方式，可以参看jQuery/CSS3实现网页元素抖动特效这篇文章。

在线演示

源码下载

4.HTML5笑脸样式的音乐播放器 非常有爱

今天要来分享一款非常有爱的HTML5音乐播放器，它的外观酷似一张笑脸，其实笑脸的样式也是通过对播放器的各项按钮进行布局而产生的。同时这款播放器的功能也是比较完整的，播放、暂停、音量控制、播放进度等。

在线演示

源码下载

5.CSS3超酷弹出对话框 兼容移动端

这是一款基于HTML5和CSS3的弹出对话框，一共有4种类型，每种对话框弹出的时候均带有一定的动画特效，比如成功时候的动画和加载时候的动画，都非常不错，和之前分享的jQuery弹出层对话框 外观优雅带遮罩相比，虽然没有强大的回调功能，但是非常简单，更适合在移动端使用。

在线演示

源码下载

6.jQuery放大镜商品图片预览插件 支持相册浏览

还记得之前介绍的一款jQuery球状放大镜特效插件么，可以将很小的文字放大浏览。今天要分享的也是一款jQuery放大镜插件，可以应用在商品图片浏览上。鼠标滑过缩略图时，即可浏览大图的特定部分。这款插件最大的特点是支持图片相册浏览，是一款再好不过的商品图片浏览插件。

在线演示

源码下载

7.14款CSS3图片层叠切换动画

之前刚分享过一款jQuery层叠式翻页焦点图插件，非常不错。现在的这款CSS3图片层叠切换动画更加强大，拥有14种不同的图片切换动画，而且动画效果更加炫酷。这14种动画，每一种都有一点差异，你可以根据自己的需要来选择一种即可。

在线演示

源码下载

8.jQuery超级个性化的单线框和复选框

记得以前给大家分享过一些美化版的单选框和复选框，比如这款纯CSS3美化Checkbox和Radiobox按钮和CSS3自定义发光radiobox单选框。今天要分享的也是一个非常个性化的单选框和复选框插件，颜色你可以自己定义。

在线演示

源码下载

9.JavaScript鼠标跟随星星飘落动画

今天我们要来分享一款有趣的JavaScript动画，这种鼠标跟随动画应该也是很早就有的东西，特别是应用在一些个性化的个人博客中。这款JavaScript鼠标跟随动画是一些飘落的星星，星星的形状和颜色也是随机变化的，非常可爱。

在线演示

源码下载

10.HTML5/CSS3实现图片多种滤镜特效

这是一款基于HTML5和CSS3的图片滤镜特效应用，每一张图片应用不同的滤镜效果都会有不一样的视觉特效。另外，你也可以切换图片，特别是应用在相册应用中，你不仅可以浏览不同的图片，而且对同一张图片可以有多种特效。

在线演示

源码下载

本文固定链接: http://www.i7758.com/archives/2300.html

16个时髦的扁平化设计的 HTML5 & CSS3 网站模板_html/css_WEB-ITnose

　　创建网站最好办法之一是使用现成的网站模板或使用开源 cms 应用程序。所以，今天这篇文章给大家带来的是16款基于 html5 & css3 的精美的扁平风格网站模板，大家可以借助这些优秀的网站模板创建自己的优秀网站。这些网站模板虽然是收费，但是都提供了在线演示，所以……你懂的：）

您可能感兴趣的相关文章

充满吸引力的一款网站模板，扁平化设计风格，动感的视差滚动效果。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

Superb 是一个基于 HTML5 & CSS3 的响应式单页作品集网站模板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

这款精美的网站模板提供了三套风格的设计：全屏背景、单页滚动以及 Metro 面板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

扁平化设计风格的响应式网站模板，大量使用了 CSS3 动画效果。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

带有 jQuery 滑块以及精美字体图标的扁平风格的 HTML5 & CSS3 模板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

一款专业的响应式的 HTML5 作品集网站模板，基于 Twitter Bootstrap 创建。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

适合设计师、自由职业者的创意扁平化风格网站模板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

时下流行的扁平化的、响应式的 HTML5 & CSS3 网站模板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

很有范的扁平化设计的单页网站模板，基于 HTML5 & CSS3 技术。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

这是另一款基于 Twitter Bootstrap 创建的扁平风格网站模板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

适合个人和团队的扁平化风格单页网站模板，也是基于 Twitter Bootstrap 创建的。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

Paris 是一个功能齐全的响应式的 HTML5/CSS3 网站模板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

Focus 是基于时下流行的响应式 & 扁平化设计风格的作品集网站模板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

Grid 也是一款响应式的个人作品集网站模板，支持 Retina 显示。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

Renova 是一款设计独特的单页网站模板，采用扁平化的设计风格。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

最后这款网站模板同样是基于 Twitter Bootstrap 的响应式网站模板。

在线演示     模板下载

立即学习“前端免费学习笔记（深入）”；

您可能感兴趣的相关文章 12款高质量的免费 CSS 网站模板下载 最新30佳精美 PSD 网站模板免费下载 12款高质量的免费 HTML 网页模板下载 45款高质量的免费(X)HTML/CSS模板 12款很漂亮的免费 CSS 网页模板下载

英文来源：HTML5/CSS3 Flat Portfolio Website Template

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

6款基于SVG的HTML5CSS3应用和动画_html/css_WEB-ITnose

1、CSS3/SVG质感背景小图标 镂空效果图标按钮

今天我们来分享一款用css3和svg实现的质感背景小图标，鼠标滑过图标时出现镂空的效果，并且有质感背景的描边，效果非常不错。

在线演示

源码下载

2、HTML5 SVG Tab滑块菜单 非常酷的Tab菜单

之前我们分享过很多HTML5/CSS3菜单，应该说大部分都还比较实用华丽，今天我们要来分享另外一种形式的HTML5菜单??HTML5 Tab菜单。这款Tab菜单是利用HTML5和SVG实现的，Tab菜单的外观非常漂亮，而且Tab切换也很方便。

立即学习“前端免费学习笔记（深入）”；

在线演示

源码下载

3、HTML5/SVG实现随风摇摆的动画树

今天的这款HTML5动画非常有特点，它是一棵随风摇动的树，但是这棵树是模拟出来的，外观并不是那么逼真，只是树的骨架出来了。树的结构由SVG描述而成，之前我们也介绍过过许多关于SVG的动画特效，比如HTML5 SVG多折线图表。

在线演示

源码下载

4、HTML5/SVG线性图表 可绘制图表区域颜色

今天要分享的这款HTML5图表应用是一款线性图表，它主要是有SVG构造出来的，这款SVG线性图表可以用不同的颜色绘制出图表的数据区域。另外，这款图表和之前分享的HTML5线性图表iGrapher 类似，只是功能没那么强大而已。

在线演示

源码下载

5、HTML5/SVG实现过山车动画

今天我们要分享一款很酷的HTML5/SVG动画，这款HTML5动画是过山车效果，主要是利用了SVG的path动画来实现的，效果非常酷。另外，关于更多SVG方面的动画，大家可以看看这款HTML5 SVG狐狸奔跑动画、HTML5/SVG实现随风摇摆的动画树，也都非常不错。

在线演示

源码下载

6、HTML5 SVG仿iPhone拍照快门效果

这是一款很酷的拍照快门特效，它利用了HTML5和SVG的特性仿制了类似iPhone拍照应用的快门效果。该HTML5快门的外观非常漂亮，边线有六种不同的颜色组成，当按下快门时，就可以出现像iPhone拍照应用的那种效果了。

在线演示

源码下载

本文固定链接: http://www.i7758.com/archives/1627.html

今天的关于HTML – 发表论文css3和html写论文的分享已经结束，谢谢您的关注，如果想了解更多关于10个优秀的 HTML5 & CSS3 下拉菜单制作教程_html/css_WEB-ITnose、10款基于HTML5+CSS3实现的超酷源码动画_html/css_WEB-ITnose、16个时髦的扁平化设计的 HTML5 & CSS3 网站模板_html/css_WEB-ITnose、6款基于SVG的HTML5CSS3应用和动画_html/css_WEB-ITnose的相关知识，请在本站进行查询。