Friday 28 June 2013
Working with Adobe illustrator for beginners Part 3- Artboards
1: Artboard Working Area.
2. Artboard Control panel.
3. Navigation Tools.
4. It also a part of navigation tools .
5. Artboard Tool.
6. Artboard Preset .
7. Artboard Name
Artboards is a region for creating graphics work . It can be created using 2 way , one is specify artboards in new document dialog box and the second one is using Artboard tools ( in fig, no 5 is Artboard Tool). in a tool panel . You can also created by using Artboard Pannel( in fig, no 2 is Artboard panel). If you select Artboard tools from tool box , Everything outside the Artboard working area appears dark and dashed lines appears on Artboard (see fig:) . Artboard control panel shows all Artboards you created ,if your Artboard panel is hidden you can access it through Window menu .You can do Show or hide artboard,resize ,delete and switch to specific Artboard etc operations in Artboard Panel. For viewing purpose either in Outline mode or preview mode it can be done by just click Ctrl+Y . My next post is creating ,selecting and modifying shapes using Tools, So dont forget to subscribe dreamtheweb.com and visit daily ... Thank you .......
Best 3 blogger templates top download 2013
1.Revolution Church
- Template Designer-Brian Gardner
- wordpress templates converted into blogger templates .
- Developer -Bloganol
- 486x60 Ads ready
- SEO friendly templates.
>> Download this templates
>> View Demo
2. labnol
- Best Blogger templates in 2013
- mils of downloads
- SEO optimized.
- High earning adsense optimized templates
- Download This templates
view demo
3.Estyle
- Estyle stylish blogger templates
- Ads ready ..
- Seo optimized.Download this templates
View Demo
create a simple program usig php variable
Hello friends yesterday I told about how to install Apach using XAMPP Server .You can easy access your files via http://localhost/phpmyadmin/programname.php If your file is in PhpMyAdmin Directory.
Also you can access your file via http://localhost/phpmyadmin/foldername/programname.php If your file is saved in Your own folder, The second method is very usefull for creating a php based projects.
Let start to create a simple program usig php variable.
<html>
<head>
<title>My First Php Program</title>
</head>
<body>
<h2>Demonstrates using General H1 Tage</h2>
<div><h3>dreamtheweb.com </h3>
<h2>Demonstrates using a variable</h2>
<div>
<?php
$name= "dreamtheweb.com";
print "welcome to, $name";
?>
</div>
</body>
</html>
Save it as myphpprogram.php
out put
The line $name = “dreamtheweb.com”; does two major things. First it creates a new variable named
$name and the second is it will assign the value “dreamtheweb.com” to the variable. In PHP Language , all variables start with a $ (dollar sign ) and the The variable’s name is user defint one except some rools. The assignment symbols (=) is generally used for assignment operations.
The next one is printing a variables value ,If you want to print the value of a variable, simply place the variable name in the text you want printed.
Ie following line:
print “welcome to , $name”;
It actually produces the output:
Welcome to, dreamtheweb.com (Look fig ph1) That its.
The next section we will discuss about displaying word or text using somr other way …
So please keep dreamtheweb.com daily …
Also you can access your file via http://localhost/phpmyadmin/foldername/programname.php If your file is saved in Your own folder, The second method is very usefull for creating a php based projects.
Let start to create a simple program usig php variable.
<html>
<head>
<title>My First Php Program</title>
</head>
<body>
<h2>Demonstrates using General H1 Tage</h2>
<div><h3>dreamtheweb.com </h3>
<h2>Demonstrates using a variable</h2>
<div>
<?php
$name= "dreamtheweb.com";
print "welcome to, $name";
?>
</div>
</body>
</html>
Save it as myphpprogram.php
out put
The line $name = “dreamtheweb.com”; does two major things. First it creates a new variable named
$name and the second is it will assign the value “dreamtheweb.com” to the variable. In PHP Language , all variables start with a $ (dollar sign ) and the The variable’s name is user defint one except some rools. The assignment symbols (=) is generally used for assignment operations.
The next one is printing a variables value ,If you want to print the value of a variable, simply place the variable name in the text you want printed.
Ie following line:
print “welcome to , $name”;
It actually produces the output:
Welcome to, dreamtheweb.com (Look fig ph1) That its.
The next section we will discuss about displaying word or text using somr other way …
So please keep dreamtheweb.com daily …
Best Online Shadow Generator Tools for div tag
Hello friends today i discuss some online drop shadow Generator websites.Using These site you can very easy to create CSS3 Shadow in your website .
The Best online shadow generator websites are given below,
Go ThemeShock Shadow Generator tool
visit herokuapp
The Best online shadow generator websites are given below,
1. ThemeShock Online Shadow generator
Go ThemeShock Shadow Generator tool
2. herokuapp Online Box Shadow generator
visit herokuapp
Reduce a tag hover delay using new css3
webkit-transition ,moz-transition are used to handle hover delay and make <a> is more stylish , The meager use of these attributes is to design navigation items for example visit teamexcellence.com the main navigation items at .2s provides a nice visual effects with high speed loading .
The main content is
-webkit-transition-property: color;
-webkit-transition-duration: .2s;
-webkit-transition-timing: ease-out;
The webkit-transition-duration is the amount of time required to produce delay (in second)
Consider the example given below :
HTML SECTION
<div >
<h1><a href="http://www.dreamtheWeb.com" >DreamtheWeb.com</a> | <a href="http://www.123Arena.com">123Arena.com</a></h1>
</div>
CSS SECTION
a{
color: #F36;
text-decoration: none;
-webkit-transition: color 0.9s ease-out;
-moz-transition: color 0.9s ease-out;font-weight: bold;
}
a:focus,
a:hover{
color:#3C6;
}
SEE THE DEMO
The main content is
-webkit-transition-property: color;
-webkit-transition-duration: .2s;
-webkit-transition-timing: ease-out;
The webkit-transition-duration is the amount of time required to produce delay (in second)
Consider the example given below :
HTML SECTION
<div >
<h1><a href="http://www.dreamtheWeb.com" >DreamtheWeb.com</a> | <a href="http://www.123Arena.com">123Arena.com</a></h1>
</div>
CSS SECTION
a{
color: #F36;
text-decoration: none;
-webkit-transition: color 0.9s ease-out;
-moz-transition: color 0.9s ease-out;font-weight: bold;
}
a:focus,
a:hover{
color:#3C6;
}
SEE THE DEMO
How to set <ui> list item appears horizontally Using CSS
<ui> list items are commonly used for creating horizontal menu with css effects , I will explain it later posts . Lets comes to our problem ,it is very easy to align unordered list item(<ui>) into horizontally by set display: inline to your css file .
For example :
HTML Section
<ul id="menu">
<li> <a href=""> home</a></li>
<li>> <a href=""> 123arena</a></li>
<li>> <a href=""> Dreamtheweb</a></li>
<li>> <a href=""> google</a></li>
<li>> <a href=""> facebook</a></li>
</ul>
CSS Section
#menu li
{
display: inline;
}
SEE DEMO
For example :
HTML Section
<ul id="menu">
<li> <a href=""> home</a></li>
<li>> <a href=""> 123arena</a></li>
<li>> <a href=""> Dreamtheweb</a></li>
<li>> <a href=""> google</a></li>
<li>> <a href=""> facebook</a></li>
</ul>
CSS Section
#menu li
{
display: inline;
}
SEE DEMO
How to Apply different color links on the same page
In this section i discuss how to apply different color links on same page ,default color of a link is blue for all links. So we can apply different color using css property ,It is very easy to implement in your web page .just set a class name to your hyperlinks
for example : I have a 2 links Link1 and link2 link 1 to be red color and link2 to be green color , So i have declare 2 css property for the link1 and link 2 (ie redcss and greencss) The full code given below :
Normal HTML code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>css link</title>
</head>
<body>
<a href="http://www.google.com" class="greencss">Google.com</a>
<a href="http://dreamtheweb.com.com" class="redcss">DreamtheWeb.com</a>
</body>
</html>
CSS section
a.redcss {color:red;}
a.redcss:link {text-decoration: none; color: red;}
a.redcss:visited {text-decoration: none; color: red;}
a.redcss:hover {text-decoration: underline; color: red;}
a.redcss:active {text-decoration: none; color: red;}
a.greencss {color:blue;}
a.greencss:link {text-decoration: none; color:green;}
a.greencss:visited {text-decoration: none; color: green;}
a.greencss:hover {text-decoration: underline; color: green;}
a.greencss:active {text-decoration: none; color: green;}
View RESULT
ie <a> and write the css based on your requirements.for example : I have a 2 links Link1 and link2 link 1 to be red color and link2 to be green color , So i have declare 2 css property for the link1 and link 2 (ie redcss and greencss) The full code given below :
Normal HTML code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>css link</title>
</head>
<body>
<a href="http://www.google.com" class="greencss">Google.com</a>
<a href="http://dreamtheweb.com.com" class="redcss">DreamtheWeb.com</a>
</body>
</html>
CSS section
a.redcss {color:red;}
a.redcss:link {text-decoration: none; color: red;}
a.redcss:visited {text-decoration: none; color: red;}
a.redcss:hover {text-decoration: underline; color: red;}
a.redcss:active {text-decoration: none; color: red;}
a.greencss {color:blue;}
a.greencss:link {text-decoration: none; color:green;}
a.greencss:visited {text-decoration: none; color: green;}
a.greencss:hover {text-decoration: underline; color: green;}
a.greencss:active {text-decoration: none; color: green;}
View RESULT
Working with Adobe illustrator for beginners Part2
i hope every one understand my first post , 2nd section i discuss about creating a New illustrator Documents with little effort, Every time you create a new document it become fresh or active documents since it is front of all other documents . For Creating a new Documents you can just click File menu and choose New option, Then you can see different s options for creating document the meaning of each one is discussed below Ref Fig: 
1. Name : Name of your documents. 2. New Documents profiles : You can select a Document profile from list , it contain print,web etc 3.Number of Artboards: It specify numer of artboards that should appear initially when create a new documents. 4. size: This list contain standard dimension ,you can Choose a size from this list. 5. Also you can specify your own dimensions using width and height . 6.units: In this you can specify units you prefer to work in.commonly used units are inches ,picas etc. 7.Bleed :This refer how much a document spills outside the defined print area. Ok ... lets move to the next section
1. Name : Name of your documents. 2. New Documents profiles : You can select a Document profile from list , it contain print,web etc 3.Number of Artboards: It specify numer of artboards that should appear initially when create a new documents. 4. size: This list contain standard dimension ,you can Choose a size from this list. 5. Also you can specify your own dimensions using width and height . 6.units: In this you can specify units you prefer to work in.commonly used units are inches ,picas etc. 7.Bleed :This refer how much a document spills outside the defined print area. Ok ... lets move to the next section
Working with Adobe illustrator for beginners Part1
Adobe illustrator is a essential tool for Web designers, video professionals for design purpose ,Generally Illustrator is used for creating rich graphics contents .You can Download Adobe illustrator Trial from adobe official website. In this section we discuss about very basics concepts of Adobe illustrator . Opening Existing Illustrator To open an existing document we first select File from main menu and select Open command then you can see all illustrator file you already created earlier ,select a file you want to open and click Open Ref Fig
Read Our Next Section 2>>
Stylish pure CSS Menu (Horizontal Menu)
Today iam design pure css model menu .
It is very easy to add to your website with little efforts .
Demo Click here
Installation steps:<div id="header-new1">
<div id="main-nav-holder1" style="padding-top: 20px;">
<a href="#" style="margin-left:0;">Home</a>
<a href="#">products</a>
<a href="#">Dreamtheweb.com</a>
<a href="#">Css scripts</a>
<a href="#">Java Scripts</a>
<a href="#">Templates</a>
<a href="#">wordpress</a>
<a href="#" style="margin-right:0;padding:5px 10px;">FAQ</a>
</div>
</div>
CSS Section :
a
{
color: #92b932;
text-decoration: none;
}
.buttonNew
{
background: -webkit-gradient(
linear, left top, left bottom,
from(#9edc71),
color-stop(0.29, #70c939),
to(#6ac532));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #63b32e;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
text-shadow:
0px 1px 5px rgba(000,000,000,1),
0px 1px 0px rgba(255,255,255,0.2);
font-weight:bold;
-webkit-transition: box-shadow 1s ease-in-out, color 1s ease-in-out;
-moz-transition: box-shadow 1s ease-in-out, color 1s ease-in-out;
-o-transition: box-shadow 1s ease-in-out, color 1s ease-in-out;
transition: box-shadow 1s ease-in-out, color 1s ease-in-out;
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,0.6);
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #f0f0f0;
padding: 5px 11px;
margin: 0 2px;
background:#9edc71;
background: -moz-linear-gradient(
top,
#9edc71 0%,
#70c939 29%,
#6ac532);
}
.buttonNew:hover
{
border: 1px solid rgba(0,0,0,0.2);
text-shadow: #ffffff 0 1px 0;
background: #a8a8a8;
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#a8a8a8));
background: -webkit-linear-gradient(top, #e3e3e3, #a8a8a8);
background: -moz-linear-gradient(top, #e3e3e3, #a8a8a8);
background: -ms-linear-gradient(top, #e3e3e3, #a8a8a8);
background: -o-linear-gradient(top, #e3e3e3, #a8a8a8);
background-image: -ms-linear-gradient(top, #e3e3e3 0%, #a8a8a8 100%);
color: #5a5a5a !important;
}
.buttonNew:active
{
text-shadow: #ffffff 0 1px 0;
border: 1px solid rgba(0,0,0,0.2);
background: #949494;
background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#a8a8a8));
background: -webkit-linear-gradient(top, #d6d6d6, #949494);
background: -moz-linear-gradient(top, #d6d6d6, #949494);
background: -ms-linear-gradient(top, #d6d6d6, #949494);
background: -o-linear-gradient(top, #d6d6d6, #949494);
background-image: -ms-linear-gradient(top, #d6d6d6 0%, #949494 100%);
color: #000000 !important;
}