HTML5&CSS3

Hypertext Markup Language
Cascading Style Sheets

HTML5&CSS3

HTML5 Canvas组合图形

Posted on October 10, 2016by Alan

在学习Canvas组合图形时看描述有些云里雾里，于是记录下实际效果来方便查看：

Canvas组合图形

#canvas示例代码

<canvas id="canvas" width="400" height="300"></canvas>

#js示例代码

function draw(id){
  var canvas = document.getElementById(id);
  if(canvas == null)
    return false;
  var context = canvas.getContext('2d');
  var oprtns = new Array(
    "source-atop",
    "source-in",
    "source-out",
    "source-over",
    "destination-atop",
    "destination-in",
    "destination-out",
    "destination-over",
    "lighter",
    "copy",
    "xor"
  );
  i = 8;
  context.fillStyle = "blue";
  context.fillRect(10,10,60,60);
  context.globalCompositeOperation = oprtns[0];#替换此处数字来查看效果
  context.beginPath();
  context.fillStyle = "red";
  context.arc(60,60,30,0,Math.PI*2,false);
  context.fill();
}
CodingHTML5&CSS3

响应式布局和Bootstrap

Posted on September 20, 2015by Alan

如何实现响应式布局？

  • CSS 3 Media Query(最简单)
  • 原生Javascript(成本高，不推荐使用)
  • 第三方开源框架(可以很好的支持浏览器响应式布局的设计)

Media常见属性：

device-width, device-height 屏幕宽高

width, height                           渲染窗口宽高

orientation                               设备方向

resolution                                 设备分辨率

内联样式写法





<style>
	@media screen and (min-width: 480px){
		body{background: blue;}
	}
</style>

外部样式写法

<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)" >

Bootstrap响应式框架

官网地址：http://getbootstrap.com/

头部引用的代码参考

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--[if lt IE 9]>
  <!--IE低版本兼容HTML5-->
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <!--IE低版本兼容CSS3-->
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

通常会在body标签中最后加入

<!--引入jQuery和Bootstrap的JS插件-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

 

CodingHTML5&CSS3

如何使用Sublime快速添加DOCTYPE等信息

Posted on August 8, 2015by Alan

Sublime Text 常用快捷键

