CSS3 - 技术教程文章
CSS3实现的渐变按钮，在IE7、IE6下的滤镜使用。【代码】【图】
.ui-button {BORDER-LEFT-WIDTH: 0px; OVERFLOW: visible; CURSOR: pointer; FONT-SIZE: 16px; HEIGHT: 40px; BORDER-RIGHT-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-BOTTOM-WIDTH: 0px; ZOOM: 1; FONT-WEIGHT: 700; COLOR: #fff; PADDING-BOTTOM: 0px; TEXT-ALIGN: center; PADDING-TOP: 0px; PADDING-LEFT: 20px; FILTER: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘...
学习笔记 第十一章 CSS3布局基础【代码】
第11章 CSS3布局基础【学习重点】了解CSS2盒模型。设计边框样式。设计边界样式。设计补白样式。了解CSS3盒模型。11.1 CSS盒模型基础页面中所有元素基本显示形态为方形的盒子（Box），根据盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示方式。11.1.1 盒模型结构Box具有如下特点：每个盒子都有：边界、边框、填充、内容4个属性。每个属性都包括4个部分：上、右、下、左。属性的四部分...
CSS3--gradient【代码】【图】
gradient主要用于渐变，来实现一些特效，现在网上已经有了很多较好的文章，以我现在菜鸟的级别估计很难写的比他好，所以在这里直接上链接来自w3cplus：http://www.w3cplus.com/content/css3-gradient在这里我主要来讲一下可以用它来做什么好玩的东西（一下均在谷歌浏览器中运行）案例一：滚动条（先上图）瞧上面那个图就是用线性渐变（当然还有一个镜像渐变）做成的，那是怎么做成的呢，直接上代码（其实很简单）。<!--HTML部分-->...
HTML5和CSS3工具资源汇总
HTML5 & CSS3 准备就绪 该网站通过扇形图表的形式展现了从08年到10年以来各大浏览器对HTML5和CSS3的支持情况。发展势头还是很可观的。HTML5安全手册CSS3按钮生成器 所见即所得的为你生成CSS3按钮，你仅需通过基本的鼠标点击便可生成令人满意的CSS3按钮，点击生成好的按钮即可查看相应的CSS3代码。When can I use…（HTML5 & CSS3 浏览器兼容性） 很详细的关于HTML5, CSS3, SVG等技术的浏览器兼容性列表。CSS3颜色值/名称速...
css3动画【代码】【图】
background: -webkit-linear-gradient(90deg, #556270 10%, #FF6B6B 90%);background: -moz-linear-gradient(90deg, #556270 10%, #FF6B6B 90%);background: -ms-linear-gradient(90deg, #556270 10%, #FF6B6B 90%);background: -o-linear-gradient(90deg, #556270 10%, #FF6B6B 90%);background: linear-gradient(90deg, #556270 10%, #FF6B6B 90%); 动画库使用微场景页面/* animation sets *//* 移动 from / to */.pt-page-move...
用CSS3和Canvas来画网格【代码】【图】
我们经常使用一些excel表格来处理数据，在html中，我们可以用table来制成表格。今天来看一下一些不同的方法。方法一：使用CSS3的background的linear-gradient属性linear-gradient表示一种线性渐变，指定好开始的坐标，以及线性渐变的参数，就可以实现背景颜色的多变。先来看效果图：看html代码：<div class="grid"></div>CSS代码： div,canvas{width: 400px;height: 280px;margin: 10px;border: 1px solid #000000;}.grid{b...
css3按钮练习【代码】
css3按钮<!doctype html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"><script src="com/js/jquery.js" type="text/javascript"></s...
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)【代码】【图】
CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)来源：互联网 作者：佚名 时间：03-28 14:17:14 【大中小】border-radius：用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox 和 Safari 3支持该属性。-webkit-border-radius：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核； -moz-border-radius：moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。 在这两个属性有值的时候...
CSS3 实现特殊阴影 (学习笔记)【代码】【图】
学习来源:慕课网http://www.imooc.com/view/240先看效果图↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ HTML结构 1<body> 2<div class="wrap effect"> 3<!-- effect类:是阴影类,其他元素也可以使用 --> 4<h1>Shadow Effect</h1> 5</div> 6<ul class="box"> 7<li><img src="images/photo1.jpg" alt=""></li> 8<li><img src="images/photo2.jpg" alt=""></li> 9<li><img src="images/photo3.jpg" alt=""></li>10</ul>11</body>CSS样...
CSS3 选择器 基本选择器介绍【图】
那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作...
CSS3盒子模型详解【图】
本章将介绍CSS3中各种盒的知识点；主要包含以下内容：CSS3中各种各样盒的类型概念、浏览器支持情况；当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示；掌握给盒添加阴影的属性；掌握几种“box-sizing”属性值的不同含义，能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域，以及边框的高度和宽度；盒的类型 inline-blockcss中我们使用display来定...
CSS3自定义Checkbox特效【图】
在线演示本地下载原文：https://www.cnblogs.com/qixidi/p/10072546.html
CSS3 的一些新特性以及效果【代码】【图】
深入了解 CSS3 新特性来源: ibmdeveloperworks 发布时间: 2012-02-06 15:34 阅读: 5114 次 推荐: 3 原文链接 [收藏] 摘要：现如今，随着 Web2.0 技术的流行，之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求：人们需要实现更加美观、用户体验更好的界面。CSS3，这个新一代的标准应运而生。为了满足现有的对于 Web UI 的开发需求，它提供了一系列强大的功能，如许多新的 CSS 属性（文字，布局，颜色等等），...
CSS3鼠标悬停图片上浮显示描述代码【代码】【图】
效果：http://hovertree.com/texiao/css3/20/效果图：代码如下：<!doctype html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS3鼠标悬停图片上浮显示描述特效 - 何问起</title><base target="_blank"/><link rel="stylesheet" type="text/css" href="http://hovertree.com/texi...
CSS3实现的几个小loading效果【代码】【图】
昨晚上闲的没事突然想做几个小loading效果，下面是昨晚上做的几个小案例，分享给大家 1.水波loading：这个loading是我觉得非常简单，但是看上去的效果却非常不错的一个小loading 这个是效果图片 下面我直接把代码放上来，大家需要的可以直接拉走 核心思想：（旋转，以及overflow:hidden属性），可以把代码中的overflow属性注释掉，保准你看一眼明白了，看不明白回来找我，我对你负责 <!DOCTYPE html> <html...
纯css3(无图片/js)制作的几个社交媒体网站的图标【图】
用纯css3和html来制作一些社交媒体的图标，虽然没有图片和javascirpt,css3配合 html也能实现这些图标。html代码如下：复制代码代码如下:<div class="content"> <ul> <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li> <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li> <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li> ...
CSS3----文本新增样式【代码】
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 300px;height: 300px;margin: 100px auto;background: pink;opacity: 0.1;}#inner{width: 100px;height: 100px;background: deeppink;}</style></head><body><div id="wrap"><div id="inner">inner</div></div></body></html>设置文字阴影 <!DOCTYPE html><html><head><meta charset="UTF-8"><titl...
好程序员web前端技术之CSS3过渡【图】
好程序员web前端技术之CSS3过渡，css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值transition-property：检索或设置对象中的参与过渡的属性transition-duration：检索或设置对象过渡的持续时间transition-delay：检索或设置对象延迟过渡的时间transition-timing-function：检索或设置对象中过渡的动画类型简写：...
css3 鼠标经过颜色渐变【代码】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style> *{margin: 0;padding: 0;} .hover {width: 500px;height: 500px;background-color: red;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;transition: all 0.5s linear;} .hover:hover, .hover:focus, .hover:active {-webkit-transition: all 0.5s linear;-moz-transition: al...
CSS3中的弹性流体盒模型技术详解(一)
从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。下一篇文章，我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局...
（转）利用 SVG 和 CSS3 实现有趣的边框动画【代码】【图】
原文地址今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意，这个技术还是实验性的。首先，让我们来看看基本的概念，然后我们会朝着这个方向努力。请注意，我们将在SVG上使用CSS过渡，可能无法得到...
CSS3彩色进度条加载动画 带进度百分比【图】
在线演示 本地下载原文：https://www.cnblogs.com/datiangou/p/9986695.html
《图解CSS3》笔记 Flex
Flexbox模型的三个规范：1. 旧版本 2009年 display: box、inline-box2. 混合版本 2011年 display: flexbox、inline-flexbox3. 新版本 display: flex、inline-flex 当display属性为以上时，将为其后代创建FFC(Flex Formatting Context)。旧版本属性如下：1. box-orient 定义伸缩主轴的方向 horizontal | vertical | inline-axis (内联轴排列)| block-axis (块轴排列)2. box-directio...
css3动画简介以及动画库animate.css的使用【图】
在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果...
CSS3新特性【代码】
CSS3 边框：border-radius（倒圆角）box-shadow （盒子阴影）border-image （边界图片）CSS3 背景：background-size（属性规定背景图片的尺寸。）background-origin（属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域）CSS3 文本效果：text-shadow（可向文本应用阴影，可以设置水平阴影、垂直阴影、模糊距离，以及阴影的颜色）word-wrap（word-wrap 属性允许您允许文本强制文本进行换...
CSS3<一>【代码】
1. 边框（圆角边框、加阴影和用图片绘制）新增加 border-radius box-shadow border-image.div1{ border:2px solid purple; border-radius: 25px; -moz-border-radius:25px;(火狐老版本) width:600px; height:300px; box-shadow:10px 10px 5px #888888; -webkit-border-image: url(border.png) 2 2 round;（chrome）}2.背景新增加 background-size background-origin background-clip.div1{ bord...
CSS3特殊效果
CSS3，html5：各种属性，有酷炫的效果兼容性问题：政府大多数政府机构都是用的IE6.7，所以很多时候要兼容IE6.7，IE连PNG格式都不支持margin：本身有兼容性问题，在其他地方可能有问题padding：内边距还好一些APP端只有一个兼容性问题，屏幕，要自适应屏幕两种方法：（腾讯的autoSize,js）（metaholder.js 连rem都可以不用，用px都可以）手机端只有屏幕兼容性问题，所以常用CSS3，html5CSS3扩展：浏览器有兼容性问题，有些可以在浏览...
关于CSS以及CSS3那些事
-moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表safari、chromecontenteditable="true" 内容变的可编辑onpaste="return false" 表示不能粘贴,用于input或不能粘贴的div、span、p标签等onselectstart="return false" 不能复制文本内容-moz-user-select:none; 在火狐下面设置样式不能选择插入样式表的方法有三种: 1、外部样式表（.css文件引入...
css3 动画基础【代码】
实例动画step1：改变字体颜色<h1><a href="http://www.rainleaves.com">雨打浮萍</a></h1>h1 a{color:#03c;text-decoration:none;-webkit-transition:color .5s ease-in-out;-moz-transition:color .5s ease-in-out;-o-transition:color .5s ease-in-out;transition:color .5s ease-in-out;} h1 a:hover{color:#f60; }step2：改变背景颜色<h2>专注于web前端开发</h2>h2:hover{-webkit-transition:background-color 0.5s linear;-mo...
css3在页面中插入内容
A． 使用选择器来插入内容h2:before{ content:"前缀";}h2:after{ content:"后缀";}B． 指定个别的元素不进行插入h2.sample:before{ content:none;}2. 插入图像A． 在标题前插入图像文件h2:before{ content:url(anwy.jpg);}B． 将alt属性的值作为图像的标题来显示（用不了）img:after{ content:attr(alt); display:block; text-align:center; margin-top:5px; font-size:11px; font-weight:bold; ...