隽永东方Imagination & Inspiration Show Time — 2017/8/14

作者: Xiaoge 所属分类: 隽永风采 // 评论数 // 参与数
发表于: 2017 年 8 月 14 日 3161
标签: II Show

(1 票, 评分: 5.00 总分 5)

短链接: http://dfsj.net/4VOzI

今天进行技术分享的是： @lena @leo 精彩分享内容如下：

@lena

1./*pac-man*/

 .pac-man{

 		width: 0;

		height: 0;

		border: 60px solid yellow;

		border-color: yellow transparent yellow yellow;

		-webkit-border-radius:60px;

		-moz-border-radius:60px;

		border-radius: 60px;

		}

 

	/*heart*/

	    .heart {

	    position: relative;

	    width: 160px;

	    height: 200px;

	    }

	

		.heart:before {

	    position: absolute;

	    left: 20px;

	    width: 80px;

	    height: 120px;

	    content: "";

	    background: #f00;

	    border-radius: 100px;

	    border-radius: 100px 100px 0 0;

	    -webkit-transform: rotate(-45deg);

	    }

		.heart:after {

		    position: absolute;

		    left: 48px;

		    top: 0;

		    width: 80px;

		    height: 120px;

		    content: "";

		    background: #f00;

		    border-radius: 100px;

		    border-radius: 100px 100px 0 0;

		    -webkit-transform: rotate(45deg);

		}

 

 

 

2.按钮悬停效果：http://www.sucaihuo.com/jquery/24/2493/demo/

3.可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

 

input:-webkit-autofill {

-webkit-box-shadow: 0 0 0px 1000px #999 inset;

border: 1px solid #CCC!important;

}

 

css3多种漂亮搜索框：http://www.sucaihuo.com/jquery/21/2151/demo/

14种酷炫的input特效样式：http://www.sucaihuo.com/jquery/23/2336/demo/

zitifangye:http://www.html5tricks.com/demo/html5-3d-letter-text/index.html

tuptexiao:http://demo.lanrenzhijia.com/2015/css1120/

100

101

102

103

104

105

106

107

108

109

110

111

1./*pac-man*/

.pac-man{

width: 0;

height: 0;

border: 60px solid yellow;

border-color: yellow transparent yellow yellow;

-webkit-border-radius:60px;

-moz-border-radius:60px;

border-radius: 60px;

}

/*heart*/

.heart {

position: relative;

width: 160px;

height: 200px;

}

.heart:before {

position: absolute;

left: 20px;

width: 80px;

height: 120px;

content: "";

background: #f00;

border-radius: 100px;

border-radius: 100px 100px 0 0;

-webkit-transform: rotate(-45deg);

}

.heart:after {

position: absolute;

left: 48px;

top: 0;

width: 80px;

height: 120px;

content: "";

background: #f00;

border-radius: 100px;

border-radius: 100px 100px 0 0;

-webkit-transform: rotate(45deg);

}

2.按钮悬停效果：http://www.sucaihuo.com/jquery/24/2493/demo/

3.可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景；如：

input:-webkit-autofill {

-webkit-box-shadow: 0 0 0px 1000px #999 inset;

border: 1px solid #CCC!important;

}

css3多种漂亮搜索框：http://www.sucaihuo.com/jquery/21/2151/demo/

14种酷炫的input特效样式：http://www.sucaihuo.com/jquery/23/2336/demo/

zitifangye:http://www.html5tricks.com/demo/html5-3d-letter-text/index.html

tuptexiao:http://demo.lanrenzhijia.com/2015/css1120/

@leo

简述几个css hack?

(1) 图片间隙 
在div中插入图片，图片会将div下方撑大3px。hack1：将<div>与<img>写在同一行。hack2：给<img>添加display：block；
dt li 中的图片间隙。hack：给<img>添加display：block；
(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）
hack1：给元素添加：font-size：0；
hack2：声明：overflow：hidden；
表单行高不一致
hack1：给表单添加声明：float：left；height： ；border： 0；
鼠标指针
hack：若统一某一元素鼠标指针为手型：cursor：pointer；
当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状
hack1：给a加display：inline-block；
hack2：给li加float：left；

CSS hack方式之一：条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下

	只在IE下生效
	<!--[if IE]>
	这段文字只在IE浏览器显示
	<![endif]-->
	
	只在IE6下生效
	<!--[if IE 6]>
	这段文字只在IE6浏览器显示
	<![endif]-->
	
	只在IE6以上版本生效
	<!--[if gte IE 6]>
	这段文字只在IE6以上(包括)版本IE浏览器显示
	<![endif]-->
	
	只在IE8上不生效
	<!--[if ! IE 8]>
	这段文字在非IE8浏览器显示
	<![endif]-->
	
	非IE浏览器生效
	<!--[if !IE]>
	这段文字只在非IE浏览器显示
	<![endif]-->

手机端上 图片长时间点击会选中图片，如何处理?

onselect=function() {
return false
}


http://www.alloyteam.com/nav/

简述几个css hack?

(1) 图片间隙

在div中插入图片，图片会将div下方撑大3px。hack1：将<div>与<img>写在同一行。hack2：给<img>添加display：block；

dt li 中的图片间隙。hack：给<img>添加display：block；

(2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）

hack1：给元素添加：font-size：0；

hack2：声明：overflow：hidden；

表单行高不一致

hack1：给表单添加声明：float：left；height：；border： 0；

鼠标指针

hack：若统一某一元素鼠标指针为手型：cursor：pointer；

当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状

hack1：给a加display：inline-block；

hack2：给li加float：left；

CSS hack方式之一：条件注释法

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下

只在IE下生效

<!--[if IE]>

这段文字只在IE浏览器显示

<![endif]-->

只在IE6下生效

<!--[if IE 6]>

这段文字只在IE6浏览器显示

<![endif]-->

只在IE6以上版本生效

<!--[if gte IE 6]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]-->

只在IE8上不生效

<!--[if ! IE 8]>

这段文字在非IE8浏览器显示

<![endif]-->

非IE浏览器生效

<!--[if !IE]>

这段文字只在非IE浏览器显示

<![endif]-->

手机端上图片长时间点击会选中图片，如何处理?

onselect=function() {

return false

}

http://www.alloyteam.com/nav/