分类目录归档:CSS笔记

CSS样式,magento模板开发,magento的css

IE6-IE8 media兼容问题

Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-IE8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。

使用场景:
Bootstrap里面就引入了这个JS文件,从名字看出来是自适应的兼容。打开IE看了一下,效果挺好的,自适应的效果挺好的。Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

使用方式
官方demo地址:http://scottjehl.github.com/Respond/test/test.html
1.在css中正常用 min/max-width media queries

@media screen and (min-width: 480px){
…styles for 480px and up go here
}

2.引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)

引入方式:

炫酷的HTML5动画应用

看到几个比较好看有用的html5 css动画效果,收藏希望对大家有用

HTML5目前已经逐渐成熟,越来越多的Web项目都已经用到了HTML5技术,包括CSS3。本文主要分享了一些最新的HTML5动画应用,大部分都比较炫酷,也有一些比较实用的,并且每一个动画都提供源代码下载。

1、HTML5 Canvas实现画板涂鸦动画应用

这是一款HTML5网络画板,拥有基础的图形绘制功能,相对比较简单,基于canvas,因此非常灵活。

1

2、HTML5堆木头游戏

这款游戏的玩法是将木头堆积起来,多出的部分将被切除,直到下一根木头无法堆放为止。这款HTML5游戏的难点在于待堆放的木头是移动的,因此需要你很好的控制木头下落的位置。

1

3、HTML5 3D立方体图片切换动画

这款HTML5动画可以将图片切分成几个立方体,带有3D的立体效果。

1

4、100多个纯CSS3动画图标

这里总共有100多个纯CSS3实现的动画图标,找找看,总有一个适合你。

20150107101848414

5、HTML5/CSS3动画相册

这款HTML5相册的特点是我们可以将照片随意放置在桌面上,图片可以任意倾斜,看上去很自然。

1

6、HTML5 Canvas模拟衣服撕扯动画

该HTML5动画会捕获到鼠标拖拽的用力程度,从而来判断并实现衣服应该破损的程度,越用力,衣服被撕破的速度越快,赶紧来体验一下这个HTML5动画吧。

20150107101850973

7、jQuery/CSS3带Tooltip的滑杆动画

这是一个带有Tooltip提示框的滑杆,基于jQuery和CSS3,外观样式非常不错。

1

8、5个可爱的CSS3 Loading加载动画

这是一款可爱的CSS3 Loading动画,一共有5种动画类型,每组Loading动画都非常有创意。

1

用CSS3创建漂亮按纽的30个教程

用CSS3创建漂亮按纽的30个教程

Glossy Buttons With CSS3 Gradient

Demo || Tutorial

用CSS3创建按纽的30个教程

Create 3D Social Media Buttons with CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

Crafting Minimal Circular 3D Buttons with CSS

Demo || Tutorial

用CSS3创建按纽的30个教程

How to Create Fancy Animated Buttons in CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

Creating a 3D Button in CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 and jQuery Slide Out Button

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Animated Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Fanciness Button Switches with Checkboxes

Demo || Tutorial

用CSS3创建按纽的30个教程

Colored Buttons in CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

Glass Edge with CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Pure Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程Amazing Play CSS3 Button

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 BonBon Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Push it CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

3D Button

Demo || Tutorial

用CSS3创建按纽的30个教程

Cross Browser Pure CSS3 Button

Demo || Tutorial

用CSS3创建按纽的30个教程

3D Chunky CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Pure CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Dynamic Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Pratical CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Beautiful Animated CSS3 Push Button

Demo || Tutorial

用CSS3创建按纽的30个教程

Download Green 3D Button

Demo || Tutorial

用CSS3创建按纽的30个教程

Metal Electric CSS3 Button

Demo || Tutorial

用CSS3创建按纽的30个教程

Pure CSS Push Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Beautiful Pure CSS3 Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Starbursts

Demo || Tutorial

用CSS3创建按纽的30个教程

Fantastic Animated Buttons using CSS3

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Google-styled buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

Create GitHub-style CSS3 buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

CSS3 Animated Bubble Buttons

Demo || Tutorial

用CSS3创建按纽的30个教程

来源:OPEN资讯

纯CSS3的导航菜单生成工具和教程

CSS3 的引入为web设计人员和开发人员带来了巨大的的可能性。通过3D变换,CSS3动画和先进的造型支持,可以建立一个无需 JavaScript 的导航菜单,但通过微妙的动画和样式在视觉仍然令人印象深刻。

本文介绍一些纯 CSS3 的导航菜单生成工具和教程:

CSS3 Menu Generators

Pure CSS Menu

\

CSS3 Menu

\

CSS Menu Maker

\

CSS3 Menu Generator

\

Recent Tutorials

Create a stunning Menu in CSS3

\

How to create a pure CSS dropdown Menu

\

CSS3 Dropdown Menu by DesignModo

\

CSS3 DropDown Menu by Red Team Design

\

Pure CSS3 LavaLamp Menu

\

Apple Menu with CSS3

\

Dark Menu Pure CSS3 Menu

\

 转自php100
纯css样式实现要比JS好的多,至少不用去掉JS速度将是很大提高。喜欢就顶一下

css 自定义背景图片大小

background : background-color || background-image || background-repeat || background-attachment || background-position 

这是查css手册插出来的结果
background只能定义,背景颜色/图片/是否重复/是否滚动/图片位置

但是如果我们想定义这个背景中背景图片的大小要怎样定义呢?

比如说,同一个背景图片,我可能再两个地方调用
一个地方我需要这个图片大一些,一个地方我需要这个图片小一些

经过苦苦查询……
就目前来看,只能如你所说,需要不同尺寸的图片也只能多准备不同的图片了。
没有办法,除了把背景图片插入在结构代码里使用。随后把img定义成块,
然后再CSS控制尺寸。不过相应的麻烦又来了,只能采用定位或浮动布局了。