Blogfreakz - Web Design and Web Development resources » HTML5 http://blogfreakz.com A site dedicated to keeping up with the latest trends on Web Design Thu, 24 May 2012 01:59:08 +0000 en hourly 1 http://wordpress.org/?v=3.1.4 Create Audio Visualizations Using HTML5 http://blogfreakz.com/tutorial/create-audio-visualizations-using-html5/ http://blogfreakz.com/tutorial/create-audio-visualizations-using-html5/#comments Mon, 23 Apr 2012 09:45:01 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=26983 As you know, audio visualization is that psychedelic or kaleidoscopic animation you see while listening to your MP3s on media players like Windows Media Player and Winamp. Well, for today’s featured tutorial I’d like to share with you all something from Senior Interactive Developer Nick Jonas. It’s a tutorial that will not only teach you how to create an audio visualization using HTML5 but will also help you familiarize yourself with Google Chrome’s Web Audio API.

HTML5 Audio Visualizations Create Audio Visualizations Using HTML5

By the time you’re finished with the tutorial you will have created a native browser app that will cycle through a designated playlist which will also have its own audio-driven animation feature. CLICK HERE to start working on his tutorial.

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/create-audio-visualizations-using-html5/feed/ 0 HTML5 & CSS3 E-Store Single-Page Layout http://blogfreakz.com/web-design/html5-css3-e-store-single-page-layout/ http://blogfreakz.com/web-design/html5-css3-e-store-single-page-layout/#comments Mon, 16 Apr 2012 10:10:29 +0000 Marvin@Blogfreakz http://blogfreakz.com/?p=26866

Looking for a design for your online store website? Here’s a very nice layout that’s well-suited for product online selling websites, called the ‘E-Store’.

E Store HTML5 & CSS3 E Store Single Page Layout

This is a single-page layout designed by a web designer at Script-Tutorials in which HTML5 and CSS3 features are used so it is easier for all website owners to modify. The template is clean and sleek with gray color styling. You can check out the full demo then grab the zip file.

For the complete details of the E-Store tutorial, CLICK HERE.

 

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/html5-css3-e-store-single-page-layout/feed/ 0 Create a Slideshow With HTML5 http://blogfreakz.com/tutorial/create-a-slideshow-with-html5/ http://blogfreakz.com/tutorial/create-a-slideshow-with-html5/#comments Mon, 02 Apr 2012 10:54:59 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=26627 Finally, there’s no need for you to upload a PowerPoint (.pps) file and embed a code on your webpage just to be able to display a slideshow presentation. Here’s a great script I found over at AjaxShake that’ll teach you how to create an amazing slideshow in an HTML5 environment!

HTML5 slideshow Create a Slideshow With HTML5

The code is created by Luke Mahe and Marcin Wichary. Using it is pretty easy and simple; just copy/paste the code in a new file and save it in your hard drive. Once you’re ready to use it, you can just edit the content to your liking. Two templates are also available.

Click on the respective links for more info about the code and its demo.

Incoming search terms for the article:

]]> http://blogfreakz.com/tutorial/create-a-slideshow-with-html5/feed/ 1 Create a Sticky Note Effect with CSS3 http://blogfreakz.com/web-design/create-a-sticky-note-effect-with-css3/ http://blogfreakz.com/web-design/create-a-sticky-note-effect-with-css3/#comments Thu, 01 Mar 2012 03:51:24 +0000 Marvin@Blogfreakz http://blogfreakz.com/?p=25676 Web developer Christian Heilmann‘s CSS3 and HTML5-based ‘sticky note effect’ will add a quirky yet utilitarian touch to your website design. However, this works best on the latest Webkit browsers, Chrome, Opera, Safari and Firefox. With other browsers, you’ll get only the standard yellow squares.

Stick notes Create a Sticky Note Effect with CSS3Click on the notes to try out the demo, and grab the easy tutorial now!

 


Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/create-a-sticky-note-effect-with-css3/feed/ 1 5 Fantastic HTML5 and CSS3 Snippets for Your Website http://blogfreakz.com/web-design/5-fantastic-html5-and-css3-snippets-for-your-website/ http://blogfreakz.com/web-design/5-fantastic-html5-and-css3-snippets-for-your-website/#comments Thu, 23 Feb 2012 08:14:10 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=25469 Here’s a shortlist of five simple yet cool HTML5 effects that can add life to your website! No images and JavaScript are necessary, as all of them are accomplished using only a combination of HTML5 and CSS3.

