Thursday, March 24, 2011

How to use CSS3 for progress bar

Demo



<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title></title>
<style>
#loading-status {
width: 300px;
margin-left: 2px;
border: 1px #669CB8 solid;
-webkit-box-shadow: 0px 2px 2px #D0D4D6;
margin-top: 70px;
height: 20px;
-webkit-border-radius: 10px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#E1E9EE), to(white));
padding: 1px;
}
#process {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));
width: 0%;
height: 100%;
-webkit-border-radius: 10px;
/* -webkit-transition: width 1s ease-in-out; */
-webkit-animation: load 1s ease-in-out infinite;
}
@-webkit-keyframes load {
0% {
width: 0%;
}
100% {
width: 80%;
}
}
.box {
height: 20px;
position: relative;
background: hsl(0, 0%, 35%);
-webkit-border-radius: 15px;
padding: 6px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
width: 300px;
}
.box > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #63DE4E),
color-stop(1, #34A702)
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
z-index: 2;
-webkit-background-size: 40px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
overflow: hidden;
}
@-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
</style>
</head>
<body>
<div class="box animate">
<span style="width: 80%"><span></span></span>
</div>
<div id="loading-status">
<div id="process"></div>
</div>
</body>
</html>

HTTPS is more secure, so why isn't the Web using it?

Can not be cached, cause performance issue.

Perhaps the main reason most of us are not using HTTPS to serve our websites is simply that it doesn't work with virtual hosts. Virtual hosts, which are what the most common cheap Web hosting providers offer, allow the Web host to serve multiple websites from the same physical server—hundreds of websites all with the same IP address. That works just fine with regular HTTP connections, but it doesn't work at all with HTTPS.
There is a way to make virtual hosting and HTTPS work together—the TLS Extensions protocol—but Lafon notes that, so far, it's only partially implemented. Of course that's not an issue for big sites, which often have entire server farms behind them. But until that spec—or something similar—is widely used, HTTPS isn't going to work for small, virtually hosted websites

http://arstechnica.com/web/news/2011/03/https-is-more-secure-so-why-isnt-the-web-using-it.ars

Definitions for ASP.NET Viewstate

ASP.NET view state is the technique used by an ASP.NET Web page to persist changes to the state of a Web Form across postbacks
From:

ASP.NET page framework uses to preserve page and control values between round trips