`

css3练习

    博客分类:
  • css3
阅读更多
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ribbon实现</title>
<style>
/*以下样式只在chrome下最新版本做测试,未做兼容性处理*/
*{ margin:0; padding:0;}
body{ background:#f4f4f4; font:12px/1.6 Georgia, "Times New Roman", Times, serif; color:#999; padding:20px 100px;}/*h2标签中3字下垂字体设置*/
.bubble{ margin:5px auto; width:350px; border-radius:10px; box-shadow:0px 0px 8px rgba(0,0,0,0.3); position:relative; z-index:90;}
.rectangle{ background:#7f9db9; height:50px; width:380px; box-shadow:0px 0px 4px rgba(0,0,0,0.55); z-index:100; position:relative; left:-15px; top:30px;}
.rectangle h2{ line-height:50px; font-size:30px; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,0.2); text-align:center;}
.bubble:after{ content:''; border:15px solid #7d90a3; border-color:transparent #7d90a3 transparent transparent; height:0; width:0; position:absolute; left:-30px; top:65px; z-index:-1;}
.bubble:before{ content:''; border:15px solid #7d90a3; border-color:transparent transparent transparent #7d90a3; height:0; width:0; position:absolute; right:-30px; top:65px;}
/*对内容中的字体做修饰*/
.info{ padding:60px 25px 35px 25px;}
.info h2{ font-size:20px;}
.info p{ padding-top:10px; font-size:14px; line-height:22px;}
.info p a{ color:#C63; text-decoration:none;}
.info p a:hover{ text-decoration:underline;}
</style>
</head>

<body>
<div class="bubble">
	<div class="rectangle">
    	<h2>3D CSS3 Ribbon</h2>
    </div>
    <div class="info">
    	<h2>I have used only css,friends!</h2>
        <p>For this tutorial,I have used some new properties.You can realize a nice 3D effect using only css.</p>
        <p><a href="#">Go to the tutorial!</a></p>
    </div>
</div>
</body>
</html>

 

效果贴下代码在chrome最新的浏览器中运行下就可以看到了

 

分享到:
评论

相关推荐

    html5+css3练习.zip

    在这个“html5+css3练习.zip”压缩包中,包含了用于新手学习的实例,特别是针对那些对HTML5和CSS3还不太熟悉的人。 首先,HTML5(超文本标记语言第五版)是网页内容的结构化语言,它增强了网页的语义性,引入了许多...

    CSS3练习

    【标题】:“CSS3练习” 在网页设计领域,CSS3(Cascading Style Sheets Level 3)是目前广泛使用的样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。这个“CSS3练习”主题旨在帮助...

    自己的html5 css3练习(新手)

    对于初学者来说,这个HTML5-CSS3的练习集是一份宝贵的资源,它可以帮助你从基础开始,逐步掌握这两门技术,并了解如何将它们与jQuery和其他JavaScript库结合,创建出具有吸引力的现代网页。通过实践这些示例,你可以...

    css3 操作练习

    这个“css3 操作练习”显然是一份旨在帮助学习者熟悉和掌握CSS3新特性的实践资料,通过名为“weapp-douban-film”的项目,很可能是模拟微信小程序中的豆瓣电影展示功能。接下来,我们将深入探讨CSS3的一些关键知识点...

    HTML CSS学习练习.zip

    HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 HTML CSS学习练习HTML CSS学习练习HTML CSS学习练习 ...

    HTML5和CSS3编程从基础到应用 练习文件

    这个“HTML5和CSS3编程从基础到应用”的练习文件集,涵盖了从基本概念到高级特性的全面内容,共13个章节,源自清华大学出版社。 **HTML5知识点:** 1. **基础结构**:HTML5的基础结构包括文档类型声明`&lt;!DOCTYPE ...

    学习html和css的练习.zip

    学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html和css的练习学习html和css的练习 学习html和css的练习学习html和css的练习学习html...

    teresina:CSS3练习

    在"teresina:CSS3练习"项目中,可能包含了利用以上提到的一些或全部CSS3特性进行的实践练习。通过分析teresina-master文件夹中的内容,你可以发现如何将这些特性应用于实际网页设计,例如创建响应式布局、动态效果、...

    学习HTML、CSS阶段练习.zip

    学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML、CSS阶段练习学习HTML、CSS阶段练习学习HTML、CSS阶段练习 学习HTML...

    HTML5-CSS3-Curry:HTML5 CSS3练习

    在"HTML5-CSS3-Curry:HTML5 CSS3练习"这个项目中,我们主要会关注以下几个知识点: 1. **HTML5新元素**:HTML5新增了如、、、、、等语义化元素,用于更准确地描述网页内容结构,提高可读性和可访问性。 2. **表单...

    Curso-HTML5-e-CSS3:HTML5和CSS3练习

    在"Curso-HTML5-e-CSS3:HTML5和CSS3练习"中,你将深入学习这两项技术的精髓,通过实际操作提升你的网页制作技能。 一、HTML5:新一代网页语言 1. 结构元素:HTML5引入了新的结构元素,如、、、、和,使得网页内容...

    DIV+CSS布局练习

    本资源"DIV+CSS布局练习"提供了一个经典的实例,适合那些想要深入理解和掌握`CSS`与`DIV`的开发者。在这个压缩包中,你将找到一系列相关素材和练习,帮助你提升`CSS`和`DIV`布局的能力。 首先,让我们详细了解一下`...

    CSS-Exercicio-1---Receita:CSS3练习第一

    在本主题中,我们将深入探讨CSS3练习第一部分,即"CSS-Exercicio-1---Receita"。这个练习主要是为了帮助初学者和开发者熟悉并掌握CSS3的基础概念和特性,通过实践来提升他们的技能。我们将围绕HTML标签的使用以及CSS...

    17-CSS3过渡练习.html

    17-CSS3过渡练习.html

    CSS项目练习

    在“CSS练习”中,你将有机会实践以上提到的所有概念,通过创建和修改样式,解决实际问题。这将帮助你加深对CSS的理解,提高你的前端开发能力。通过不断练习,你将能够自如地使用CSS构建出美观、响应式的网页,从而...

    HTML CSS 初学的练习.zip

    HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习...

    HTML+CSS-练习作业-学成在线网站.zip

    HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业_学成在线网站HTML+CSS_练习作业_学成在线网站 HTML+CSS_练习作业...

    HTML与css新手练习源码

    本套“HTML与css新手练习源码”旨在为初学者提供一个实践和学习的平台,通过常用的HTML5和CSS3技术,帮助新手快速掌握这两门语言的基本用法。 HTML5是HTML的最新版本,它引入了许多新的元素和功能,以更好地支持...

    一个有关CSS3学习的餐厅练习.rar

    "一个有关CSS3学习的餐厅练习.rar"这个压缩包文件,显然是为了帮助学习者通过实际操作来掌握CSS3的核心概念和技术。在这个练习中,我们可以期待涉及到以下关键知识点: 1. **选择器**:CSS3引入了更强大的选择器,...

Global site tag (gtag.js) - Google Analytics