几个简单实用的css效果
1.要使按钮具有3D效果,只要将它的左上部分边框设置为浅色,右下部分边框设置为深色即可。
eg:#button {
background: #888;
border: 2px solid;
border-color: #999 #777 #777 #999;
}
2. 实现透明效果
将一个容器设为透明,可以使用下面的代码:
.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
在这四行CSS语句中,第一行是IE专用的,第二行用于Firefox,第三行用于webkit内核的浏览器,第四行用于Opera。
3. CSS三角形效果
先编写一个空元素<div class="triangle"></div>,然后将它四个边框中的三个边框设为透明,剩下一个设为可见,就可以生成三角形效果:
.triangle{
display:block;
height:0px;
width:0px;
border:50px solid #000;
border-color:transparent transparent green transparent;
border-style:solid;
}
效果如下所示:
4.CSS提示框效果
<div class="tip-bubble tip-bubble-left">Arrow on left </div>
<div class="tip-bubble tip-bubble-right">Arrow on Right</div>
<div class="tip-bubble tip-bubble-top">Arrow on top</div>
<div class="tip-bubble tip-bubble-bottom">Arrow on bottom</div>
.tip-bubble {
position: relative;
background-color: #202020;
width: 100px;
padding: 20px;
color: #CCC;
text-align: center;
border-radius: 10px;
margin: 50px;
border: 1px solid #111;
border-shadow: 1px 1px 2px #CCC;
text-shadow: 0px 0px 5px #404040;
}
.tip-bubble:after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 15px solid;
}
/* Position the Arrow */
.tip-bubble-top:after {
border-bottom-color: #202020;
left: 50%;
bottom: 100%;
margin-left: -15px;
}
.tip-bubble-right:after {
border-left-color: #202020;
left: 100%;
top: 50%;
margin-top: -15px;
}
.tip-bubble-bottom:after {
border-top-color: #202020;
top: 100%;
left: 50%;
margin-left: -15px;
}
.tip-bubble-left:after {
border-right-color: #202020;
top: 50%;
right: 100%;
margin-top: -15px;
}
效果如下所示:
5.固定位置的页首效果
body{ margin:0;padding:100px 0 0 0;}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:<length>;
}
@media screen{
body>div#header{position: fixed;}
}
* html body{overflow:hidden;}
* html div#content{height:100%;overflow:auto;}
6. 用图片替换文字
有时我们需要在标题栏中使用图片,但是又必须保证搜索引擎能够读到标题,CSS语句可以这样写:
h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
几个简单实用的css效果的更多相关文章
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- 一个简单实用的css loading图标
摘要 在web开发中,为了提高用户体验,在加载数据的时候都会给一个loading的提示. Html <!DOCTYPE html> <html xmlns="http:// ...
- jQuery的几种简单实用效果
许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...
- 最简单实用的JQuery实现banner图中的text打字动画效果!!!
下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 简单实用的下拉菜单(CSS+jquery)
原文 简单实用的下拉菜单(CSS+jquery) 没什么可以说的,直接上例子 html+jquery代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- 新入门的小白,整理一下特别简单实用的div+css兼容性的问题。
最近整理了一下特别简单的div+css的不同浏览器的兼容性的问题,跟大家分享一下,只适合刚入门的新手,欢迎大牛们给提出意见. 1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: * ...
- 经验分享:10个简单实用的 jQuery 代码片段
尽管各种 JavaScirpt 框架和库层出不穷,jQuery 仍然是 Web 前端开发中最常用的工具库.今天,向大家分享我觉得在网站开发中10个简单实用的 jQuery 代码片段. 您可能感兴趣的相 ...
随机推荐
- 什么是linux的ftp
vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.特点是小巧轻快,安全易用.并且是一个完全免费开放源码的ftp软件ftp的作用: FTP(File Transfer Protocol, ...
- BZOJ4668: 冷战
并查集,按秩合并,树高log,暴力查询. 果然bzoj新挂的题中过的人多的全是sb题. 写了一发秒WA,发现姿势不对.(@_@) 然后过了50min,开始怀疑人生.(*_*) 这么长时间我lct都写完 ...
- ListBox
<asp:ListBox runat="server" ID="txtName" Width ="200" Height=" ...
- UIView UIwindow
UI:用户界面,用户能看到的各种各样的页面元素 UIview :代表屏幕上的一个矩形区域,管理界面上的内容 创建UIview 1.开辟空间并初始化视图(初始化时,给出视图位置和大小 2.对 ...
- Runner站立会议06
开会时间:21.10~21.30 地点:基教负一 今天做了什么:日历布局,晚善日历 明天准备做什么:完善日历界面 遇到的困难:暂无 燃尽图: 会议图:
- string.capwords() 将每个单词首字母大写
string.capwords() 将每个单词首字母大写 代码: import string s = ' The quick brown fox jumped over the lazy dog. ' ...
- Http请求之--C#的HttpWebRequest实现POST方式请求
1.添加头信息和请求方法.有两种方式添加 req = (HttpWebRequest)WebRequest.Create("http://zhidao.baidu.c ...
- 获取<img src="sdf.jpg" Big="sf.jpg">中的big的值
原代码: <img src="sdf.jpg" Big="sf.jpg" onclick="getsrc($(this).attr(" ...
- live555库中的openRTSP实例
一.openRTSP编译运行 a)windows下编译运行 还是以mediaServer作为服务端,openRTSP作为客户端 b)Linux下编译运行 转自http://kuafu80.blog.1 ...
- 使用 Elmah一些要注意的问题
http://www.cnblogs.com/apsnet/archive/2012/04/28/2474730.html 1. Elmah使用后,在发布时,要区分IIS6和IIS7 ,IIS6下 H ...