19.CSS3

前端三要素: HTML (结构)+ CSS(表现)+ JavaScript (行为) 一.什么是 CSS 1. CSS 是什么 CSS :Cascading Style Sheets ,层叠(级联)样式表核心作用:表现层(美化网页),字体.颜色.边距.高度.宽度.背景图片.网页定位.网页浮动-- 2. CSS 发展史 CSS 1.0:只能美化一些基本的样式 CSS 2.0: div (块) + CSS ,提出 HTML 与 CSS 结构分离的思想,网页变得简单,利于 SEO(搜索引擎优化) C…

新特性AAtitti css3 新特性attilax总结titti css

Atitti css3 新特性attilax总结图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap & Text-overflow 样式9 Word-wrap9 Text-overflow10 文字渲染(Text-decoration) 描边12 CSS3 的多列布局(multi-column layout)13 边框和颜色(color, border)14 CSS3 的渐变效果(Gradient)1…

Atitti css3 新特性attilax总结

深入了解——CSS3新增属性

CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. CSS 选择器案例 Body > .mainTabContainer div > span[5]{ Border: 1px solod red; Background-color: white; Cursor: pointer; } 此处的 CSS 选择器即:“body > .mainTabC…

36个让人惊讶的 CSS3 动画效果演示【转】

本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择.如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画. 1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero --------------------------------------…

<转载>css3 概述

参照 https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/ http://www.cnblogs.com/ghost-xyx/p/3781049.html http://www.blueidea.com/tech/web/2009/6930.asp —— 一个很好的网站. 第 1 页选择器第 2 页 RGBA和透明度第 3 页多栏布局第 4 页多背景图第 5 页 Word Wrap 第 6 页文字阴影第…

转：35个让人惊讶的 CSS3 动画效果演示

本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支持的不断完善,设计师和开发者们有了更多的选择.如今,用纯 CSS 就可以实现各种各样很酷的效果,甚至是动画. 原文地址:http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html 1.…

[转]深入了解 CSS3 新特性

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用 C…

高效开发之SASS篇灵异留白事件——图片下方无故留白你会用::before、::after吗 link 与 @import之对比学习前端前必知的——HTTP协议详解深入了解——CSS3新增属性菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

高效开发之SASS篇作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是编程语言,因此不可以自定义变量,也不可以引用等等.作为一名程序员,不能编程怎么能忍受,这就是sass存在的意义,工业化生产,让CSS程序范儿. 主要目的就是让你写CSS时不在重复. SASS优点可以简单的规纳为以下几点: 增加了一些编程特性…

css3系列--概述

CSS3分成了不同类别,称为“modules”.而每一个“modules”都有于CSS2中额外增加的功能,以及向后兼容.CSS3早于1999年已经开始制订.[18]直到2011年6月7日,CSS 3 Color Module终于发布为W3C Recommendation.[19] CSS3里增加了不少功能,如:“border-radius”.“text-shadow”.“transform”以及“transition”.CSS3亦支持动画(animation)及立体(preserved-3d).…

用CSS3制作50个超棒动画效果教程

这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器.(IE浏览器谢绝观赏~) 1.CSS3实现钟表效果(基于jQuery) 使用CSS3的基本变形特性:rotate,并结合了jQuery这类javaScript框架制作的CSS3时钟效果. 2.模拟时钟模拟时钟基于过渡webkit和CSS3变形,javascript用于将其按当前时间转动. 3.可…

