一些css效果积累

悬浮效果: ul li a{text-decoration: none;color: black} ul li a:hover{color: blue} 鼠标变小手 span:hover{cursor:pointer;color:red}…

[转载] 高大上的 CSS 效果：Shape Blobbing

这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 apple wathc 的一个效果(见最后) CSS3 给我们带来了一波又一波的技术革新,而我们似乎对它所能创造的效果又知道的太少太少,放大缩小什么的只是个开始,今天我们就讲讲上图中的新特效:Shape Blobbing. 原文在 CSS Tricks,这里只做一下简单的归纳,下面是我根据原文做的一个 Demo,现…

CSS 效果汇总

只要决心够, 就能征服痛苦. 把一些常用的 CSS 效果记录下来 1. 利用 z-index :hover 显示层 github 效果地址>> 此效果主要利用 a:hover 来改变 span( 要显示文字 ) 的 z-index 值.…

CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都如下所示: <div class="ondisplay"> <section title=".slideOne"> <div class="slideOne"> <input type="ch…

CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都如下所示: <div class="ondisplay"> <section title=".slideOne"> <div class="slideOne"> <input type="check…

设计点滴&css效果点滴

走向设计师的第一步, 做一个自由的设计师. 优秀的移动端设计的:http://www.cnblogs.com/coding4/p/6842849.html 一些好的设计图片的收藏,一些好的设计理念,一些好的网页.以及用css写的比较好的网页效果.以及一些好的后台的模板网站之类的. 2017.3月6日开始积累.哈哈周一,今天阴天. 世界上本来没有路,走的人多了,也就成了路了.本来创造很难的,但是我们积累的效果多了,也就容易了.海报之类的积累. 1. 2. 3. 4.http://www.17suc…

CSS效果集锦（持续更新中）

