#cSS3

CSS3 GPU硬件加速

 1<!DOCTYPEhtml>2<htmllang="zh-CN">34<head>5<metacharset="UTF-8">6<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">...
代码星球 ·2021-02-14

CSS3 transition 浏览器兼容性

1、兼容性根据canius(http://caniuse.com/#search=transition),transition 兼容性如下图所示:  1<!DOCTYPEhtml>2<html>3<head>4<style>5div6{7wi...

CSS3立体文字最佳实践

前端开发whqet,csdn,王海庆,whqet,前端开发专家上一篇的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果,当中3d文字效果最为流行,限于篇幅只展示了其3D实现原理,没有考虑代码的复用性和可移植性。今天来补充下。顺便领略sass的强大功能,请大家摩摩拳擦擦掌。开工咯!案例效果还是在code...

CSS3与页面布局学习总结(七)——前端预处理技术(Less、Sass、CoffeeScript、TypeScript)

CSS不像其它高级语言一样支持算术运算、变量、流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等。而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题。其中Less[les...

CSS3与页面布局学习总结(五)——Web Font与Sprite

webfont是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体:a)、安装好操作系统后,会默认安装一些字体,这些字体文件描述了每一个文字的形态,一般中文文件大,英文文件小,因为中文字符数多;在控制面板中可以找到文字文件夹,在C:WindowsFonts下也可以直接找到...

CSS3与页面布局学习总结(三)——BFC、定位、浮动、7种垂直居中方法

BFC(BlockFormattingContext)即“块级格式化上下文”,IFC(InlineFormattingContext)即行内格式化上下文。常规流(也称标准流、普通流)是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内...

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

盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin)、边框(Border)、内边距(Padding)和内容(Content),其实盒子模型有两种,分别是ie盒子模型和标准w3c盒子模型,加上了doctype声明,让所有浏览器都会...

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

web前端开发者最最注的内容是三个:HTML、CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。当然内容与用户资源也是不能忽视的。尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控...

HTML5与css3权威指南(一)

doctype声明:<!DOCTYPEhtml>字符编码:<metacharset="utf-8"> 不允许写结束标记:area,base,br.col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr...
代码星球 ·2021-02-09

CSS3之body背景图平铺

你再也不需要因为屏幕大小不同而去选择多张图片作为背景图了,css3教你做人;body{background:url('xx.jpg')topcenterno-repeat;background-size:cover;}  或者body{background:url('back.jpg');backg...
代码星球 ·2021-02-08

移动端轮播完整版css3加原生写法

<!doctypehtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,max...

css3爆炸轮播效果

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>爆炸效果轮播</title><style>*{margin:0;padding:0;}ul,ol{lis...
代码星球 ·2021-02-08

心形陀螺案例css3

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>Title</title><style>body{background:#000;}.box{width...
代码星球 ·2021-02-08

圆周运动的css3特效案例

<!doctypehtml><htmllang="zh-cn"><head><metacharset="UTF-8"><title>圆周运动的css3特效</title><style>.box{width:300px;height:30...

css3的各种属性的讲解

  1.渐变(gradients)    水平渐变:lineargradient    语法:background:linear-gradient(direction,color1,color2);      direction介绍:        1.这个参数可以省略,默认方向从上到下;        2.这个阐述如...
代码星球 ·2021-02-08
首页上一页12345...下一页尾页