Nolan's Blog

a PHP JS UI APP developer

other

Make A Back Button (iphone ios6 style) With CSS3

Bildschirmfoto-2011-12-05-um-11.29.44

Always we need to make insert this button in our site. (be less in today)
so how can build it only with css3 ? Come with me

1. build html


<a class="back" href="#"><b>Back</b></a>

2. design a simple button style


.back {
	color: #FFF;
	text-decoration: none;
	position: relative;
	display: block;
	float:left;
	margin-top:-8px;
	margin-left:5px;
}
.back b{
	display: inline-block;
	font: bold 13px/26px Tahoma;
	height: 27px;
	padding: 0 10px 0 10px;
	background: -webkit-linear-gradient(top, #FFAF44, #F28000);
	background: -moz-linear-gradient(top, #FFAF44, #F28000);
	border: 1px solid #CB741D;
	border-radius: 5px;
	text-shadow: 0 -1px 0px rgba(0, 0, 0, .4);
	box-shadow:inset rgba(255,255,255,.2) -1px 1px 1px;
}

QQ截图20140520104830

3.bulid a arrow with :before


.back:before{
	content: '';
	display: inline-block;
	width: 20px; /* 20 * √2 = 28 */
	height: 20px;
	-webkit-transform-origin: 0 0; /* set ratation point */
	-moz-transform-origin: 0 0;
	-webkit-transform: scaleX(0.8) rotate(45deg);  /* rotation 45 deg */
	-moz-transform: scaleX(0.8) rotate(45deg);
	background: -moz-linear-gradient(-45deg, #FFAF44, #F28000);
	background: -webkit-linear-gradient(-45deg, #FFAF44, #F28000);
	border: 1px solid #CB741D;
	border-radius: 3px 5px;
	position: absolute;
	left: 0px;
	top: -1px;
}

QQ截图20140520105620

4. adjustment


.back b {
	border-radius: 3px 5px 5px 3px;
	border-left: 0;
	position: relative;
	z-index: 2;
}
.back:before{
	z-index: 1;
	left: 2px;
}

20140520110345

da da da ~~~~..

继续阅读》

,

Backup 备份一下自己的Vim设置/插件

插件

ctags:
先生成tags文件,在命令行下进入到你的项目文件,执行命令:ctags -R,在当前目录下就会生成一个tags文件,生成tags数据库索引,在gvim中执行:


set tags=/home/cry/test/tags

需要进行函数名、变量名、结构名、结构成员补全时输入 Ctrl+X Ctrl+O, (
需要头文件名补全时输入 Ctrl+X Ctrl+I,
需要文件路径补全时输入 Ctrl+X Ctrl+F,
需要跳转到函数的定义处 Ctrl+] 或 Ctrl+左键单击

NERD_tree:一个文件管理工具

project:一个项目管理工具

winmanager:界面管理

Emmet.vim:zenCoding工具,前段必备

git-vim:git工具

xptemplate:代码片段补全 使用“Ctrl+l,”代码补全

下载:vim_2014_1.zip

继续阅读》

,

Powered by WordPress.org.