My First Web Layout in Photoshop

Photoshop is undoubtedly an authority and unbeatable piece of software so far  to create all sorts of layouts, drawings, digital art and more. I would rather say, you are limited by your own imagination when it comes to creating the stuff using this great software out there.

I have always been interested in creating web layouts using photoshop but unfortunately have never been able to give it time because of busyness in various things. Web design? well, it needs practice, but whenever I start off with it, I step back soon  because of less time or giving more time to the research related to web development trends and technologies, something what I do primarily. You got it right, looks like my fault for not managing time for that.

Today, however, I managed some time for the photoshop, started off creating a web layout, and guess what I created my very first web layout in about 2+ hours. As far as I am concerned, it looks great to me considering that this is my first layout. I also do believe that I do possess the aesthetic sense after going through a lot of web layouts while developing a number of websites.

I would love to have feedback and comments from experienced designers out there which can help me spot where I could have been better in that particular layout and where do they rank it considering my first layout.

This is where you can download and preview my full web layout.

Creating Advanced Calculator With 4 Lines of Code

Here I share with you how to create a full-blown advanced calculator with just 4 lines of code in simple editor like  notepad. Interesting han? Sure it is.

This is actually part of many scripts I had created way back in 2002/2003 using VBScript to automate various Windows tasks (I wasn’t in the web development field by the time ;- ) . Today, I came across this piece of script on my computer and though of sharing with you.

Well, there is nothing really fancy, I have put the MSScript.ocx active-x control to use. It’s eval function can evaluate most complex math expressions easily. So here is how to create the calculator:

1.  Open Notepad and jot down the following 4 lines of code in it:

Set SC = CreateObject("ScriptControl")
SC.Language = "VBScript"

Val = InputBox("Enter simple or advanced expression to evaluate." & vbCrLf & vbCrLf & "Example:" & vbCrLf & vbCrLf & "(5+5)/2" & vbCrLf & vbCrLf & "or" & vbCrLf & vbCrLf & "Log(99)/2*25+3-(10^2 Mod 5)-Sin(60)+Tan(90)+2")

If Trim (Val) <> "" Then MsgBox "Answer =  " & SC.Eval(Val),,"Result"

2. Now save the file as calculator.vbs by selecting All Files from Save as type combo box. Note that vbs extension in the file name to denote that this file is vbscript and is to be run by Windows Scripting Host (wscript.exe).

3. Double click the saved file and there you are.

Have fun 😉

CSS: Attribute Selectors

In CSS, we are mostly accustomed to targeting elements based on either IDs or Classes. Another way what is know is Attribute Selectors can also be used for the same purpose. They turn out to be extremely handy in some situations too.  In fact it is worth having a know about them because they add a lot to your web design or development arsenal.

.

.

.

Consider this html markup:

<a href="www.example.com" rel="link" id="myid" class="myclass">I'm a link !!</a>

Normally, you would style the link like this using its id or class like this:

a.myclass
{
  background-color:#ff0000;
}

 /* or */

a#myid
{
  background-color:#ff0000;
}

However, you can style that link using its “rel” attribute too using this attribute selector:

a[rel="link"]
{
  background-color:#ff0000;
}

There is a lot more to attribute selectors discussed below with different situations.

Attributes With Exact Value

In the above example, we targeted hyperlink having exact value “link” for its “rel” attribute. Now consider following html markup:

<a href="www.example.com">I'm a link !!</a>
<a href="www.secondexample.com">I'm a link !!</a>
<a href="www.thirdexample.com">I'm a link !!</a>

Suppose, you wanted to style each of the above link differently, you can do so by specifying exact value for href attribute:

a[href="www.example.com"]
{
  background-color:#ff0000;
}

a[href="www.secondexample.com"]
{
  background-color:#00ff00;
}

a[href="www.thirdexample.com"]
{
  background-color:#0000ff;
}

Further, you can even use that to style form elements like this:

input[type=text]
{
  background-color:#0000ff;
}

input[type=checkbox]
{
  background-color:#0000ff;
}

input[type=radio]
{
  background-color:#0000ff;
}

Attributes Beginning With Certain Value

Sample html markup:

<a href="sample-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “^=” which targets element attribute beginning with specified value:

a[href^="sample"]
{
  background-color:#0000ff;
}

Attributes Ending With Certain Value

Sample html markup:

<a href="sample-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “$=” which targets element attribute ending with specified value:

a[href$=".html"]
{
  background-color:#0000ff;
}

Attributes Containing Certain Value

Sample html markup:

<a href="sample-cool-page.html">I'm a link !!</a>

To style the link, we use this attribute selector using “*=” which targets element attribute containing a certain value at any place in it.

a[href*="cool"]
{
  background-color:#0000ff;
}

Attributes Containing Spaces

Sample html markup:

<h1 rel="lorem ipsum">I'm a heading !!</h1

To style the link, we use this attribute selector using “~=” which targets element attribute containing a value separated by space.

h1[rel~="lorem"]
{
  background-color:#0000ff;
}

Attributes Containing Dashes

Sample html markup:

<h1 rel="lorem-ipsum-dolor-sit-amet">I'm a heading !!</h1

To style the link, we use this attribute selector using “|=” which targets element attribute containing a value separated by dash.

h1[rel|="lorem"]
{
  background-color:#0000ff;
}

Matching Multiple Attributes

It’s interesting to know that you can also use multiple attribute selectors in the same selector which matches all specified. Consider this html markup:

<h1 rel="heading" title="Hello There">I'm a heading !!</h1

h1[rel=heading][title*=Hello]
{
  background-color:#0000ff;
}

Matching Specific Attributes

If you wanted to style all links that have “title” attribute set, you do so this way:

a[title]
{
  background-color:#0000ff;
}

Browser Support Information

These attribute selector can work in all modern browsers. They will work in IE7 too but not IE6.