快捷键组合 功能
shift + cmd + p 打开命令面板
control + ` 控制台
cmd + n 新建标签
cmd + 数字 标签切换
cmd + option + 2 分成两屏
control + 数字 分屏时移动到不同的屏幕
cmd + delelte 删除光标前所有字符, 貌似是Mac快捷键
cmd + f 查找
option + cmd + f 查找替换
cmd + t 文件跳转
control + g 行跳转, 类似vim中的num + gg
cmd + r 函数跳转
cmd + / 给选中行添加或去掉注释
cmd + [或 cmd + ] 智能行缩进
cmd + k + b 开关侧边栏

在HTML5之前DOCTYPE这段声明实在是太过繁冗，前端工程师通常都是直接复制或者使用Dreamweaver这样的工具默认进行添加，通常不会有人去记下那么一长串的代码。今天我们要讲的是如Sublime中快速添加这段声明以及整个HTML框架，使用下面的功能需要配合安装Emmet插件，安装方法可以参见Sublime Text 使用指南一文。

具体做法是在文件中输入下面粗体部分的内容然后按下tab键即可得到下面对应的内容

html:4t

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

html:4s

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

html:xt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

html:xs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>

html:5

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

</body>
</html>
CodingHTML5&CSS3

纯CSS打造自适应表格

Posted on July 15, 2015by Alan
<!DOCTYPE html>
<html>
	<head>

		<style type="text/css">
			body {
			    font-family: arial;
			  }

			  table {
			    border: 1px solid #ccc;
			    width: 100%;
			    margin:0;
			    padding:0;
			    border-collapse: collapse;
			    border-spacing: 0;
			  }

			  table tr {
			    border: 1px solid #ddd;
			    padding: 5px;
			  }

			  table th, table td {
			    padding: 10px;
			    text-align: center;
			  }

			  table th {
			    text-transform: uppercase;
			    font-size: 14px;
			    letter-spacing: 1px;
			  }

			  @media screen and (max-width: 600px) {

			    table {
			      border: 0;
			    }

			    table thead {
			      display: none;
			    }

			    table tr {
			      margin-bottom: 10px;
			      display: block;
			      border-bottom: 2px solid #ddd;
			    }

			    table td {
			      display: block;
			      text-align: right;
			      font-size: 13px;
			      border-bottom: 1px dotted #ccc;
			    }

			    table td:last-child {
			      border-bottom: 0;
			    }

			    table td:before {
			      content: attr(data-label);
			      float: left;
			      text-transform: uppercase;
			      font-weight: bold;
			    }
			  }
		</style>

	</head>
	<body>
		<table>
		  <thead>
		    <tr>
		      <th>Payment</th>
		      <th>Issue Date</th>
		      <th>Amount</th>
		      <th>Period</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr>
		      <td data-label="Payment">Payment #1</td>
		      <td data-label="Issue Date">02/01/2015</td>
		      <td data-label="Amount">$2,311</td>
		      <td data-label="Period">01/01/2015 - 01/31/2015</td>
		    </tr>
		    <tr>
		      <td data-label="Payment">Payment #2</td>
		      <td data-label="Issue Date">03/01/2015</td>
		      <td data-label="Amount">$3,211</td>
		      <td data-label="Period">02/01/2015 - 02/28/2015</td>
		    </tr>
		  </tbody>
		</table>
	</body>
</html>

原始尺寸表格效果
自适应表格CSS原始大小
代码主要运用到了@media来判断调用的样式，伪元素:before,:after来匹配相关内容，以及用content: attr(data-label)来获取自定属性中的值，缩放及手机效果，
自适应表格CSS手机效果

HTML5&CSS3电商经验

17 crucial web design trends for 2015

Posted on December 18, 2014by Alan

全文转载一下这篇Econsultancy上的有关2015年网页设计趋势的文章，留待周末拜读

Please do not mistake me for some kind digital prognosticator, soothsayer guru, evangelist, swami, samurai or whatever risible term is currently popular in digital marketing circles.

I am but one writer who has spent the last year immersed (and only occasionally floundering) in previously unchartered waters in my first 12 months of writing for Econsultancy.

This isn’t just a list of trends that I’ve noticed during my own research, but also ones discovered by my many venerable colleagues, various friends of the blog and passed on to me by Dan Barker or compiled throughout the year by Chris Lake.

All of whose contributions to the following have been invaluable. (You can therefore read the above as, “if you pick on me I’ll get my older brothers on you.”)

Some of these predictions will be more obvious than others, but I’ve decided to err on the side of ‘likely’ rather than ‘wildly fanciful’.

Some of these predictions will also be more about what I’d like to see, rather than what we’ll definitely see.

Anyway, with that massive list of caveats out of the way, let’s begin.

Parallax scrolling for everybody

Now that mesmerising parallax scrolling templates are readily available on WordPress and other platforms for very little expense, expect to see a lot more highly innovative, narratively driven web pages.

Card design

As Chris Lake states in his round-up of card-based web design, cards are ideal for the TL;DR generation, perfect for mobile devices and responsive design.

We’ll certainly be seeing a lot more of them in the years ahead.

Pinterest

Coca-Cola

Material design

The meeting point between skeuomorphism and entirely flat design. Google invented it apparently, here’s a quote directly from its manifesto:

The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Ghost buttons

Much like an eerie spectre hovering in the corner, ghost buttons aren’t meant to distract you, just attract your attention in a subtle way.

They are transparent but have a recognisable shape, are bordered with a very thin line and contain light sans-serif fonts.

They’re not quite a call-to-action. Perfect for designers not wishing to clutter their sites with albeit necessary navigation.

Examples from WebsitesWithGhostButtons.Tumblr

Speed

“It’s always talked about, but people don’t always do anything about it,” according to Dan Barker. He continues:

These things come and go in waves. There was a period where everyone would try for minimal graphics to speed things up, then desktop connections got faster and nobody worried.

Then mobile came along and everyone worried again. Then 3G got faster and lots of sites let it slip. Now with things like the Black Friday queuing debacle, I think people will probably start to look at this again more broadly.

Micro UX

Micro UX design is all about delighting the user by using simple innovative design that not only makes a task easier but also creates an engaging, humane experience that’s a pleasure to repeat.

Hopefully the trend for larger experiences built on these little touches will really shine in 2015.

The Threadless shopping cart pop-out that bounces up and down with happiness

The simple way to switch between Twitter accounts in the iPhone apps with just a drag of the finger

More joyful examples can be found here.

Hidden menus

It’s becoming more popular for websites to hide left-navigation off screen until you interact with an element towards the top left of the screen, which is occasionally in the form of another 2014 trend – the hamburger menu.

Gmail Inbox

Pinned elements

Over to Dan Barker for this one:

Pinned elements have caught on over the last couple of years but never gone entirely mainstream. Whenever I do user tests on tablets and the header is *not* pinned on long pages, users complain about it.

I therefore half-hope, and expect that this will spread a little more.

Scrolling not clicking

Scrolling through webpages is far quicker than clicking. It helps convey masses of information without slowing down the experience for the user, it’s mobile and touch friendly, it’s a non-committal action that requires little thought and it’s perfect for webpages where the purpose is storytelling.

World’s Highest Website

Nike Air Jordan

Upwardly responsive

Although there are plenty of brands adapting their websites for smartphone and tablet users, responsive design should work for bigger screens too.

Quoting Chris Lake from his article on websites designed for big screens earlier in the year…

It goes without saying that a growing proportion of your website’s visitors will be using handheld devices with little screens, but you may be surprised by how many people use bigger screens.

Ecommerce brands will hopefully recognise this going into 2015 and adapt the experience for our giant screens in the office and at home.

Firebox 

Pull & Bear

Motion design

Chris Lake rounded-up 14 motion design trends for web and mobile interfaces back in July and many of these we will hopefully see more of next year…

Infinite scroll fade ins

More content! More!

Dynamic/animated charts

Why bother with static images when you can render a chart on the fly?

Modular scrolling

It is possible to scroll individual columns, as well as whole pages. If you scroll down this very blog post, you can see it in action too.

BIG FONTS

Dan Barker really hopes that big fonts will make a comeback.

You see them on some blogs and publisher sites, and they work really well on mobile, but they have yet to resurge on ecommerce sites.

Perhaps 2015 will be the time.

Shades of colour

By choosing one vibrant colour, and various shades thereof, then offsetting it against a neutral background you can create a rather elegant looking interface.

Select Device

Qatar Airways

There are more examples in Chris Lake’s beautiful designs based around shades of colour.

Super-navigation

You may see more thin permanent menus across the very top of larger websites. These bring unity, allow consistent navigation across multiple pages and are a handy place to present alerts.

Mobile first, but not only

‘Mobile first’ well and truly took hold in 2014. Unfortunately sometimes that means that things look great on mobile and dreadful on desktop and tablet.

As Dan Barker states:

I’m not sure that will end fully, but if you are reading this sentence and you have anything to do with a design project, please do remember that ‘mobile first’ shouldn’t mean ‘mobile only.

We’re still in that period where people carry out their most important tasks on desktops and tablets (booking holidays, buying from a site for the very first time, online banking) so it’s vital that the desktop audience is still catered for.

Credits

Again a huge thanks to Dan Barker, who can be find over at barker.co.uk and Chris Lake, who you can hound on Twitter.

Finally a massive thanks to the awesome gang here at Team Editorial, Mothy, Ben, Matt and Graham.

HTML5&CSS3

CSS3实现照片墙效果

Posted on November 16, 2014by Alan

HTML5和CSS3已经被谈论很久了，关于W3C等既得利益体的争论这里按下不表，下面通过简单的CSS3代码来实现一个酷炫的照片墙效果，可以用于制作家庭的生活照相册，也可以在追女孩子时适时小秀一把:)

整个代码中用到的主要有CSS3中的transform中的旋转(rotate),过渡(transition),阴影(box-shadow),同时通过position来进行位置的定位，z-index来控制显示的层次。

相关示例代码如下：

	img{
		padding:10px 10px 15px;
		background:#fff;
		border:1px solid #ddd;
		position:absolute;
		transition:0.5s;
		-webkit-transition:0.5s;
		-moz-transition:0.5s;
		z-index:0;
		top:50px;
		left:100px;
		-webkit-transform:rotate(20deg);
		-moz-transform:rotate(20deg);
		transform:rotate(20deg);
	}

	img:hover{
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		transform:rotate(0deg);
		box-shadow:5px 5px 10px #ccc;
		z-index:1;
		-webkit-transform:scale(1.2);
		-moz-transform:scale(1.2);
		transform:scale(1.2);
	}
HTML5&CSS3无门无派

JS实现放大镜效果

Posted on September 14, 2014by Alan

电商网站中会经常出现图片的放大效果，在产品页面尤为常见，如淘宝、京东、一号店等网站都会采用悬浮鼠标在右侧出现图片放大效果。
要实现这种效果可能过JS或jQuery等代码来实现，示例效果如下（通过将鼠标悬浮在下面的图片上进行查看）：

首先通过getElementById或其它方法来获取各个对象，然后通过onmouseover和onmouseout事件来显示和隐藏放大镜和右侧图片，示例代码如下：

objMark.onmouseover = function(){
objFloatBox.style.display = "block";
objBigBox.style.display = "block";
}

objMark.onmouseout = function(){
objFloatBox.style.display = "none";
objBigBox.style.display = "none";
}

核心代码为onmousemove事件

objMark.onmouseover = function(){

objFloatBox.style.display = "block";
objBigBox.style.display = "block";
}

objMark.onmouseout = function(){

objFloatBox.style.display = "none";
objBigBox.style.display = "none";
}

objMark.onmousemove =function(ev){
var _event = ev || window.event;//使用window.event解决IE兼容问题

var left = _event.clientX - objDemo.offsetLeft - objMark.offsetLeft - objFloatBox.offsetWidth/2;
var top = _event.clientY - objDemo.offsetTop - objMark.offsetTop - objFloatBox.offsetHeight/2;
//解决放大镜框脱离出左侧小图片的问题
if(left <0){ left = 0; }else if(left > (objMark.offsetWidth - objFloatBox.offsetWidth)){
left = objMark.offsetWidth - objFloatBox.offsetWidth;
}
if(top < 0){ top = 0; }else if(top > (objMark.offsetHeight - objFloatBox.offsetHeight)){
top = objMark.offsetHeight - objFloatBox.offsetHeight;
}
//鼠标移动获取放大镜悬浮框的位置
objFloatBox.style.left = left+ "px";
objFloatBox.style.top = top + "px";
//计算大图片显示相对小图片的放大比例
var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
//鼠标移动获取右侧大图片的位置
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}

HTML5&CSS3电商经验

Firebug使用相关

Posted on August 17, 2014by Alan

Firebug是网页浏览器Firefox下的一款开发类插件，集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。在日常使用中常会同时安装其扩展Yslow来一并对网站进行调试。同时为了兼容其它浏览器，还开发有Firebug Lite，功能略弱于Firebug。 安装完后要开启Firebug,可点击浏览器工具栏中的Firebug图标图标，也可按下F12开启，关闭方法与开启方法相同，另外按下Ctrl+F12将会在弹出的窗口中开启Firebug的调试窗口。调试窗口中主要包含控制台标签、HTML标签、CSS标签、脚本标签、DOM标签、网络标签和Cookies标签，可通过点击调试窗口左上角的Firebug图标，然后在可见面板中勾选或取消勾选来显示或隐藏相应的标签，调试窗口右上侧还有搜索窗口，能过搜索方便找到所需查看的内容。 Firebug调试窗口 控制台标签为JS命令行操作，显示JS错误信息、提示信息和日志信息，可在右侧窗口键入代码； HTML标签显示页面的所有HTML源代码，可能过直接修改代码的方式查看修改后的结果， 只需要所需修改代码上双击或右击在弹出窗口中选择”编辑HTML…”即可进行编辑，而要定位到页面上相应元素的代码，可通过在相应页面元素上右击选择“使用Firebug查看元素”，也可点击小甲虫右侧的点击查看页面元素图标即“点击查看页面中的元素”图标（快捷键Ctrl+Shift+C）然后直接点击需查看的元素来定位到相对应的代码； CSS标签下可编辑页面的CSS源代码，如同对HTML的修改一样，可通过双击来对样式来进行修改，对于字体大小等数值还可以通过方向键↑和↓来进行更改，这种修改每次会调整1个单位，而按下Ctrl键加方向键每次调整0.1个单位，按下Shift键加方向键每次调整10个单位； 脚本标签中显示页面的脚本，也可在该标签对脚本进行调试； DOM标签显示所有的页面对象和DOM属性； 网络标签显示页面各元素的下载情况和所花费的时间，以及HTTP请求和头信息； Cookies标签显示页面请求的Cookies,可对页面中的cookie进行查看和修改。

JavaScript控制台

Firebug的控制台可以很方便地对JavaScript代码进行调试，控制台内置了很多命令方便对JS进行调试，如console.log()命令可以打印出日志,以下代码可以输出日志结果2014年8月31日

console.log("%d年%d月%d日",2014,8,31);

其中的%d称为占位符，代表数字，此外浮点数的占位符为%f,字符串占位符为%s,对象的占位符为%o,输出的内容也可以为变量，如console.log(i),除日志输出外还有信息输出console.info()，debug输出console.debug()，警告输出console.warn()，错误输出console.error()。对输出的内容可进行分组，使用console.group()命令：

console.group("group1");
console.log("101");
console.log("102");
console.log("103");
console.groupEnd();
console.group("group2");
console.log("201");
console.log("202");
console.log("203");
console.groupEnd();

控制台中还有用于调试JS代码运行速度的命令console.time(),使用示例如下：

console.time("test");
for(var i=1; i<10000; i++){

}
console.timeEnd("test");

控制台还包含其它命令，可通过console.dir(console)来查看console对象的所有命令和方法,这些命令可以写在文件中，也可以在控制台右侧的多行调试框中输入并点击运行来进行查看
Firebug控制台

HTML5&CSS3

CSS3+HTML5实现活塞运动

Posted on July 31, 2014by Alan

Html5配合CSS3已经越来越强大，以下通过CSS3+HTML5来模拟活塞运动。

首先设置背景颜色,这里仅测试了IE,Firefox和Chrome较新的版本，使用webkit也是为了兼容Chrome考虑：

background: -webkit-linear-gradient(top, coral, tomato);
background: linear-gradient(to bottom, coral, tomato);

通过代码定义活塞上下移动以及臂手(连动杆)左右摆动的动画：

@-webkit-keyframes piston {
0% { margin-top: 0; }
50% { margin-top: 80px; }
100% { margin-top: 0; }
}
@keyframes piston {
0% { margin-top: 0; }
50% { margin-top: 80px; }
100% { margin-top: 0; }
}
@-webkit-keyframes arm {
0% { -webkit-transform: rotate(0); }
25% { -webkit-transform: rotate(-18deg); }
50% { -webkit-transform: rotate(0); }
75% { -webkit-transform: rotate(18deg); }
100% { -webkit-transform: rotate(0); }
}
@keyframes arm {
0% { transform: rotate(0); }
25% { transform: rotate(-18deg); }
50% { transform: rotate(0); }
75% { transform: rotate(18deg); }
100% { transform: rotate(0); }
}

应用上下移动活塞的动画：

-webkit-animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite;
animation: piston 1.2s cubic-bezier(.5,0,.5,1) infinite;

应用臂手左右摆的动画：

-webkit-transform-origin: center 10px;
-webkit-animation: arm 1.2s linear infinite;
transform-origin: center 10px;
animation: arm 1.2s linear infinite;

通过animation-delay来使五个活塞之前产生部分延时。

HTML5&CSS3

HTML5绘制桌球

Posted on May 25, 2014by Alan

桌球（又称台球 ，撞球）源自英国，是一项在国际上广泛流行的高雅的室内体育运动，是一种用球杆在台上击球，依靠计算得分确定比赛胜负的室内娱乐体育项目。
下图为通过HTML5的Canvas配合JS生成的仿桌球图片，右侧的小球采用随机函数显示不同颜色，每次刷新后将显示不同的组合颜色。


Your browser does not support the canvas element.