30+有用的CSS代码片段

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人的问题外,也包含了一些解决新问题的新技术. 1. 垂直对齐如果你之前遇到过这个问题,你就应该知道它是多么的烦人,幸运的是,现在你可以使用CSS3变换来解决这个问题: .vc{ position: relative; top: 50%; -webkit-transform: translateY(-…

CSS有用的代码片段

1.垂直对齐 .vc{ position:relative; top:50%; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); } 2.只在一侧或者两侧具有投影 .box-shadow{ background-color:#AC92EC; width:160px; height:90px; margin-top:-45px; margin-left:-80…

前端学习日记之HTML、CSS 简单总结

前端学习日记之HTML.CSS 简单总结标签(空格分隔): html css 前端学习日记 html超文本标记语言一. h标题标签 h1-h7 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="11"> <meta name="description&…

【转】30+有用的CSS代码片段

来自:WEB资源网链接:http://webres.wang/31-css-code-snippets-to-make-you-a-better-coder/ 原文:http://www.designyourway.net/blog/resources/31-css-code-snippets-to-make-you-a-better-coder/ 在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都…

Windows环境下sublime text 3搭建前端开发环境

一.安装SubLime Text 3 SubLime Text 3官网下载:https://www.sublimetext.com/ 二.安装Package Control 进入sublime后,按快捷键Ctrl+.键,进入命令行模式, sublime text 3在命令行输入: import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'…

html5学习之第一步：认识标签，了解布局

图1. Acme United的网页的规划 Header区的例子包含了页面标题和副标题,< header>标签被用来创建页面的Header区的内容.除了网页本身之外,< header>标签还可以包含关于< section>和< article>的公开信息.这里创建的网页有该页面的一个Header区,这在高层设计中有给出,以及一个位于Article和Section区内部的Header区. 清单1提供了一个< header>标签标记的例子. 清单1.…

19款绚丽实用的jQuery/CSS3侧边栏菜单

jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单,这些侧边栏菜单可以用在不同风格的网页上,如果你觉得不错,也可以进入其下载页面下载菜单源代码. 1.jQuery 3D 垂直多级菜单可筛选菜单项这是一款手风琴样式的垂直多级菜单,其特点是利用CSS3特性让菜单外观显得3D立体的效果,同时你也可以在搜索框中输入关键字来筛选菜单项. 在线演示源码下…

19 01 04 CSS3 圆角 grba(带通明的) tansition动画 transform变换 animation动画

CSS3圆角设置某一个角的圆角,比如设置左上角的圆角:border-top-left-radius:30px 60px; 同时分别设置四个角: border-radius:30px 60px 120px 150px; 设置四个圆角相同:border-radius:50%; rgba(新的颜色值表示法) 2.rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度 CSS3 transition动画 1.transition-property 设置过渡的属性,比如:widt…

总结30个CSS3选择器

或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法.*选择器也可以应用到子选择器中,例如下面的代码: #container * { border:1px solid black; } 这样ID为container 的…

神通广大的CSS3选择器

每个前端工程师可能每天都会写一些css,其中选择器是很主要的一部分.但是,大家可能每天写的大多是#id,.class这样的选择器,这并不稀奇,但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器,就可以简化我们的代码. 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度,如果有需要,可以在这里查看它的浏览器支持情况:「caniuse.com」. 文章目录: 一.基本选择器二.层次选择器三.伪类选择器四.伪元素五.属性选择器一.基本选择器 1. 通配选择器…

CSS3与页面布局学习总结（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &…

CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border).内边距(Padding)和内容(Content),其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型,加上了doctype声明,让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子.当设置一个元素的样式如下: <!DOCTYPE html> <html> <…

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务.当然内容与用户资源也是不能忽视的.尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控制的,就不应该使用HTML标签完成,如果CSS能解决的问题尽量不要用JavaScript完成. 一.CSS3概要 CSS(Cascading Style Sheet)是层叠样式表的…

CSS3学习总结——实现瀑布流布局与无限加载图片相册

首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流布局与无限加载图片相册</title> <style type="text/css"> * { margin: 0; padding: 0; } body { back…

总结30个CSS3选择器（转载）

或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样式的方法. *选择器也可以应用到子选择器中,例如下面的代码: #container * { border:1px solid bl…

08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧: 简单版本: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="…

css3中transition和display的坑

不知道大家做css3动画的时候遇到过这种情景没? 用opacity实现淡入淡出的效果.噢!good!一切正常给个栗子: <!DOCTYPE html> <html> <meta charset="uft-8"> <head> <style> .div1{ background: red; } .div2 { width:100px; height:100px; background:blue; transition:opac…

为 Web 设计师准备的 20 款 CSS3 工具

1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. Button Maker 7. Modernizr 8. CSS3 Cheat Sheet 9. CSS3 Menu 10. Rounded Corner Generator 11. Gradient Generator 12. Border Image Generator 13. Spritebo…

纯css3手机页面图标样式代码

全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.htm 简洁代码如下: <link rel="stylesheet" href="http://hovertree.com/texiao/css/19/hoverkicon.css"> <div><i class="icono-mai…

【19.CSS3】的更多相关文章