HTML

How to shake an image using html and css

Hover over the image:
Pineapple
Step:1

Copy and paste the given code

Tags: , , ,

Stylish Text Effect

Step 1 : Open a new Photoshop document
In the first step,  open a new document with preferred size.
We can use the keyboard shortcut ctrl+N to open a new document.

p1
image-2575

 

 

Step 2 : Fill the document with Balck
Set the foreground color as Black. Use the keyboard shortcut Alt+Backspace to fill the document with foreground color.

p2
image-2576

Step 3 : Add your text to the Document
Grab the type tool from the tools palette otherwise press T to work with keyboard shortcut.

p3
image-2577

Go to the option bar set font color, font size and font style.
Press letter X to swap foreground and background color so that we get white as a foreground color.

p4
image-2578

Type the text plastic and resizing the text size  by pressing ctrl+T.

p5
image-2579

Step 4 : Choose a color for your text using the color overlay layer style
To create plastic effect first we have to choose color overlay from layer styles which is in bottom of layer palette.

p6
image-2580

  

p7
image-2581
  

It brings up a color overlay dialog box. Click on color swatch and pick a lighter shade of the color.

p8
image-2582

p9
image-2583

Now the text color will appear like this

p10
image-2584

 

Step 5: Add An Inner Shadow To The Text Using The “Inner Glow” Layer Style
Now we are going to give a three dimensional look for our text by choosing Inner glow style.

p11
image-2585

Change the blend mode to multiply and change an opacity also to 50%.
Click on color swatch and pick a matching color, source will be an edge and the shadow size will be 13 pixels.

p12
image-2586

Now the text will look something like this

p13
image-2587

Step 6: Apply The “Bevel and Emboss” Layer Style
We have to add Bevel and Emboss effect to our text. For doing this we want to load new contours and append that.

p14
image-2588

To load new contours click on the down pointing arrow to the right side of the contour preview thumbnail.

p15
image-2589

p16
image-2590

p17
image-2591

p18

Select Large list from the options so that we can see both thumbnail preview and name of the contour .

p19
image-2592

Select the Ring-Triple and change the rest of Bevel and Emboss options.

p20
image-2593

p21
image-2594

Now the text looks like this

p22
image-2595

Step 7: Apply The “Contour” Layer Style
Add the contour layer style from the layer style palette.

p23
image-2596

p24
image-2597

Change the contour style and range to create plastic effect on our text

p25
image-2598

p26

After adding contour style the text will appear like this

p27
image-2599

Step 8: Duplicate The Text Layer
Duplicate the text layer so now there are two text layers in the layers palette.

p28
image-2600

Click on the original text layer, once again doing some changes in the original text.

p29
image-2601

Step 9: Add a Stroke To The Text
Click on layer style to create stroke effect on the text.

p30
image-2602

Change the Range and color

p31
image-2603

Move the mouse over the text we will see our mouse cursor will change into eyedropper icon.
Then click near the edge of one letter to sample shade of the color.
Then choose color midway between lighter and darkest colors in the text.

p32
image-2604

p33
image-2605

 

Step 10: Apply The “Bevel and Emboss” Style To The Stroke
Once again wsitch to Bevel and Emboss style to stroke itself.

p34
image-2606

Click on the down pointing arrow to change to stroke emboss.

p35
image-2607

Then change contour style and range

p36
image-2608

p37
image-2609

Finally we get the text with plastic effect

p38
image-2610

Tuesday, February 18th, 2014 HTML, Photoshop, Whats Trending No Comments

HTML5 Tutorial: Base Element Tag

The HTML <base> tag is used to specify a base URI, or URL, for relative links. For example, you can set the base URL once at the top of your page, then all subsequent relative links will use that URL as a starting point.

The <base> tag must be between the document’s <head> tags. Also, there must be no more than one base element per document.

Example

Modify the code below, then click “Update”. See below for attributes.

Source Code

<head>
<base href=”http://www.searchenginegenie.com/javascript/” target=”_blank” />
</head>
<body>
<p>Learn about <a href=”javascript_arrays.cfm”>JavaScript Arrays</a></p><p>Note: The link above will actually resolve to <i>http://www.searchenginegenie.com/javascript/javascript_arrays.cfm</i> regardless of the URL of the current page. This is because the base URL (http://www.searchenginegenie.com/javascript/) is prepended to the (relative) URL indicated in the link (javascript_arrays.cfm)</p>
</body>
 
Result
 
Learn about JavaScript ArraysNote: The link above will actually resolve to http://www.searchenginegenie.com/javascript/javascript_arrays.cfm regardless of the URL of the current page. This is because the base URL (http://www.searchenginegenie.com/javascript/) is prepended to the (relative) URL indicated in the link (javascript_arrays.cfm)

 

Tags: ,

Thursday, June 14th, 2012 HTML, web design tips No Comments

Solution for HTML5 Accessibility in IE

OUTPUT (in IE) AFTER FIXING THE SOLUTION:

html5-solution-in-ie
image-1823

OUTPUT (in IE) BEFORE FIXING THE SOLUTION:

html5-without-solution-in-ie
image-1824

HTML5 CODE:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/HTML" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>My first HTML5 website</title>
</head>
<body style="padding-left: 35px;">
<header> Header Tag of HTML5 with
<nav><a href="#">&lt;nav&gt;</a> </nav>
</header>
<article>
<section>
<h2>Article & section Tag</h2>
<p>[…]</p>
<p>[…]</p>
<p>[…]</p>
</section>
</article>
<footer>Footer Tag of HTML5 </footer>
</body>
</html>

CSS CODE:

header {
background: #9e9e9e;
width: 600px;
height: 25px;
color:#FFF;
font-size:20px;
display: block;
text-align:center;
}
header a {
color: #FFF;
}
header a:hover {
color: #ebebeb;
}
article{
color: #CCC;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
footer {
background: #9e9e9e;
width: 600px;
height: 25px;
color:#FFF;
font-size:20px;
display: block;
text-align:center;
}

The main script should be added to the section. It only can access the HTML5 in IE. Without the below script you will not get the required output.

html5-solution-script
image-1825

That’s it…

Tags: , , , ,

Wednesday, May 2nd, 2012 HTML, web design, web design tips No Comments

Photo Sliding Gallery using HTML

Final Preview:

Step:1 Open a new HTML Document in dreamweaver.

Step:2 Paste the following code in the HTML Document.

<ul id="sliding">
<li><a href="#nogo">
<img src="pic1.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic2.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic3.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic4.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic5.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic6.jpg"/></a></li>
<li><a href="#nogo">
<img src="pic7.jpg"/></a></li>
</ul>

Step:3 Create embedded <style> style below <head> tag. Add the following CSS Code:

<style>
#sliding {
padding:0;
margin:20px 0 0 20px;
list-style-type:none;
overflow:hidden;
width:495px;
height:240px;
background:#fff url(back.jpg);
}
#sliding li {
float:left;
}
#sliding li a {
display:block;
height:240px;
width:28px;
float:left;
text-decoration:none;
border-right:1px solid #fff;
cursor:default;
}
#sliding li a img {
width:28px;
height:240px;
border:0;
}
#sliding li a:hover {
background:#eee;
width:320px;
}
#sliding li a:hover img {
width:320px;
}
</style>

Step:4 Place required images inside your HTML file folder.

Now run the Program.

Tags: , , ,

Friday, April 20th, 2012 HTML, web design, web design tips 1 Comment

CSS Navigation Menu using background positioning








Step-1 Open an html document. Write the following html code inside the body tag:

<ul id=”navigation”>
<li><a href=”#” id=”home”>Home Page</a></li>
<li><a href=”#” id=”about”>About Us</a></li>
<li><a href=”#” id=”webdesign”>Web Design</a></li>
<li><a href=”#” id=”graphicdesign”>Graphic Designs</a></li>
<li><a href=”#” id=”seo”>Search Engine Optimization SEO</a></li>
<li><a href=”#” id=”contact” >Contact Us</a></li>
</ul>



Step-2  Create a new CSS document and write the following CSS syntax and save it as MAIN.CSS.Here background position defined to draw the different position of the button into visible.

#navigation { list-style: none; margin: 0; padding: 0;}
#navigation:hover li a#webdesign { background-position: -280px; }
#navigation:hover li a#home { background-position: -206px; }
#navigation:hover li a#graphicdesign { background-position: -340px; }
#navigation:hover li a#contact { background-position: -232px; }
#navigation:hover li a#about { background-position: -242px; }
#navigation:hover li a#seo { background-position: -540px; }
#navigation li { float: left; }
#navigation li a { text-indent: -999999px; overflow: hidden; display: block; height: 72px; }
#home { background: url(home.gif); width: 103px; }
#home:hover { background: url(home.gif) 0 0 !important; }
#about { background: url(about.gif); width: 121px; }
#about:hover { background: url(about.gif) 0 0 !important; }
#webdesign { background: url(webdesign.gif); width: 140px; }
#webdesign:hover { background: url(webdesign.gif) 0 0 !important; }
#graphicdesign { background: url(graphicdesign.gif); width: 170px; }
#graphicdesign:hover { background: url(graphicdesign.gif) 0 0 !important; }
#seo { background: url(seo.gif); width: 281px; }
#seo:hover { background: url(seo.gif) 0 0 !important; }
#contact { background: url(contact.gif); width: 116px; }
#contact:hover { background: url(contact.gif) 0 0 !important; }



Step-3 Paste the following code inside the <head></head> tag in HTML file to link the MAIN.CSS.

<link href=”web-design3_files/main2.css” type=”text/css” rel=”stylesheet” media=”screen”>



Step-4 Your HTML, CSS and below images should be in same folder.

image-1597

Now run the program.

Tags: , , ,

Thursday, April 12th, 2012 HTML, web design, web design tips No Comments

How To Use The Article Element – HTML5

The <article> tag is new to HTML5 and it replaces <div> tag. It specifies self-contained content in a document, page or in a site. This can be use in Blog post, Magazine article, comments or in widgets.

How To Use The Article Tag:

<article>
<h1>heading</h1>
<p>content</p>
</article>

 

Coding:

<html>
<head>
<title>How To Use The Article Element – HTML5</title>
</head>
<style>
.wrapper{color:#000; width: 800px; }.wrapper article{ color:#FFF; font: Arial, Helvetica, sans-serif; font-size:14px; background-color:#3a3a3a; padding: 0px 20px 12px; border: #01a2e5 solid 0.01em;}.wrapper article p { color:#11a6dd;}
.wrapper article h3 { font-family: “Times New Roman”, Times, serif; color: #FFF;}
</style>
<body >
<div class=”wrapper”>
<article>
<h3>Heading</h3>
<p>Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!</p>
<p>Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer</p>
</article>

</div >

</body>

</html>

 

Final Preview:

Heading

Lectus aliquet penatibus ac mid nec elementum augue ridiculus nascetur? Cursus urna facilisis turpis aliquam porttitor, turpis egestas arcu, adipiscing nisi mus diam, cursus, urna scelerisque, nunc amet sociis elementum, placerat ac!

Sed, ac risus tincidunt scelerisque quis turpis a pulvinar amet? Aliquet cum porttitor integer enim odio non, tristique, duis nec dapibus integer

Tags: , ,

Monday, December 26th, 2011 HTML, web design, web design tips No Comments
Request a Free SEO Quote