Video Tutorial - Create a Responsive Website Using HTML5 and CSS3

Posted On 10:02 AM // Leave a Comment

After I locate out about html5 for making a website. I tried to locate a video tutorial to make a web responsive using html5. The following is a video that encourage you to see it and try it out.

Create a Responsive Website Using HTML5 and CSS3 - VIDEO TUTORIAL from 1stwebdesigner

in this tutorial you can know how to to create a responsive website using HTML5 and CSS3 from scratch. So you must watch and try it how to create a responsive website using HTML5 and CSS3 from 1st web designer.

Make Image Black and White using CSS Filter

Posted On 4:26 PM // Leave a Comment

Last time i create tumblr theme using css filter for grayscale withhold for firefox and now i will share to you how tomake image to black and white or grayscale. First open your notepad or dreamweaver or text editor for html. And create easy html example .

<h2>CSS Filter :</h2>
<div class="normal">
<img src="yourimage.jpg" alt="">
</div>
<div class="grayscale">
<img src="yourimage.jpg" alt="">
</div>

and for the css

.grayscale{
 filter: grayscale(100%); 
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}
.grayscale:hover{
 filter: grayscale(0%); 
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 -ms-filter: grayscale(0%);
 -o-filter: grayscale(0%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0.ffff 0.ffff 0.ffff 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
}

This css we make grayscale effect (black and white), however if your mouse on fly to the describe will back to coloring.

Make triangle with CSS

Posted On 4:03 PM // Leave a Comment

First in HTML

in 1st group we will create triangle direction to summit, bottom, left and right and the 2nd is top-left, top-right, bottom-left and bottom-right.

 <p>First Group</p>
 <div class="triangles">
  <div class="triangle demo-arrow-up"></div>
  <div class="triangle demo-arrow-down"></div>
  <div class="triangle demo-arrow-left"></div>
  <div class="triangle demo-arrow-right"></div>
 </div>
 
 <p>Second Group</p>
 <div class="triangles">
  <div class="triangle demo-topleft"></div>
  <div class="triangle demo-topright"></div>
  <div class="triangle demo-bottomleft"></div>
  <div class="triangle demo-bottomright"></div>
 </div>

and the CSS is like :

/* Triangles
----------------------------*/
.triangles{
 overflow: hidden;
 padding: 20px;
 margin: 20px;
 border: 2px solid #000;
}
 .triangle{
  margin:10px;
  float: left;
 }
  
  /* First Group */
  .demo-arrow-up{
   width: 0; 
   height: 0; 

   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   
   border-bottom: 50px solid #000;
  }

  .demo-arrow-down{
   width: 0; 
   height: 0; 
   
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   
   border-top: 50px solid #333;
  }

  .demo-arrow-right{
   width: 0; 
   height: 0; 
   
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   
   border-left: 50px solid #ff0;
  }

  .demo-arrow-left{
   width: 0; 
   height: 0; 
   
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent; 
   
   border-right:50px solid #f0f; 
  }

  /* Second Group */

  .demo-topleft{
   width: 0; 
   height: 0; 
   
   border-top: 50px solid #333; 
   border-right: 50px solid transparent;
  }

  .demo-topright{
   width: 0; 
   height: 0; 
   
   border-top: 50px solid #333; 
   border-left: 50px solid transparent;
  }
  .demo-bottomleft{
   width: 0; 
   height: 0; 
   
   border-bottom: 50px solid #333; 
   border-right: 50px solid transparent;
  }
  .demo-bottomright{
   width: 0; 
   height: 0; 
   
   border-bottom: 50px solid #333; 
   border-left: 50px solid transparent;
  }

You can see on the CSS we only playing with border-top,border-left, border-right and border-bottom and the result for the demo like.
First Group

Second Group

Make fading out using css3

Posted On 9:43 AM // Leave a Comment

I will teach easy tutorial how to make your page / blog fading out using css3.
First step type on your css :

@-webkit-keyframes FadingOut { 0% { opacity:0; } 100% {opacity:1; } }
@-moz-keyframes FadingOut { 0% { opacity:0; filter: alpha(opacity=0);} 100% {opacity:1; filter: alpha(opacity=100); } }
@-o-keyframes FadingOut { 0% { opacity:0; } 100% {opacity:1; } }
@keyframes FadingOut { 0% { opacity:0; filter: alpha(opacity=0);} 100% {opacity:1; filter: alpha(opacity=100); } }

and add html css like :

html { -webkit-animation: FadingOut 2s; -moz-animation: FadingOut 2s; -ms-animation: FadingOut 2s;}

Example click here

6 Useful Resources to Help You Learn HTML5

Posted On 11:21 AM // Leave a Comment

HTML5 is relatively new and its not supported still by all major browsers, it is being used now by a lot of web designers and developers. Without a doubt, HTML5 is going to play a big part in the way we manufacture on the web, for many years to come. As I just mentioned, many people are using it now, but there are also many of you out there that hasnt touched it yet. Now is a good time to start learning it. So, in order to give you a helping hand with that task, weve rounded up 7 Useful Resources to Help you Learn HTML5.

A Web Developer’s Guide to HTML 5

This document illustrates how to write HTML 5 documents, focussing upon simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.

Dive Into HTML 5

Dive Into HTML 5 is a book that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other good Standards.

HTML5 Doctor

HTML5 Doctor publishes articles relating to HTML5, its semantics, and how to use it right now. They also invite questions via Ask the Doctor, and post answers in future articles so that everyone can benefit.

When can I use…

This is a one-pager that acts as a cheat sheet of compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies.

HTML5 Visual Cheat Sheet

This cheat sheet is essentially a simple visual grid that contains a list of all HTML tags and of their related attributes supported by HTML 5.

HTML5 Gallery

HTML5 gallery has two primary aims, the first is to showcase sites that use HTML5 for markup, so that we can see how people have interpreted the specification and how theyve implemented it. The second is to help people learn about html5 and how it should be used and how to implement it.