1. CSS3 Loading Animation

A very basic loading animation.

Loading Animation 5 Fantastic HTML5 and CSS3 Snippets for Your Website

CSS code:

<style type='text/css'>
@-webkit-keyframes rotate {
from {
-webkit-transform:   rotate(0deg);
}
to {
-webkit-transform:   rotate(360deg);
}
}
#loading {
border: 1px solid #000;
border-right: 0;
border-bottom: 0;
-webkit-border-radius:   100px;
height: 100px;
width: 100px;
margin: 100px;
-webkit-transition: all   0.5s ease-in;
-webkit-animation-name:               rotate;
-webkit-animation-duration:           1.0s;
-webkit-animation-iteration-count:    infinite;
-webkit-animation-timing-function: linear;
}
</style>

HTML code:

<body>
<div id="loading"></div>
</body>

2. Twitter-inspired Glowing Input Box

The input box glows when you click on it. However, it only works on the latest browser versions (Firefox 4+, IE9, etc.).

Glowing Input Box 5 Fantastic HTML5 and CSS3 Snippets for Your Website

 

 

CSS code:

<style>
input{
font-size:18px;
font-family: helvetica;
}
input {
outline:none;
transition: all 0.25s   ease-in-out;
-webkit-transition: all   0.25s ease-in-out;
-moz-transition: all 0.25s   ease-in-out;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border:1px solid   rgba(0,0,0, 0.2);
color:gray;
background-color:#eee;
padding: 3px;
}
input:focus {
box-shadow: 0 0 15px green;
-webkit-box-shadow: 0 0   15px green;
-moz-box-shadow: 0 0 15px   green;
border:1px solid green;
background-color:white;
}
body{
background-color: #FFF;
color:gray;
font-family:Arial;
}
</style>

HTML code:

<div>
Username <input   type="text" name="username"   placeholder="username">
</div>

 

3. Blur/Unblur Text Effect On Hover

This uses CSS3 transitions and text shadow with transparent color that creates a blurred text effect.

Blur and Unblur 5 Fantastic HTML5 and CSS3 Snippets for Your Website

 

 

 

 

CSS code:

<style>
.hover_blur{
font-size:35px;
font-family: helvetica;
transition: all 0.25s   ease-in-out;
-moz-transition: all 0.25s   ease-in-out;
-webkit-transition: all   0.25s ease-in-out;
color:black;
}
.hover_blur:hover{
color:transparent;
text-shadow: black 0 0   100px;
}
.hover_unblur{
font-size:35px;
font-family: helvetica;
transition: all 0.25s   ease-in-out;
-moz-transition: all 0.25s   ease-in-out;
-webkit-transition: all   0.25s ease-in-out;
text-shadow: black 0 0   30px;
color:transparent;
}
.hover_unblur:hover{
color:black;
text-shadow: black 0 0 0px;
}
body{
background-color: #FFF;
color:gray;
font-family:Arial;
}
</style>

HTML code:

<h1>Hover To Blur</h1>
<h1>Hover To Unblur</h1>

 

4. Fluid Horizontal Navigation (CSS3 Flexbox)

This is a simple yet fluid horizontal navigation menu that uses the CSS3 Flexible Box model.

Flexbox 5 Fantastic HTML5 and CSS3 Snippets for Your Website

 

 

 

 

 

 

 

CSS code:

<style type="text/css">
.container{
display:block;
float:left;
min-width:500px;
resize:both;
overflow:auto;
height:300px;
border:1px solid black;
background:rgba(0,0,0,.1);
}
nav{
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
border:2px solid #333;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px;
border-radius:6px;
width: 95%;
margin:20px auto;
background:white;
}
nav a{
display:block;
color:#333;
padding:10px;
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
text-align:center;
text-decoration:none;
-webkit-transition:all .4s   linear;
-moz-transition:all .4s linear;
-o-transition:all .4s linear;
transition:all .4s linear;
}
a:hover {
background-color:   rgba(0,0,0,.2);
}
a:active {
background-color: #333;
-webkit-box-shadow: inset 0   2px 8px hsla( 0, 0%, 0%, 0.6 );
-moz-box-shadow: inset 0   2px 8px hsla( 0, 0%, 0%, 0.6 );
-o-box-shadow: inset 0   2px 8px hsla( 0, 0%, 0%, 0.6 );
box-shadow: inset 0   2px 8px hsla( 0, 0%, 0%, 0.6 );
color:white;
}
p{
margin:20px;
}
</style>

