HRWebGuru

Monday 2 December 2013

Alternate table row color using CSS

There are two syntax of change Alternate table row color using CSS...

I am using a table with alternate row color with this.

CSS:

tr.d0 td {
    background-color: #CC9999; color: black;
}
tr.d1 td {
    background-color: #9999CC; color: black;
}

HTML:

<table>
<tr class="d0"><td>One</td><td>one</td></tr>
<tr class="d1"><td>Two</td><td>two</td></tr>
</table>

Syntax 2




<!-- source: http://www.apphp.com/index.php?snippet=css-alternating-table-color-rows -->

02.<style type="text/css">

03./* technique 1 */

04.tbody tr:nth-child(odd){ background-color:#ccc; }

05./* technique 2 */

06.TBODY TR.odd { background-color:#78a5d1; }

07.</style>

08. 

09.<table>

10.<tbody>

11.<tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

12.<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

13.<tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

14.<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

15.<tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

16.</tbody>

17.</table>

18. 

19.<table>

20.<tbody>

21.<tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

22.<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

23.<tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

24.<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

25.<tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

26.</tbody>

27.</table>





Created By: Hidayt Rahman

Tuesday 26 November 2013

How can I use Skype URIs in my webpages for Call and Chat ?

Mention it on your webpage.where you want to use call/chat service.

<a href="skype:hidayt.rahman?call">Call to the Webmaster</a>

<a href="skype:hidayt.rahman?chat">Chat to the Webmaster</a>

Sunday 24 November 2013

Responsive CSS web design examples with code

Responsive style template is today is very popular. Responsive means when you open website in your any of device like ipad, mobile, PC, etc. it will set it’s design as per your device’s screen size. Responsive style also called liquid design. Many popular site are responsive today. Here I have written three line code for setting up different CSS for all different devices. You just require to make three CSS files and set this code in your HEAD of site code.

Links of CSS

Create files and use this code in your HEAD of html code. There is media screen width given and you can change its max and min width as per required.

<link rel='stylesheet' href="style.css/" /> 

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

<link rel='stylesheet' media='screen and (min-width: 481px) and (max-width: 768px)' href="style_ipad.css" />  <!--ipad css*-->

Download Demo

Thursday 21 November 2013

What is the difference between HTML tags DIV and SPAN?

div is a block element, span is inline.

This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc.

For example:

<div>This a large main division, with <span>a small bit</span> of spanned text!</div>

Note that it is illegal to place a block level element within an inline element, so:

<div>Some <span>text that <div>I want</div> to mark</span> up</div>

...is illegal.

You asked for some concrete examples, so is one taken from my bowling website

<div id="header">
    <div id="userbar">
        Hi there, <span class="username">Hidayt Rahman</span> |
        <a href="/edit-profile.html">Profile</a> |
        <a href="http://hrwebguru.blogspot/_ah/logout?...">Sign out</a>
    </div>
    <h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>

Sunday 17 November 2013

z-index example

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	img
	{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1;
	}
	</style>
	</head>

	<body>
	<h1>This is a heading</h1>
	<img src="Images/k.jpg" width="100" height="140" />
	<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
	</body>
	</html>

Tuesday 12 November 2013

CSS3 Animations

With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in existing web pages.

To create animations in CSS3, you will have to learn about the @keyframes rule.

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Internet Explorer 10, Firefox, and Opera supports the @keyframes rule and animation property.

Chrome and Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

Example:

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

What are Animations in CSS3?

An animation is an effect that lets an element gradually change from one style to another.

You can change as many styles you want, as many times you want.

Specify when the change will happen in percent, or the keywords "from" and "to", which is the same as 0% and 100%.

0% is the beginning of the animation, 100% is when the animation is complete.

For best browser support, you should always define both the 0% and the 100% selectors.

Change the background color when the animation is 25%, 50%, and again when the animation is 100% complete:

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

Example
Change the background color and position:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

By: Hidayt Rahman

HRWebGuru

Profession

Monday 2 December 2013

Alternate table row color using CSS

There are two syntax of change Alternate table row color using CSS...

Tuesday 26 November 2013

How can I use Skype URIs in my webpages for Call and Chat ?

Sunday 24 November 2013

Responsive CSS web design examples with code

Links of CSS

Thursday 21 November 2013

What is the difference between HTML tags DIV and SPAN?

Sunday 17 November 2013

z-index example

Tuesday 12 November 2013

CSS3 Animations

CSS3 Animations

What are Animations in CSS3?

Example

Blog Archive