几种CSS按钮样式2

/*/// BUTTONS ///*/
.pt_btn {
    font-size: 12px;
    font-weight: bold;
    padding: 8px 12px;
    margin: 0 10px 10px 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    cursor: pointer;
    outline: none;
    display: inline-block;
    text-align: center;
}

.pt_btn:hover {
    -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.2);
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.pt_btn:active {
    outline: none;
}

.pt_btn.liquid {
    display: block;
}

/* NORMAL STATE */

.turquoise_btn {
    color: #ffffff;
    -webkit-text-shadow: 1px 1px 0 #00a99d;
    -moz-text-shadow: 1px 1px 0 #00a99d;
    text-shadow: 1px 1px 0 #00a99d;
    border: 1px solid #00a99d;
    background-color: #1cbbb4;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7accc8), to(#1cbbb4));
    background-image: -webkit-linear-gradient(top, #7accc8, #1cbbb4);
    background-image: -moz-linear-gradient(top, #7accc8, #1cbbb4);
    background-image: -ms-linear-gradient(top, #7accc8, #1cbbb4);
    background-image: -o-linear-gradient(top, #7accc8, #1cbbb4);
    background-image: linear-gradient(top, #7accc8, #1cbbb4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7accc8', EndColorStr='#1cbbb4');
}

.orange_btn {
    color: #ffffff;
    -webkit-text-shadow: 1px 1px 0 #b24510;
    -moz-text-shadow: 1px 1px 0 #b24510;
    text-shadow: 1px 1px 0 #b24510;
    border: 1px solid #f26522;
    background-color: #f68e56;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9ad81), to(#f68e56));
    background-image: -webkit-linear-gradient(top, #f9ad81, #f68e56);
    background-image: -moz-linear-gradient(top, #f9ad81, #f68e56);
    background-image: -ms-linear-gradient(top, #f9ad81, #f68e56);
    background-image: -o-linear-gradient(top, #f9ad81, #f68e56);
    background-image: linear-gradient(top, #f9ad81, #f68e56);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9ad81', EndColorStr='#f68e56');
}

.pink_btn {
    color: #ffffff;
    -webkit-text-shadow: 1px 1px 0 #751573;
    -moz-text-shadow: 1px 1px 0 #751573;
    text-shadow: 1px 1px 0 #751573;
    border: 1px solid #92278f;
    background-color: #a864a8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bd8cbf), to(#a864a8));
    background-image: -webkit-linear-gradient(top, #bd8cbf, #a864a8);
    background-image: -moz-linear-gradient(top, #bd8cbf, #a864a8);
    background-image: -ms-linear-gradient(top, #bd8cbf, #a864a8);
    background-image: -o-linear-gradient(top, #bd8cbf, #a864a8);
    background-image: linear-gradient(top, #bd8cbf, #a864a8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#bd8cbf', EndColorStr='#a864a8');
}

.blue_btn {
    color: #ffffff;
    -webkit-text-shadow: 1px 1px 0 #014384;
    -moz-text-shadow: 1px 1px 0 #014384;
    text-shadow: 1px 1px 0 #014384;
    border: 1px solid #0054a6;
    background-color: #448ccb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#7da7d9), to(#448ccb));
    background-image: -webkit-linear-gradient(top, #7da7d9, #448ccb);
    background-image: -moz-linear-gradient(top, #7da7d9, #448ccb);
    background-image: -ms-linear-gradient(top, #7da7d9, #448ccb);
    background-image: -o-linear-gradient(top, #7da7d9, #448ccb);
    background-image: linear-gradient(top, #7da7d9, #448ccb);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7da7d9', EndColorStr='#448ccb');
}

.brown_btn {
    color: #ffffff;
    -webkit-text-shadow: 1px 1px 0 #6f4720;
    -moz-text-shadow: 1px 1px 0 #6f4720;
    text-shadow: 1px 1px 0 #6f4720;
    border: 1px solid #8c6239;
    background-color: #a67c52;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c69c6d), to(#a67c52));
    background-image: -webkit-linear-gradient(top, #c69c6d, #a67c52);
    background-image: -moz-linear-gradient(top, #c69c6d, #a67c52);
    background-image: -ms-linear-gradient(top, #c69c6d, #a67c52);
    background-image: -o-linear-gradient(top, #c69c6d, #a67c52);
    background-image: linear-gradient(top, #c69c6d, #a67c52);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c69c6d', EndColorStr='#a67c52');
}

.green_btn {
    color: #ffffff;
    -webkit-text-shadow: 1px 1px 0 #6fa626;
    -moz-text-shadow: 1px 1px 0 #6fa626;
    text-shadow: 1px 1px 0 #6fa626;
    border: 1px solid #8dc63f;
    background-color: #acd373;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#c4df9b), to(#acd373));
    background-image: -webkit-linear-gradient(top, #c4df9b, #acd373);
    background-image: -moz-linear-gradient(top, #c4df9b, #acd373);
    background-image: -ms-linear-gradient(top, #c4df9b, #acd373);
    background-image: -o-linear-gradient(top, #c4df9b, #acd373);
    background-image: linear-gradient(top, #c4df9b, #acd373);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c4df9b', EndColorStr='#acd373');
}

.purple_btn {
    color: #ffffff;
    -webkit-text-shadow: 1px 1px 0 #1f216f;
    -moz-text-shadow: 1px 1px 0 #1f216f;
    text-shadow: 1px 1px 0 #1f216f;
    border: 1px solid #2e3192;
    background-color: #605ca8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#8781bd), to(#605ca8));
    background-image: -webkit-linear-gradient(top, #8781bd, #605ca8);
    background-image: -moz-linear-gradient(top, #8781bd, #605ca8);
    background-image: -ms-linear-gradient(top, #8781bd, #605ca8);
    background-image: -o-linear-gradient(top, #8781bd, #605ca8);
    background-image: linear-gradient(top, #8781bd, #605ca8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#8781bd', EndColorStr='#605ca8');
}

.gray_btn {
    color: #888888;
    -webkit-text-shadow: 1px 1px 0 #ffffff;
    -moz-text-shadow: 1px 1px 0 #ffffff;
    text-shadow: 1px 1px 0 #ffffff;
    border: 1px solid #cccccc;
    background-color: #eeeeee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#eeeeee));
    background-image: -webkit-linear-gradient(top, #f7f7f7, #eeeeee);
    background-image: -moz-linear-gradient(top, #f7f7f7, #eeeeee);
    background-image: -ms-linear-gradient(top, #f7f7f7, #eeeeee);
    background-image: -o-linear-gradient(top, #f7f7f7, #eeeeee);
    background-image: linear-gradient(top, #f7f7f7, #eeeeee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f7f7f7', EndColorStr='#eeeeee');
}

.dark_gray_btn {
    color: #ffffff;
    -webkit-text-shadow: 1px 1px 0 #444444;
    -moz-text-shadow: 1px 1px 0 #444444;
    text-shadow: 1px 1px 0 #444444;
    border: 1px solid #666666;
    background-color: #707070;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#707070));
    background-image: -webkit-linear-gradient(top, #959595, #707070);
    background-image: -moz-linear-gradient(top, #959595, #707070);
    background-image: -ms-linear-gradient(top, #959595, #707070);
    background-image: -o-linear-gradient(top, #959595, #707070);
    background-image: linear-gradient(top, #959595, #707070);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#959595', EndColorStr='#707070');
}

/* HOVER STATE */

.turquoise_btn:hover {
    color: #ffffff;
    border: 1px solid #028d83;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#93e2de), to(#1cbbb4));
    background-image: -webkit-linear-gradient(top, #93e2de, #1cbbb4);
    background-image: -moz-linear-gradient(top, #93e2de, #1cbbb4);
    background-image: -ms-linear-gradient(top, #93e2de, #1cbbb4);
    background-image: -o-linear-gradient(top, #93e2de, #1cbbb4);
    background-image: linear-gradient(top, #93e2de, #1cbbb4);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#93e2de', EndColorStr='#1cbbb4');
}

.orange_btn:hover {
    color: #ffffff;
    border: 1px solid #b24510;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fbbd9a), to(#f68e56));
    background-image: -webkit-linear-gradient(top, #fbbd9a, #f68e56);
    background-image: -moz-linear-gradient(top, #fbbd9a, #f68e56);
    background-image: -ms-linear-gradient(top, #fbbd9a, #f68e56);
    background-image: -o-linear-gradient(top, #fbbd9a, #f68e56);
    background-image: linear-gradient(top, #fbbd9a, #f68e56);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fbbd9a', EndColorStr='#f68e56');
}

.pink_btn:hover {
    color: #ffffff;
    border: 1px solid #751573;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d4a3d6), to(#a864a8));
    background-image: -webkit-linear-gradient(top, #d4a3d6, #a864a8);
    background-image: -moz-linear-gradient(top, #d4a3d6, #a864a8);
    background-image: -ms-linear-gradient(top, #d4a3d6, #a864a8);
    background-image: -o-linear-gradient(top, #d4a3d6, #a864a8);
    background-image: linear-gradient(top, #d4a3d6, #a864a8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d4a3d6', EndColorStr='#a864a8');
}

.blue_btn:hover {
    color: #ffffff;
    border: 1px solid #014384;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#98beec), to(#448ccb));
    background-image: -webkit-linear-gradient(top, #98beec, #448ccb);
    background-image: -moz-linear-gradient(top, #98beec, #448ccb);
    background-image: -ms-linear-gradient(top, #98beec, #448ccb);
    background-image: -o-linear-gradient(top, #98beec, #448ccb);
    background-image: linear-gradient(top, #98beec, #448ccb);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#98beec', EndColorStr='#448ccb');
}

.brown_btn:hover {
    color: #ffffff;
    border: 1px solid #6f4720;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d7b288), to(#a67c52));
    background-image: -webkit-linear-gradient(top, #d7b288, #a67c52);
    background-image: -moz-linear-gradient(top, #d7b288, #a67c52);
    background-image: -ms-linear-gradient(top, #d7b288, #a67c52);
    background-image: -o-linear-gradient(top, #d7b288, #a67c52);
    background-image: linear-gradient(top, #d7b288, #a67c52);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d7b288', EndColorStr='#a67c52');
}

.green_btn:hover {
    color: #ffffff;
    border: 1px solid #6fa626;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d6efb0), to(#acd373));
    background-image: -webkit-linear-gradient(top, #d6efb0, #acd373);
    background-image: -moz-linear-gradient(top, #d6efb0, #acd373);
    background-image: -ms-linear-gradient(top, #d6efb0, #acd373);
    background-image: -o-linear-gradient(top, #d6efb0, #acd373);
    background-image: linear-gradient(top, #d6efb0, #acd373);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d6efb0', EndColorStr='#acd373');
}

.purple_btn:hover {
    color: #ffffff;
    border: 1px solid #1f216f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a29cd9), to(#605ca8));
    background-image: -webkit-linear-gradient(top, #a29cd9, #605ca8);
    background-image: -moz-linear-gradient(top, #a29cd9, #605ca8);
    background-image: -ms-linear-gradient(top, #a29cd9, #605ca8);
    background-image: -o-linear-gradient(top, #a29cd9, #605ca8);
    background-image: linear-gradient(top, #a29cd9, #605ca8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a29cd9', EndColorStr='#605ca8');
}

.gray_btn:hover {
    color: #888888;
    border: 1px solid #aaaaaa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee));
    background-image: -webkit-linear-gradient(top, #ffffff, #eeeeee);
    background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
    background-image: -ms-linear-gradient(top, #ffffff, #eeeeee);
    background-image: -o-linear-gradient(top, #ffffff, #eeeeee);
    background-image: linear-gradient(top, #ffffff, #eeeeee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#eeeeee');
}

.dark_gray_btn:hover {
    color: #ffffff;
    border: 1px solid #444444;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#aaaaaa), to(#707070));
    background-image: -webkit-linear-gradient(top, #aaaaaa, #707070);
    background-image: -moz-linear-gradient(top, #aaaaaa, #707070);
    background-image: -ms-linear-gradient(top, #aaaaaa, #707070);
    background-image: -o-linear-gradient(top, #aaaaaa, #707070);
    background-image: linear-gradient(top, #aaaaaa, #707070);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#aaaaaa', EndColorStr='#707070');
}

/* ACTIVE STATE */

.turquoise_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1cbbb4), to(#93e2de));
    background-image: -webkit-linear-gradient(top, #1cbbb4, #93e2de);
    background-image: -moz-linear-gradient(top, #1cbbb4, #93e2de);
    background-image: -ms-linear-gradient(top, #1cbbb4, #93e2de);
    background-image: -o-linear-gradient(top, #1cbbb4, #93e2de);
    background-image: linear-gradient(top, #1cbbb4, #93e2de);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#1cbbb4', EndColorStr='#93e2de');
}

.orange_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f68e56), to(#fbbd9a));
    background-image: -webkit-linear-gradient(top, #f68e56, #fbbd9a);
    background-image: -moz-linear-gradient(top, #f68e56, #fbbd9a);
    background-image: -ms-linear-gradient(top, #f68e56, #fbbd9a);
    background-image: -o-linear-gradient(top, #f68e56, #fbbd9a);
    background-image: linear-gradient(top, #f68e56, #fbbd9a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f68e56', EndColorStr='#fbbd9a');
}

.pink_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a864a8), to(#d4a3d6));
    background-image: -webkit-linear-gradient(top, #a864a8, #d4a3d6);
    background-image: -moz-linear-gradient(top, #a864a8, #d4a3d6);
    background-image: -ms-linear-gradient(top, #a864a8, #d4a3d6);
    background-image: -o-linear-gradient(top, #a864a8, #d4a3d6);
    background-image: linear-gradient(top, #a864a8, #d4a3d6);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a864a8', EndColorStr='#d4a3d6');
}

.blue_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#448ccb), to(#98beec));
    background-image: -webkit-linear-gradient(top, #448ccb, #98beec);
    background-image: -moz-linear-gradient(top, #448ccb, #98beec);
    background-image: -ms-linear-gradient(top, #448ccb, #98beec);
    background-image: -o-linear-gradient(top, #448ccb, #98beec);
    background-image: linear-gradient(top, #448ccb, #98beec);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#448ccb', EndColorStr='#98beec');
}

.brown_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a67c52), to(#d7b288));
    background-image: -webkit-linear-gradient(top, #a67c52, #d7b288);
    background-image: -moz-linear-gradient(top, #a67c52, #d7b288);
    background-image: -ms-linear-gradient(top, #a67c52, #d7b288);
    background-image: -o-linear-gradient(top, #a67c52, #d7b288);
    background-image: linear-gradient(top, #a67c52, #d7b288);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a67c52', EndColorStr='#d7b288');
}

.green_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#acd373), to(#d6efb0));
    background-image: -webkit-linear-gradient(top, #acd373, #d6efb0);
    background-image: -moz-linear-gradient(top, #acd373, #d6efb0);
    background-image: -ms-linear-gradient(top, #acd373, #d6efb0);
    background-image: -o-linear-gradient(top, #acd373, #d6efb0);
    background-image: linear-gradient(top, #acd373, #d6efb0);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#acd373', EndColorStr='#d6efb0');
}

.purple_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#605ca8), to(#a29cd9));
    background-image: -webkit-linear-gradient(top, #605ca8, #a29cd9);
    background-image: -moz-linear-gradient(top, #605ca8, #a29cd9);
    background-image: -ms-linear-gradient(top, #605ca8, #a29cd9);
    background-image: -o-linear-gradient(top, #605ca8, #a29cd9);
    background-image: linear-gradient(top, #605ca8, #a29cd9);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#605ca8', EndColorStr='#a29cd9');
}

.gray_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#ffffff));
    background-image: -webkit-linear-gradient(top, #eeeeee, #ffffff);
    background-image: -moz-linear-gradient(top, #eeeeee, #ffffff);
    background-image: -ms-linear-gradient(top, #eeeeee, #ffffff);
    background-image: -o-linear-gradient(top, #eeeeee, #ffffff);
    background-image: linear-gradient(top, #eeeeee, #ffffff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#ffffff');
}

.dark_gray_btn:active {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#707070), to(#aaaaaa));
    background-image: -webkit-linear-gradient(top, #707070, #aaaaaa);
    background-image: -moz-linear-gradient(top, #707070, #aaaaaa);
    background-image: -ms-linear-gradient(top, #707070, #aaaaaa);
    background-image: -o-linear-gradient(top, #707070, #aaaaaa);
    background-image: linear-gradient(top, #707070, #aaaaaa);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#707070', EndColorStr='#aaaaaa');
}

/*/// NOTIFICATION BOXS ///*/

.box {
    padding: 15px 10px 10px 45px;
    margin-bottom: 20px;
}

.box a {
    color: #000;
}

.box a:hover {
    text-decoration: underline;
}

.successBox {
    border: 1px solid #3AAA35;
    background: #F5FBF5 url(images/success_box.png) no-repeat 10px 12px;
    color: #3AAA35;
}

.errorBox {
    border: 1px solid #E30613;
    background: #FEF2F3 url(images/error_box.png) no-repeat 10px 12px;
    color: #E30613 !important;
}

.warningBox {
    border: 1px solid #F39200;
    background: #FEF9F2 url(images/warning_box.png) no-repeat 10px 12px;
    color: #F39200 !important;
}

.infoBox {
    border: 1px solid #488CCB;
    background: #F6F9FC url(images/info_box.png) no-repeat 10px 12px;
    color: #488CCB !important;
}

.ideaBox {
    border: 1px solid #951b81;
    background: #fcecf9 url(images/idea_box.png) no-repeat 10px 12px;
    color: #951B81 !important;
}

.generalBox {
    border: 1px solid #777;
    color: #777 !important;
    padding: 10px 15px;
    background: #f7f7f7;
}

As you’ve already seen in our previous posts about Single Page Website Designs that showcasing your work in single page design is a hot trend now days. It’s kind of ironic to see what designers can do with single pages as modern age designers love to experiment with things and observe how people interact with their work. Even though this is not a common trend to follow but still as the new design styles come up, and as more and more designers notice them and make use of them in their work, this kind of trends emerge.

In this presentation, you’ll find a variety of highly-creative, beautiful and most importantly inspirational designs which is following the same trend of single page designs.

The main purpose here is to stimulate your creativity and to inspire your imagination to create your own design trend because your website represents you and your brand.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

Single Page Website Designs for Design Inspiration

Throughout history, great artists always found new ways to show their creativity to express themselves and create new trends and techniques to remark their work apart from the rest of the crowd. The Definition of design is more critical in modern terms as now design is a way of communication; and, more specifically, Web design is a well define platform for content. There is no “Good” and “Bad” in design. It always define as a “Different”.

Is It Worth It

Website Link 继续阅读 →

50+ Creative Examples of Websites Designed With HTML5

原文链接：http://www.instantshift.com/2012/01/31/50-creative-examples-of-websites-designed-with-html5/

The web is constantly evolving. New and creative websites are being created every day, pushing the limitations of HTML in every direction. HTML4 has been around for nearly a decade and now its time to move forward. To give authors more flexibility and interoperability, HTML5 is proposed as the next major revision of HTML.

It works on just about every platform, is compatible with older browsers, and handles errors gracefully. You can create powerful, easy-to-maintain, future-proof web pages. Many common tasks are now simplified, putting more power in your hands.

In this presentation, you’ll find a variety of highly-creative, beautiful and most importantly inspirational designs that are coded in HTML5.

The main purpose here is to stimulate your creativity and to inspire your imagination to create awesome designs because your website represents you and your brand.

You may be interested in the following modern trends related articles as well.

Please feel free to join us and you are always welcome to share your thoughts that our readers may like.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

What is HTML5

HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash, Microsoft Silverlight, Apache Pivot, and Sun JavaFX.

For those, who don’t know what is HTML5? And what it can do? Then follow the link below for detail introduction.

Creative Examples of Websites Built Using HTML5

Throughout history, great artists always found new ways to show their creativity to express themselves and create new trends and techniques to remark their work apart from the rest of the crowd. The Definition of design is more critical in modern terms as now design is a way of communication; and, more specifically, Web design is a well define platform for showcasing your skills. There is no ‘Good’ and ‘Bad’ in design. It always defined as ‘Different’.

La Moulade

Website Link 继续阅读 →

Setting up authentication in asp.net MVC

I wanted to setup user authentication in asp.net MVC, and I wanted it to tie in with the built-in IIdentity and IPrincipal support that is already in asp.net, but I did not want to have to setup asp.net membership services. I wanted to have my own user objects, and I wanted to save/retrieve them through my user repository just like my other domain objects. All of this was done for a demo, so it is certainly not production quality code, but I hope it helps you.

First off I setup my User table in my database, it looks like this:

User Table

This is obviously just a start, but it is enough to get the job going. I have dragged this database table onto the Linq To Sql designer and it created my User object like so:

Next in my UserRepository class I have a method that looks like this:

public User GetUserByUsername(string username)

    RecipeZoneDataContext context = ContextFactory.GetRecipeZoneContext();

    return (from u in context.Users where u.UserName == username select u).SingleOrDefault();

This way when someone tries to login, I can pass their username into this method and it tries to look that user up. You will notice that we use a “SingleOrDefault” method in order to return a single user or “null” in case there is no user by that name. Next I have created a method on my UserController named “Login” that looks like this:

public void Login()

    _viewData.Redirect = Request.QueryString["redirect"];

    RenderView("Login", _viewData);

Here we are looking for a query string parameter named “redirect” that is going to contain a url that we will redirect to upon successful login. We assign this to our UserControllerViewData class and then pass that to RenderView. The UserControllerViewData is just a class that I use to hold view data for most of the actions on my UserController class.

My Login view is then rendered:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">

    <%= Html.RenderUserControl("~/Views/Shared/ErrorMessages.ascx") %>

    <%using (Html.Form<UserController>(c => c.LoginValidate(RedirectUrl)))

      { %>

    <table>

        <tr>

            <td>

                Username:

            </td>

            <td>

                <%=Html.TextBox("User.UserName")%>

            </td>

        </tr>

        <tr>

            <td>

                Password:

            </td>

            <td>

                <%=Html.Password("User.Password")%>

            </td>

        </tr>

        <tr>

            <td>

            </td>

            <td>

                <%=Html.SubmitButton("login", "Login")%>

            </td>

        </tr>

    </table>

    <% } %>

</asp:Content>

Here we are using a few of our Html helper methods. We use the Html.Form helper method in order to create our html form as well as to render our url that the form will post back to. I am using the overload that takes an Expression and then renders the url based on the controller type and method that you call on it in the expression. You can see that we are posting back to a different action called “LoginValidate” and we are passing the “RedirectUrl” as a parameter to it.

The LoginValidate controller action looks like this:

public void LoginValidate(string redirect)

    if (Models.User.ValidateUser(Request.Form["User.UserName"], Request.Form["User.Password"]))

        if (!String.IsNullOrEmpty(redirect) || String.Compare(redirect, "none", true) == 0)

            Response.Redirect(redirect, true);

        else

            RedirectToAction("", "");

    _viewData.ErrorMessages.Add("Invalid username or password.");

    RenderView("Login", _viewData);

First we pass our UserName and Password to our User.ValidateUser method. If the user is validated then we check for a redirect and if one exists then we redirect. Otherwise we redirect to a default controller and action. Here we have entered no defaults, you would want to fill them in. If we don’t succeed then we add an error message to the view data and redirect back to our Login action. There is a bit of data we have to put into the web.config first though:

<authentication mode="Forms">

  <forms name=".APPNAME" protection="All" cookieless="UseCookies" />

</authentication >

This just sets up our application to use forms authentication, and then sets a few parameters on it. After we have this setup we can now call the ValidateUser method. The ValidateUser method looks like this:

public static bool ValidateUser(string username, string password)

    var userRepository = new UserRepository();

    User user = userRepository.GetUserByUsername(username);

    if (user == null)

        return false;

    if (String.Compare(user.Password, password, false) == 0)

        var authTicket = new FormsAuthenticationTicket(1, username, DateTime.Now,

                                                       DateTime.Now.AddMinutes(30), true, "");

        string cookieContents = FormsAuthentication.Encrypt(authTicket);

        var cookie = new HttpCookie(FormsAuthentication.FormsCookieName, cookieContents)

                            Expires = authTicket.Expiration,

                            Path = FormsAuthentication.FormsCookiePath

};

        if (HttpContext.Current != null)

            HttpContext.Current.Response.Cookies.Add(cookie);

        return true;

    return false;

We pull the user and if it doesn’t exist then we immediately return. Then we compare passwords (yes, there is no encryption at this point, like I said, demo) and if they match then we create our authentication ticket. This is part of the forms authentication system and it lets us specify which user is currently logged in. We create a cookie with our data and write it out, then return true. Pretty simple! This saves our username that is logged in, but what about our roles? We need to be able to tell if someone is a normal user or an administrator. In order to do this we have to implement the Application_AuthenticateRequest method in the global.asax file.

protected void Application_AuthenticateRequest(Object sender, EventArgs e)

    HttpCookie authCookie = Request.Cookies[FormsAuthentication.FormsCookieName];

    if (authCookie != null)

        FormsAuthenticationTicket authTicket = FormsAuthentication.Decrypt(authCookie.Value);

        var identity = new GenericIdentity(authTicket.Name, "Forms");

        var principal = new CustomPrincipal(identity);

        Context.User = principal;

Here you see how we are pulling the authentication ticket out of the cookie (if it exists) and we are creating a GenericIdentity object (this is because we don’t need any additional functionality for our IIdentity class) and then we create an instance of our CustomPrincipal class which is just a class we have created which implements IPrincipal. This interface has the methods for checking roles. In this application I have just put in some simple code to test for roles since I wanted to keep it simple. This class looks like this:

public class CustomPrincipal : IPrincipal

    public CustomPrincipal(IIdentity identity)

        Identity = identity;

    public bool IsInRole(string role)

        if (String.Compare(role, "admin", true) == 0)

            return (Identity.Name == "JustinEtheredge");

        else

            return false;

    public IIdentity Identity

        get; private set;

As you can see we just check for one role, “admin”, and I hardcoded it against my username. I could obviously create a table to manage this, but I have not done so. So, now that we all of this setup, how are we going to use these roles? Well, we are going to create custom ActionFilterAttributes! Of course! I want to be able to protect my controller actions like this:

[UserInRole("Admin")]

public void List(int? page)

    _viewData.Users = _userRepository.GetUsers();

    RenderView("List", _viewData);

This UserInRoleAttribute will now make sure that you are authenticated and that you are in the “admin” role before it will let you access this controller action. If you aren’t authenticated then it will forward you to the login page with a redirect to send you back to where you came from. This attribute looks like this:

public class UserInRoleAttribute : ActionFilterAttribute

    private readonly string roleName;

    public UserInRoleAttribute(string roleName)

        this.roleName = roleName;

    public override void OnActionExecuting(FilterExecutingContext filterContext)

        if (filterContext.HttpContext.User.IsInRole(roleName)) return;

        //use reflection until they expose this method

        MethodInfo methodInfo = filterContext.Controller.GetType()

            .GetMethod("RedirectToAction",

                       BindingFlags.ExactBinding |

                       BindingFlags.NonPublic |

                       BindingFlags.Instance, null,

                       new[]

                               typeof (RouteValueDictionary)

                           }, null);

        methodInfo.Invoke(filterContext.Controller,

                          new object[]

                                  new RouteValueDictionary(

new

                                              controller = "User",

                                              action = "Login",

                                              redirect = filterContext.HttpContext.Request.Url.AbsolutePath

})

});

This class is actually very simple. The constructor simply takes a roleName and saves it. When the action is called the OnActionExecuting method is called and we simply test the current user to see if they are in the saved role. Otherwise we use some reflection in order to call “RedirectToAction” on the controller class since it is private. Hopefully they will implement this method in the ActionFilterAttribute base class, or they will make it public on the Controller class. But for right now this is the easiest way I could find to call it.

So, what else do we need? Well, we need some way for a user to logout. For this I simply added a Logout action that looks like this:

public void Logout()

    FormsAuthentication.SignOut();

    RedirectToAction("List");

That is all. You just call SignOut and then redirect to whatever action you want. You could also add a redirect parameter here if you wanted, so you could return to whatever page you clicked “logout” on.

So, there you have it. I’m sure that there is something that I am forgetting, but this post is pretty long and I am tired. Please let me know if you see anything that I did wrong or could have done differently! I hope you enjoyed it, and if you liked it, please kick it!

CSS3 Media Queries

CSS2 allows you to specify stylesheet for specific media type such as screen or print. Now CSS3 makes it even more efficient by adding media queries. You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices. It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content. Continue on this post to read the tutorial and see some websites that make good use of media queries. 继续阅读 →

JQuery返回顶部

			<script type="text/javascript">
			var scrolltotop={
			//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
			//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
			setting: {startline:350, scrollto: 0, scrollduration:800, fadeduration:[500, 100]},
			controlHTML: '<img src="http://mythemepreviews.com/oceanic-wp/wp-content/plugins/scrolltotop/image/up.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
			controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
			anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

			state: {isvisible:false, shouldvisible:false},

			scrollup:function(){
				if (!this.cssfixedsupport) //if control is positioned using JavaScript
					this.control.css({opacity:0}) //hide control immediately after clicking it
				var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
				if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
					dest=jQuery('#'+dest).offset().top
				else
					dest=0
				this.body.animate({scrollTop: dest}, this.setting.scrollduration);
			},

			keepfixed:function(){
				var window=jQuery(window)
				var controlx=window.scrollLeft() + window.width() - this.control.width() - this.controlattrs.offsetx
				var controly=window.scrollTop() + window.height() - this.control.height() - this.controlattrs.offsety
				this.control.css({left:controlx+'px', top:controly+'px'})
			},

			togglecontrol:function(){
				var scrolltop=jQuery(window).scrollTop()
				if (!this.cssfixedsupport)
					this.keepfixed()
				this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
				if (this.state.shouldvisible && !this.state.isvisible){
					this.control.stop().animate({opacity:1}, this.setting.fadeduration[0])
					this.state.isvisible=true
				}
				else if (this.state.shouldvisible==false && this.state.isvisible){
					this.control.stop().animate({opacity:0}, this.setting.fadeduration[1])
					this.state.isvisible=false
				}
			},
			
			init:function(){
				jQuery(document).ready(function($){
					var mainobj=scrolltotop
					var iebrws=document.all
					mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
					mainobj.body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
					mainobj.control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
						.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
						.attr({title:'Scroll Back to Top'})
						.click(function(){mainobj.scrollup(); return false})
						.appendTo('body')
					if (document.all && !window.XMLHttpRequest && mainobj.control.text()!='') //loose check for IE6 and below, plus whether control contains any text
						mainobj.control.css({width:mainobj.control.width()}) //IE6- seems to require an explicit width on a DIV containing text
					mainobj.togglecontrol()
					$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
						mainobj.scrollup()
						return false
					})
					$(window).bind('scroll resize', function(e){
						mainobj.togglecontrol()
					})
				})
			}
		}

		scrolltotop.init()

		</script>

Five Useful Interactive CSS/jQuery Techniques Deconstructed

With the wide variety of CSS3 and JavaScript techniques available today, it’s easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience.

In this article, we’ll walk through five interactive techniques that you can start using right now. We’ll cover:

Animated text effects,
Animated images without GIFs,
More engaging drop-down menus,
Fancier slideshow navigation,
Animated icons for the hover state of buttons.

Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.

So, let’s dive in and start building more exciting websites! 继续阅读 →

Useful Resources, Tools and Services for Web Designers

Productivity is a crucial asset of professional Web designers and developers. We regularly look for new resources, tools and services to make the search of these ever-growing techniques easier. Once we have a reasonable number of useful resources, we prepare them in a handy overview for your convenience. In this post we present some of the useful resources and tools for designers and Web developers.

Please don’t hesitate to comment to this post and let us know how exactly you use these tools in your workflow. Please do avoid link dropping and share your insights and your experience instead. A big thank you to all designers and developers out there for releasing and producing useful, valuable resources for all of us to use. We sincerely appreciate it. 继续阅读 →

ZURB JavaScript Annotation Plugin

Use ZURB’s Javascript plugin to easily add and save annotations

Note: This demo will blow your mind in all browsers.

Download Plugin 继续阅读 →

MaiZeBox

专业于网站的架设、形象与行销的提升并具备无障碍网站制作技术，软件开发，多媒体光盘等