HTML code:

<div>
<nav>
<a   href="#">Home</a>
<a   href="#">About</a>
<a   href="#">Contact</a>
<a   href="#">Rock &amp; Roll</a>
<a   href="#">Waffles</a>
</nav>
<p>Resize the Window</p>
</div>

 

5. Animated Button

Originally created by Dan Cederholm, this button’s extra-smooth animation is way better than your typical image swap effect!

Animated Button 5 Fantastic HTML5 and CSS3 Snippets for Your Website

 

 

 

CSS code:

<style type="text/css">
body {
padding: 2em 5em;
font-family:   "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 250%;
background: #eee;
}
a:link, a:visited {
text-decoration: none;
color: #fff;
border: none;
}
a img {
border: none;
}
div.mod {
margin: 0 0 30px 0;
padding: 80px;
text-align: center;
background: #fff;
-webkit-border-radius:   10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 3px   rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 3px   rgba(0, 0, 0, .1);
box-shadow: 0 0 3px rgba(0,   0, 0, .1);
}
p.notes {
margin: 0 0 10px 0;
font-size: 13px;
line-height: 1.4;
color: #999;
text-align: center;
}
p.notes a {
font-weight: bold;
color: #777;
border-bottom: 1px solid   #ccc;
-webkit-transition: color .2s   ease;
-moz-transition: color .2s   ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
p.notes a:hover {
color: #555;
}
p.notes span {
margin: 0 4px;
color: #ccc;
}
#stamp {
display: block;
margin: 20px 0;
border: none;
-webkit-transition: opacity   .2s ease;
-moz-transition: opacity .2s   ease;
-o-transition: opacity .2s   ease;
transition: opacity .2s ease;
}
#stamp:hover {
opacity: .7;
}
/* button styles */
.btn {
display: inline-block;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow:
0 8px 0 #1a74a1,  0 15px 20px rgba(0, 0, 0, .35);
-moz-box-shadow:
0 8px 0 #1a74a1,  0 15px 20px rgba(0, 0, 0, .35);
box-shadow:
0 8px 0 #1a74a1,  0 15px 20px rgba(0, 0, 0, .35);
-webkit-transition:   -webkit-box-shadow .2s ease-in-out;
-moz-transition:   -moz-box-shadow .2s ease-in-out;
-o-transition: -o-box-shadow   .2s ease-in-out;
transition: box-shadow .2s   ease-in-out;
}
.btn span {
display: inline-block;
padding: 10px 20px;
font-family:   "cooper-black-std-1", "cooper-black-std-2", Helvetica,   Arial, sans-serif;
line-height: 1;
text-shadow: 0 -1px 1px   rgba(19, 65, 88, .8);
background: #3194c6;
background:   -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3194c6), to(#5bacd6));
background:   -moz-linear-gradient(#3194c6, #5bacd6);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0   -1px 1px rgba(255, 255, 255, .15);
-moz-box-shadow: inset 0   -1px 1px rgba(255, 255, 255, .15);
box-shadow: inset 0 -1px   1px rgba(255, 255, 255, .15);
-webkit-transition:   -webkit-transform .2s ease-in-out;
-moz-transition:   -moz-transform .2s ease-in-out;
-o-transition: -o-transform   .2s ease-in-out;
transition: transform .2s   ease-in-out;
}
.btn:active {
-webkit-box-shadow:
0 8px 0 #1a74a1,  0 12px 10px rgba(0, 0, 0, .3);
-moz-box-shadow:
0 8px 0 #1a74a1,  0 12px 10px rgba(0, 0, 0, .3);
box-shadow:
0 8px 0 #1a74a1,  0 12px 10px rgba(0, 0, 0, .3);
-webkit-transition: -webkit-transform 0s   ease-in-out;
-moz-transition:   -moz-transform 0s ease-in-out;
-o-transition: -o-transform   0s ease-in-out;
transition: transform 0s   ease-in-out;
}
.btn:active span {
-webkit-transform:   translate(0, 4px);
-moz-transform:   translate(0, 4px);
-o-transform: translate(0,   4px);
transform: translate(0,   4px);
-webkit-transition:   -webkit-transform 0s ease-in-out;
-moz-transition:   -moz-transform 0s ease-in-out;
-o-transition: -o-transform   0s ease-in-out;
transition: transform 0s   ease-in-out;
}
</style>

HTML code:

<div>
<a href="#"  ><span>Press this!</span></a>
</div>

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/5-fantastic-html5-and-css3-snippets-for-your-website/feed/ 0 Create A Grayscale Image Hover In HTML5 http://blogfreakz.com/web-design/creating-grayscale-image-hover-html5/ http://blogfreakz.com/web-design/creating-grayscale-image-hover-html5/#comments Wed, 25 Jan 2012 10:08:26 +0000 Keith@Blogfreakz http://blogfreakz.com/?p=24537 It used to be that shifting an image from grayscale to colored and vice-versa as you hover over it required 2 copies of the said image — one in grayscale and the other in color.  But thanks to Darcy Clarke for the JavaScript & HTML 5 grayscale in this tutorial, this feat is easier and faster because the grayscale image is generated from the original source.

116 285x175 Create A Grayscale Image Hover In HTML5

Click on the above image for the demo.

Steps:

  1. Get a copy of jquery.js
  2. Paste the code below onto your web page. What the code will do is look for the target images (.item img) and then generate a grayscale version.
<script src=”jquery.min.js” type=”text/javascript”></script> 

<script type=”text/javascript”>

// On window load. This waits until images have loaded which is essential

$(window).load(function(){

// Fade in images so there isn’t a color “pop” document load and then on window load

$(“.item img”).fadeIn(500);

// clone image

$(‘.item img’).each(function(){

var el = $(this);

el.css({“position”:”absolute”}).wrap(“<div class=’img_wrapper’ style=’display: inline-block’>”).clone().addClass(‘img_grayscale’).css({“position”:”absolute”,”z-index”:”998″,”opacity”:”0″}).insertBefore(el).queue(function(){

var el = $(this);

el.parent().css({“width”:this.width,”height”:this.height});

el.dequeue();

});

this.src = grayscale(this.src);

});

// Fade image

$(‘.item img’).mouseover(function(){

$(this).parent().find(‘img:first’).stop().animate({opacity:1}, 1000);

})

$(‘.img_grayscale’).mouseout(function(){

$(this).stop().animate({opacity:0}, 1000);

});

});

// Grayscale w canvas method

function grayscale(src){

var canvas = document.createElement(‘canvas’);

var ctx = canvas.getContext(’2d’);

var imgObj = new Image();

imgObj.src = src;

canvas.width = imgObj.width;

canvas.height = imgObj.height;

ctx.drawImage(imgObj, 0, 0);

var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

for(var y = 0; y < imgPixels.height; y++){

for(var x = 0; x < imgPixels.width; x++){

var i = (y * 4) * imgPixels.width + x * 4;

var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

imgPixels.data[i] = avg;

imgPixels.data[i + 1] = avg;

imgPixels.data[i + 2] = avg;

}

}

ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

}

</script>

Be sure to set your target image (eg: .post-img, img, .gallery img, etc.)

TIP: You may change the transition speed by adjusting the highlighted number in the code (ie. 1000 = 1 second)

Provided that JavaScript is enabled, this will work on any browser that supports HTML5 such as Safari, Chrome, and Firefox. Otherwise, the image will revert to its original colored state.

Developer’s Note: if it doesn’t work with Firefox and Chrome locally, you need to put the HTML file on a web server.

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/creating-grayscale-image-hover-html5/feed/ 0 21 Free HTML5 and CSS3 Corporate & Folio Templates http://blogfreakz.com/web-design/21-free-html5-and-css3-corporate-folio-templates/ http://blogfreakz.com/web-design/21-free-html5-and-css3-corporate-folio-templates/#comments Wed, 11 Jan 2012 05:00:48 +0000 Marvin@Blogfreakz http://blogfreakz.com/?p=24195 One of the latest languages in web development that has created a buzz among users is HTML5. Combined with CSS3, it produces web design tools that are innovative, useful, user-friendly, and even fun.

I’ve gathered a list of free templates below which use HTML5 and CSS3 supplemented with other features like jQuery. These templates have clean and sleek designs, perfect for corporate, product, portfolio and service websites. Just click on the names and thumbnails to view their respective sites and demos.

Nova
12 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

One-Page Template
22 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Kroft
3 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Free HTML5 Template
4 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Flip Thru
5 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Earthday
6 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

HTML5 Template for Design Company Website
7 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Shinra
8 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Applegreen
9 200x186 21 Free HTML5 and CSS3 Corporate & Folio Templates

Blogger5
10 200x156 21 Free HTML5 and CSS3 Corporate & Folio Templates

Hosting
111 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Darkness
13 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Webpilot
23 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Lorem
31 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

HTML5 Admin Template
41 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

RedX
51 200x195 21 Free HTML5 and CSS3 Corporate & Folio Templates

Ost Magazine

61 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Art of Your Business
71 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Vivid Photo
91 200x172 21 Free HTML5 and CSS3 Corporate & Folio Templates

Communications
101 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Technicalline
112 200x200 21 Free HTML5 and CSS3 Corporate & Folio Templates

Incoming search terms for the article:

]]> http://blogfreakz.com/web-design/21-free-html5-and-css3-corporate-folio-templates/feed/ 1 Cuepoint.js – Adding Cue-Points & Subtitles To HTML5 Video http://blogfreakz.com/jquery/cuepoint-js-adding-cue-points-subtitles-to-html5-video/ http://blogfreakz.com/jquery/cuepoint-js-adding-cue-points-subtitles-to-html5-video/#comments Sun, 10 Jul 2011 15:45:36 +0000 Mufti Ali http://blogfreakz.com/?p=20961 2837DM Cuepoint.js Adding Cue Points & Subtitles To HTML5 VideoCuepoint.js is an open source jQuery plugin for adding subtitles to your HTML5 video. To implement this plugin is pretty simple. Simply pass in an object containing your slides to the cuepoint.init method.