高亮光弧效果使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>light</title> <style> body{ margin: 0; } a.floor{ display:…

（一）css代码积累——自己经常忘记，但是总记不住的代码

1.透明度设置 90%透明:filter:alpha(opacity=90);-moz-opacity:0.90;-khtml-opacity: 0.90;opacity: 0.90; 80%透明:filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity: 0.80;opacity: 0.80; 70%透明:filter:alpha(opacity=70);-moz-opacity:0.70;-khtml-opacity: 0.70;op…

几个简单实用的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…

一些常用的html/CSS效果---小技巧

我常用的重置样式表reset.css /*===============基础信息================*/ *{border: 0;padding: 0;margin: 0;} table {border-collapse:collapse;border-spacing:0;} ol,ul {list-style:none;} h1,h2,h3,h4,h5,h6 {font-size:100%;} q:before,q:after {content:''} input,textarea…

css知识点积累

关于样式的优先级问题: !important > style > [ id > class > tag ]; z-index 的属性用法: z-index属性是用来设置元素的堆叠顺序,z-index的属性值可为负数.0 或正数,属性值越大,元素越接近用户,越显示于前面,如下图所示: 新手使用CSS中的这个属性时,经常会忘记在前面要先声明定位元素,即z-index属性只适用于绝对定位容器,例如代码:position: absolute; z-index: 1; role :…

问题：贴友关于CSS效果的实现

今日在百度贴吧中,一贴有提出如下问题: 对于这个问题,咱们贴上代码看效果 1: <html> 2: <head> 3: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 4: <style type="text/css"> 5: #div1 6: { 7: margin: 0 auto; 8: width: 300p…

网页代码DIV+CSS布局积累

11.17 CSS英文命名在写CSS的时候,经常为一些名字而发愁,比如说菜单后面的背景要用什么词来表示呢?大家都知道,菜单一般用menu来表示,那么菜单后面的背景我会用menubg,CSS里就写#menubg {-}.还有一些其他的比如搜索框之类的应该怎么命名呢?下面有一些可以算得上是标准的命名吧.如果有错误或者遗漏请朋友们帮忙补上,谢谢! CODE:页头:header登录条:loginbar标志:logo侧栏:sidebar广告:banner导航:nav子导航:subnav菜单:menu子菜单…

html 和css 效果--整理集合篇

一.如何用一张图片做背景图,并且图片自适应div的大小 background: url("../stu_wengu.png") center center no-repeat; background-size: cover; /*实现在整个页面中的完全显示效果*/ body{ background-image:url(""); background-size:color;/*自适应*/ background-repeat:no-repeat; background-…

CSS效果：动态图标

HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed…

CSS效果：跑马灯按钮

HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e…

CSS效果：CSS3实现模拟select以及其中的三角形

如图实现这样的效果: html代码如下: <div class="select-bg"> <select class="select-green"> <option value="">高级客户经理</option> <option value="">中级客户经理</option> </select> </div> css样式代码:…

常见问题2：html+css效果综合整理

1.---文本框提示文字颜色--placeholder属性 <input type="text" placeholder="请输入提示文字" /> ::-webkit-input-placeholder { color:#666; } ::-moz-placeholder { color:#666; } /* firefox 19+ */ :-ms-input-placeholder { color:#666; } /* ie */ input:-moz…

CSS效果：CSS实用技巧制作三角形以及箭头效果

实现如图所示的三角形图标: html代码如下: <div class="arrow-up"></div> <div class="arrow-down"></div> <div class="arrow-left"></div> <div class="arrow-right"></div> css样式: body{backgrou…

Bootstrap进阶五：Web开发中很实用的交互效果积累

1.页面切换效果我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 2.视差滚动(parallax-slider) 视差滚动(parallax-slider)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果. 3.侧栏动画效果以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推到一边.这个可过程中可以加入很多微妙而奇特的效果. 4.Slicebox - 3D 图片滑块效果使用 CSS3…

css效果小计

在工作学习中总能发现一些新鲜的页面效果可以用不同的css完成,在这里将遇到的一些css做下记录,以便日后翻阅,如果其中的写法不对,或者有更优写法欢迎留言,不胜感激 1.关于用一个div做出双边框(由于outline-offset在ie下不被支持,所以该方法不支持IE) html/css 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &…

做一个所见即所得的CSS效果

style 也是标签(在非ie内核的浏览器中支持),我们将style设置成 contenteditable的时候,那么那的内容就可以编辑了.仔细的体验下,如果我们将背景修改成红色的.那么只要书写完,立马呈现.哇靠,这很方便我们以后写那种动态的编辑器效果呢,等有时间的话,我再试试. 提示:你可以随意改变.test_div里的CSS代码,比如把green改成blue,#666什么的. 附上我研究的代码: <!DOCTYPE HTML> <html > <head> <…

本地测试html文件时CSS效果显示，但是当django的服务器上运行时效果不显示

本地测试时各种效果都显示, 但是当在django服务器上测试时, 效果却不显示, 原因是我将css文件放在一个static文件夹里, 没有在settings中设置static_dir选项.将static文件夹的绝对路径放到settings中对应的地方就解决了. 详细情况请参考这里https://docs.djangoproject.com/en/1.5/howto/static-files/…

CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了.这里对实现方法做个总结. 实现思路纯css实现的主要手段是利用label标签的模拟功能.label的for属性可以关联一个具体的input元素,即使这个input本身不可被用户可见,有个与它对应的label后,用户可以直接通过和label标签交互来替代原生的input--而这给我们的样式模拟留下了…

CSS效果——绝对居中

实现效果不论窗口尺寸,都可以垂直和水平居中. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>居中效果</title> <link href="style.css" rel="stylesheet"> <style type="text/css"> .w…

CSS Houdini：用浏览器引擎实现高级CSS效果

vivo 互联网前端团队-Wei Xing Houdini被称之为Magic of styling and layout on the web,看起来十分神秘,但实际上,Houdini并非什么神秘组织或者神奇魔法,它是一系列与CSS引擎相关的浏览器API的总称. 一.Houdini 是什么在了解之前,先来看一些Houdini能实现的效果吧: 反向的圆角效果(Border-radius): 动态的球形背景(Backgrond): 彩色边框(Border): 神奇吧,要实现这些效果使用常规的CSS…

css 属性积累

1. letter-spacing:6px; //属性增加或减少字符间的空白(字符间距) 2. cursor // 鼠标移上去的鼠标状态属性值有: (可以将鼠标移上以下属性值看看效果) auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-re…

支持多浏览器的镜像反转css效果

今天接到一个需求,通过一张图片得到其镜像对称的图片.本来说是后台处理的,但这样除了技术上难实现之外,还带来了资源消耗的问题,相当于每张图都要存储一个副本了. 只记得以前用过css的滤镜可以实现这个,但只在IE下有效.后来找到一个兼容多浏览器的样式,大爱. css样式定义: .flip-horizontal { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform…

css样式积累

1.圆角: border-radius:16px 16px 16px 16px; 2透明度: filter: alpha(opacity=80); opacity: 0.8; 3. div内文本自动换行: <style type="text/css"> <!-- /* 自动换行 */ .atuo_break_line { white-space:…

CSS效果：不怎么样的登录表单

HTML: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed…

【一些css效果积累】的更多相关文章