cuepoint Cuepoint.js Adding Cue Points & Subtitles To HTML5 Video

The time is in seconds.

$(document).ready(function(){
  var slides = {5:"Hello World"}
  cuepoint.init(slides);
  cuepoint.play();
});

If you want to create skip to links you can use the setTime(seconds) method and bind it to a jQuery click event.

Requirements: jQuery Framework
Demo: http://cuepoint.org
License: Other License

Incoming search terms for the article:

]]> http://blogfreakz.com/jquery/cuepoint-js-adding-cue-points-subtitles-to-html5-video/feed/ 1 HTML5 Music Player Plugin For jQuery http://blogfreakz.com/sound/html5-music-player-plugin-for-jquery/ http://blogfreakz.com/sound/html5-music-player-plugin-for-jquery/#comments Thu, 16 Jun 2011 14:52:23 +0000 Mufti Ali http://blogfreakz.com/?p=20454 22Djz6 HTML5 Music Player Plugin For jQueryRemember that awesome music player psd created by Orman Clark?, The guys from codebase is create html5 music player plugin for jQuery by using this psd file. This jQuery plugin allow you to build your own playlist. The playlist uses the same format with jPlayer (an array of objects. However, this plugin requires you to add some additional parameters.

html5 player HTML5 Music Player Plugin For jQuery

You can also  specify some options, such as currency symbol, buy text, number of tracks to show and auto play setting.

Requirements: jQuery Framework
Demo: http://www.codebasehero.com/files/music-player/demo/
License: Other License

Incoming search terms for the article:

]]> http://blogfreakz.com/sound/html5-music-player-plugin-for-jquery/feed/ 1 Droparea – HTML5 Drag & Drop Image File Uploader http://blogfreakz.com/html5/droparea-html5-drag-drop-image-file-uploader/ http://blogfreakz.com/html5/droparea-html5-drag-drop-image-file-uploader/#comments Wed, 15 Jun 2011 05:53:33 +0000 Mufti Ali http://blogfreakz.com/?p=20402 QXgzbh Droparea HTML5 Drag & Drop Image File UploaderDroparea is a HTML5 drag and drop image file uploader jQuery plug-in and a php script for server-side. Simply drag the image file into the specified area, the image will be automatically uploaded to your server. You can also see the progress of the upload too. Droparea has been tested on Google Chrome and Mozilla Firefox.

droparea Droparea HTML5 Drag & Drop Image File Uploader

Requirements: jQuery Framework
Demo: http://gokercebeci.com/dev/droparea
License: MIT License

Incoming search terms for the article:

]]> http://blogfreakz.com/html5/droparea-html5-drag-drop-image-file-uploader/feed/ 0