<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sarfaraz A. Hanfi</title>
	<atom:link href="http://sarfarazhanfi.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://sarfarazhanfi.com</link>
	<description>Meaningful Design for the Common Good</description>
	<lastBuildDate>Fri, 11 May 2012 13:45:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Free Vector Icons</title>
		<link>http://sarfarazhanfi.com/free-vector-icons/</link>
		<comments>http://sarfarazhanfi.com/free-vector-icons/#comments</comments>
		<pubDate>Wed, 24 Aug 2011 13:55:06 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[Icons]]></category>
		<category><![CDATA[132 Icons]]></category>
		<category><![CDATA[Small Icons]]></category>
		<category><![CDATA[Vector Icons]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=727</guid>
		<description><![CDATA[Here are 132 free vector icons for you to play so feel free to use them in any form in you projects or even remix them Download]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2011/08/mega.jpg"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2011/08/mega.jpg" alt="" title="mega" width="473" height="600" class="alignleft size-full wp-image-728" /></a></p>
<p>Here are 132 free vector icons for you to play so feel free to use them in any form in you projects or even remix them</p>
<p><strong><a href="http://www.sarfarazhanfi.com/download/icons00132.eps">Download</a></strong></p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/free-vector-icons/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Colorize list bullets</title>
		<link>http://sarfarazhanfi.com/colorize-list-bullets/</link>
		<comments>http://sarfarazhanfi.com/colorize-list-bullets/#comments</comments>
		<pubDate>Mon, 17 Jan 2011 11:46:31 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[List Style]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=463</guid>
		<description><![CDATA[While styling unordered text lists for my blog I was searching for a way to change the color of the bullets. There is no way to achieve this with the standard list style types if you don’t want to use additional markup. But there’s a solution by only using CSS – and it’s all CSS [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2011/01/made.jpg"><img class="alignnone size-full wp-image-464" title="Colorize list bullets" src="http://www.sarfarazhanfi.com/wp-content/uploads/2011/01/made.jpg" alt="Colorize list bullets" width="600" height="306" /></a><br />
While styling unordered text lists for my blog I was searching for a way to change the color of the bullets. There is no way to achieve this with the standard list style types if you don’t want to use additional markup. But there’s a solution by only using CSS – and it’s all CSS 2.1, so even IE 8 understands that.</p>
<h2>Here is the code we use</h2>
<h3>The HTML: A normal unordered list</h3>
<blockquote><p>
&#8220;
<ul>
<li>Colorize list bullets</li>
<li>Colorize list bullets</li>
<li>Colorize list bullets</li>
<li>Colorize list bullets</li>
</ul>
<p>&#8221;</p>
</blockquote>
<h3>The CSS</h3>
<blockquote><p>li {<br />
list-style:none;<br />
margin-right:40px;<br />
color:#006090;<br />
font:normal 13px/35px Georgia;<br />
}</p>
<p>li:before {<br />
color:#ffcc00;<br />
content:&#8221;•&#8221;;<br />
font-weight: bolder;<br />
padding-right:10px;<br />
font-size:20px;<br />
margin-top:10px;<br />
}</p></blockquote>
<p>The most important thing is the pseudo class :before which you can use to add visual elements without additional markup. Herein i put a bullet with content:“•”;. You can find the bullet on your Mac by pressing option-8 (option-ü on a German keyboard) or by pressing alt+0149 on your PC.<br />
I also made the bullet bold because it might look too unobtrusive otherwise. Add some margin and padding to put the bullet in the right position and you’re done.<br />
A positive side effect is that the new bullets are a little bit smaller, making them look nicer and less obtrusive than the defaults ones.</p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/colorize-list-bullets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Science Of Creativity</title>
		<link>http://sarfarazhanfi.com/the-science-of-creativity/</link>
		<comments>http://sarfarazhanfi.com/the-science-of-creativity/#comments</comments>
		<pubDate>Tue, 28 Dec 2010 21:41:45 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[Creativity]]></category>
		<category><![CDATA[Brainstorming]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Inspiration]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=459</guid>
		<description><![CDATA[Even though I was not creative back then, it does not stop me from wondering, am I really creative? Why I am not like other designers who are a blend of creative juices where ideas flowing in and out as easy as breathing? To tell you frankly, there is actually no reason but a statement [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/12/Science-Of-Creativity.jpg"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/12/Science-Of-Creativity.jpg" alt="" title="Science-Of-Creativity" width="600" height="357" class="alignnone size-full wp-image-460" /></a></p>
<p>Even though I was not creative back then, it does not stop me from wondering, am I really creative? Why I am not like other designers who are a blend of creative juices where ideas flowing in and out as easy as breathing?</p>
<p>To tell you frankly, there is actually no reason but a statement that explains it all. Creative means a quality that you put into any activity not only in website design, but also cooking, dancing, singing, or anything at all. Your attitude and approach you follow is your creative instinct. Creativity should be an untamed river that does not run in a streamline flow and it should not be limited. And there is no doubt to the fact that a creative mind is half mania.</p>
<blockquote><p>&#8220;Every day is an opportunity to be creative – the canvas is your mind, the brushes and colors are your thoughts and feelings, the panorama is your story, the complete picture is a work of art called…&#8221; (Innerspace)</p></blockquote>
<p>Creativity cannot be learned for sure. We are born with creativity within ourselves and one would be utter misinformed if he/she thinks that creativity is something that can be imbibed. This is the major myth that surrounds every individual.</p>
<blockquote><p>&#8220;It is better to create than to be learned, creating is the true essence of life.&#8221; (Barthold Georg Niebuhr)</p></blockquote>
<p>Creativity can never be achieved by imitations, and what is already been introduced. There is nothing ‘right’ and ‘wrong’ in a creative piece of work however It is more than random and lastly, there is no place for logic. It should be part of your everyday life because the more curious you are in your everyday life, the better you get to produce refreshing ideas and products.</p>
<p>Being a critique of your own is the best practice, but somehow it proved to be harmful if you evaluate your work excessively. It will result you losing your initiate direction and eventually everything goes straight into the dump because anything safe is not interesting.</p>
<blockquote><p>&#8220;Creativity is inventing, experimenting, growing, taking risks, breaking rules, making mistakes, and having fun.&#8221; (Mary Lou Cook)</p></blockquote>
<p>The first and the foremost way will be thinking positive. If you already have a pre-conceived notion that you cannot come up with something creative in your design, you are doomed… you won’t be able to. Creativity, in my belief is a product that uses its surroundings and it is your senses and instinct amongst the contributing factors that kick start the creative drive.</p>
<p>Now, its time to focus on web designers because most of the readers of this post would be web designers. Since the topic talks about creativity as a science, there ought to be a well defined process and strategy towards the same. Therefore, the exercises that would help you keep track of your creative instincts and come up with lots of creativity is listed as below:</p>
<ol>
<li>Get Inspiration Offline</li>
<li>Flickr Groups</li>
<li>Experiment with Color</li>
<li>Experiment with Backgrounds</li>
<li>Experiment with Fonts</li>
<li>Improve Your Photoshop Skills</li>
<li>Start on Paper</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/the-science-of-creativity/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>5 Innovative Ideas To Advertise Your Web Site</title>
		<link>http://sarfarazhanfi.com/5-innovative-ideas-to-advertise-your-web-site/</link>
		<comments>http://sarfarazhanfi.com/5-innovative-ideas-to-advertise-your-web-site/#comments</comments>
		<pubDate>Fri, 19 Nov 2010 21:35:14 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Advertise]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Innovative Ideas]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=444</guid>
		<description><![CDATA[Hundreds of millions of people have spent thousands of dollars to create fancy websites to promote various goods, products, and services. But they are very unhappy because they are not generating much traffics and orders. Some have tried various types of internet and website advertising but failed. Are you a failure or success in advertising [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/11/ads.jpg"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/11/ads.jpg" alt="" title="5 Innovative Ideas" width="600" height="300" class="alignnone size-full wp-image-445" /></a>Hundreds of millions of people have spent thousands of dollars to create fancy websites to promote various goods, products, and services.</p>
<p>But they are very unhappy because they are not generating much traffics and orders. Some have tried various types of internet and website advertising but failed. Are you a failure or success in advertising your website online?</p>
<p>Below are 5 innovative web site advertising secrets to help you advertise your website and spark up your sales.</p>
<h3>1- Directory Linking</h3>
<p>Create a directory of web sites on a specific topic. Give people the option of adding the directory to their web site by linking to it. Put your business advertisement at the top of the director&#8217;s home page. This technique will get lots of people to link to your web site and give you free advertising.</p>
<h3>2- Bonus Advertising</h3>
<p>Do you have a product or service that doesn&#8217;t sell good? Offer it as a free bonus for someone else&#8217;s product or service. Get free advertising by placing your web site or business ad on the product or in the product package.</p>
<h3>3- Auto-responder Trade</h3>
<p>Trade auto-responder ads with other businesses. If both of you send out information with auto- responders just exchange a small classified ad to put at the bottom or top of each other&#8217;s auto-responder message.</p>
<h3>4-Tip Line</h3>
<p>Start a free tip line. Offer a free daily, weekly, or monthly tip recorded on your voice mail. The tips should be related to your business. Include your ad for your web site or business at the beginning or end of your message.</p>
<h3>5- Content Swap</h5>
<p>Exchange content with other web sites and e-zines. You could trade articles, top ten lists, etc. Both parties could include a resource box at the end of the content.</p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/5-innovative-ideas-to-advertise-your-web-site/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>10 Innovative Web Traffic Boosting Ideas</title>
		<link>http://sarfarazhanfi.com/10-innovative-web-traffic-boosting-ideas/</link>
		<comments>http://sarfarazhanfi.com/10-innovative-web-traffic-boosting-ideas/#comments</comments>
		<pubDate>Wed, 17 Nov 2010 22:53:26 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[featured]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=437</guid>
		<description><![CDATA[Do you have a dead website that nobody knows about? Well the truth is that it is never easy to get more people to visit your site unless you actually do something. There are ways to generate the desired traffic. It takes being creative and innovative. Here are 10 free and innovative ideas that will [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/11/INTERNET-for-web1.jpg"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/11/INTERNET-for-web1.jpg" alt="" title="Web Traffic" width="600" height="300" class="alignnone size-full wp-image-442" /></a><br />
Do you have a dead website that nobody knows about?</p>
<p>Well the truth is that it is never easy to get more people to visit your site unless you actually do something. There are ways to generate the desired traffic. It takes being creative and innovative.  Here are 10 free and innovative ideas that will help.</p>
<p>   1. Join social bookmarking sites such as Delicious, Digg, and StumbleUpon. Share your favorite sites with other people sharing the same interests. Include your site. The social networking sites are like a specific search engine for numerous people. Add the bookmarks to your blog site to increase your internet traffic. Add fascinating links to relevant goods that the users are searching for. The more fascinating links you have bookmarked the larger your following will become.</p>
<p>   2. Participate in other peoples blogs… like this one! Comment on several sites that are both interesting to you and likely to have the same target audience. Add your URL with each post comment that you make. Take into account that you are commenting on articles that someone spent a lot of time to publish, so remain focused on the topic since you do not want your posting to be canceled or considered to be spammy. You want to appear to be an expert and someone others can trust.</p>
<p>   3. Add widgets, themes, and extensions to your weblog. Make your website as interesting as possible. Likewise, be sure that your internet site is user friendly and exciting. Users want to see and experience new things, give it to them with your website or blog. In order to add custom plugins, widgets and other things to your weblog, you’ll likely need to have wordpress installed on your own domain name. You can find inexpensive domain names and quality hosting (with WordPress built right in) at http://1295domains.com</p>
<p>   4. Use forum signatures for promotion of your internet site with a live link. Use subjects with great info and link them back to your sties. The more details you provide the readers the more they will trust in you for your new details. They will return repeatedly to read what you are posting. Just be sure that you do not make posts on the forums simply for the sake of posting. Be helpful and show your expertise. When people are interested in you and your comments, then they’re more likely to be interested in your web site or blog.</p>
<p>   5. Use photo sharing sites like Flickr. Social photo sharing drives people to your site. Be sure to add good tags to the pictures so that they attract the members on the site and in search engines alike. Write a post in your blog and add the link to the Flickr site. The two sites will work in unison to draw visitors to your website.</p>
<p>   6. Ask friends and clients that know about your business to help spread the word about your site. They can use their personal weblogs, internet sites, and contacts to improve your website traffic. Don’t forget to ask them to Facebook share your posts and tweet about your blog on Twitter.</p>
<p>   7. Specific sites within your industry often add links to people’s blogs who write reviews about their products or services. If you’re impressed about a business, software, or someehing else, then tell people about it.</p>
<p>   8. Increase your exposure by adding podcasts to your internet site. Include audio and video that is interesting and intriguing. People love to watch video, just look at the popularity of sites like Youtube! Adding YouTube syndicated videos to your blog is a great way to build up a following. For people who find you on YouTube, be sure to annotate your web site address so that they can visit your blog.</p>
<p>   9. Submit your blog feed and web site to directories. Directories are typically considered to be authority sites by Google. Once your link is in a directory, then your site is extremely likely to get spidered and listed in Google.</p>
<p>  10. Submit articles to article directories such as Go Articles and EzineArticles. Be sure to utilize the resource box to drive traffic to your website and establish strong backlinks to your internet site; for the Search Engines.</p>
<p>You should remember that it’s not all about the traffic, but truly about offering what the readers want. When you reach out to them with facts, products and services you are providing a valuable purpose.</p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/10-innovative-web-traffic-boosting-ideas/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>10 tips for web typography</title>
		<link>http://sarfarazhanfi.com/10-tips-for-web-typography/</link>
		<comments>http://sarfarazhanfi.com/10-tips-for-web-typography/#comments</comments>
		<pubDate>Thu, 21 Oct 2010 23:03:40 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[Typography]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Tips]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=428</guid>
		<description><![CDATA[Each operating systems has their own section of fonts. Out of all the popular operating systems, most of them have a variety of the same fonts.]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/tentips.jpg"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/tentips.jpg" alt="" title="tentips" width="600" height="300" class="alignnone size-full wp-image-429" /></a></p>
<p>   1. Use quote and dashes; not primes and hyphens<br />
   2. Don’t rely on a browser’s default margins and indentations<br />
   3. Design to a scale<br />
   4. Limit you number of typefaces and font sizes<br />
   5. Ensure line lengths are comfortable for reading on screen<br />
   6. Be generous with leading<br />
   7. Embrace web fonts such as Arial that are well designed for the job<br />
   8. Ensure you design won’t break when users increase the text size<br />
   9. Specify a print style sheet to ensure your website prints out well<br />
  10. Prepare for print-resolution screens</p>
<p>Arial is a good screen font. Rubbish in print, but good on screen. When developing your site you want to decide what font you are going to use before you start designing your layout. Each font will render differently, depending on your operating system and your web browser. You web typography will have a different effect on each area of your site. There are a few things to be aware of when deciding which font to use. There are a hand full of fonts are the safe typography for development.</p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/10-tips-for-web-typography/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Color Theory Reference For Designers</title>
		<link>http://sarfarazhanfi.com/color-theory-reference-for-designers/</link>
		<comments>http://sarfarazhanfi.com/color-theory-reference-for-designers/#comments</comments>
		<pubDate>Wed, 06 Oct 2010 22:00:31 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[Designing]]></category>
		<category><![CDATA[Colors]]></category>
		<category><![CDATA[featured]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=420</guid>
		<description><![CDATA[What is Color Theory: I hope you know about Color Theory. Color theory is a body of practical guidance to the visual impacts of specific color combination and how to mix colors. Its a theory of visual arts and its principles first found in the books of of Leone Battista Alberti (c.1435) and the notebooks [...]]]></description>
			<content:encoded><![CDATA[<h4>What is Color Theory:</h4>
<p>I hope you know about Color Theory. Color theory is a body of practical guidance to the visual impacts of specific color combination and how to mix colors. Its a theory of visual arts and its principles first found in the books of of Leone Battista Alberti (c.1435) and the notebooks of Leonardo da Vinci (c.1490). It developed as an independent artistic tradition with only superficial reference to colorimetric and vision science.</p>
<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/colors-wheels.gif"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/colors-wheels.gif" alt="" title="colors-wheels" width="615" height="472" class="alignnone size-full wp-image-421" /></a></p>
<h4>Designers or Web Designers</h4>
<p>For designers in general and specifically graphic designers or web designers, there is a lot to keep in mind while you creating design, graphic design or web design. Some times one feel it’s hard enough to not forget all the theories of design / graphic design, web design best practices, and even Photoshop keyboard shortcuts.</p>
<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/rgb.gif"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/rgb.gif" alt="" title="rgb" width="615" height="339" class="alignnone size-full wp-image-422" /></a><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/ckyk.gif"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/ckyk.gif" alt="" title="ckyk" width="615" height="339" class="alignnone size-full wp-image-423" /></a></p>
<p>That solution to create the info graphics for all of the basics of color theory contained in one place. During meetings, phone calls, or any other sort of client interaction, you can reference this poster if you need to – either for your own benefit, or to point something out to your client.</p>
<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/meanings.gif"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/10/meanings.gif" alt="" title="meanings" width="615" height="272" class="alignnone size-full wp-image-424" /></a></p>
<p>there are almost endless resources online to help you find that perfect color combination</p>
<p><a href="http://kuler.adobe.com">http://kuler.adobe.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/color-theory-reference-for-designers/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Transparent Borders and Shadow with background-clip</title>
		<link>http://sarfarazhanfi.com/transparent-borders-and-shadow-with-background-clip/</link>
		<comments>http://sarfarazhanfi.com/transparent-borders-and-shadow-with-background-clip/#comments</comments>
		<pubDate>Sun, 26 Sep 2010 00:00:46 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[CSS]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=414</guid>
		<description><![CDATA[However, setting a transparent border on an element will reveal the elements own background underneath the border.]]></description>
			<content:encoded><![CDATA[<p>Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat. However, setting a transparent border on an element will reveal the elements own background underneath the border.</p>
<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/09/transparent.jpg"><img src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/09/transparent.jpg" alt="" title="transparent" width="610" height="372" class="alignnone size-full wp-image-415" /></a></p>
<p>Fortunately there is a CSS3 property to save us! It’s called background-clip  and it’s used specifically to specify which portion of the box model should be utilized to display the background. It does what it sounds like it does, it cuts off the background at the specified portion of the box. There are three values it can have, and vendor prefixes do get involved. Here are the three settings it could have. You wouldn’t use them all at once, this is for convenience of displaying only:</p>
<blockquote><p>
#lightbox {</p>
<p>	background: #fff;<br />
	border: 15px solid rgba(0, 0, 0, 0.3);<br />
	-moz-border-radius:10px;<br />
	-moz-box-shadow: 0 0 1em #fff15b;<br />
	-webkit-box-shadow: 0 0 1em #fff15b;<br />
	box-shadow: 0 0 1em gold;<br />
	-moz-background-clip: border;     /* Firefox 3.6 */<br />
	-webkit-background-clip: border;  /* Safari 4? Chrome 6? */<br />
	background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */<br />
	-moz-background-clip: padding;     /* Firefox 3.6 */<br />
	-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */<br />
	background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */<br />
	-moz-background-clip: content;     /* Firefox 3.6 */<br />
	-webkit-background-clip: content;  /* Safari 4? Chrome 6? */<br />
	background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */<br />
}</p></blockquote>
<p>So I’m sure you see where I’m going here… if we set the background-clip to the padding-box, the white background will end before the border and the transparency will lay over other content acheiving the look we are going for!</p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/transparent-borders-and-shadow-with-background-clip/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Corporate Brochure Design</title>
		<link>http://sarfarazhanfi.com/corporate-brochure-design/</link>
		<comments>http://sarfarazhanfi.com/corporate-brochure-design/#comments</comments>
		<pubDate>Sat, 18 Sep 2010 23:51:55 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[Designing]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=360</guid>
		<description><![CDATA[A while ago I was contacted through my website by the Managing Director of a software company called GoodCore. GoodCore is a company that produces corporate profile. After an initial meeting, and providing quotes for various elements I was given the project to design the new corporate brochure. The Managing Director briefed me in person [...]]]></description>
			<content:encoded><![CDATA[<p>A while ago I was contacted  through my website by the Managing Director of a software company called GoodCore. GoodCore is a company that produces corporate profile. After an initial meeting, and providing quotes for various elements I was given the project to design the new corporate brochure.</p>
<p>The Managing Director briefed me in person and I was pleased to find he had also collected samples of the corporate brochure designs of his competitors and told me what he liked and disliked about each of them. This is incredibly helpful as it gives you a real visual “feel” of what the company is looking for.</p>
<p>I started by brainstorming with mind maps and then sketching ideas, I worked through the ideas that I thought were best and started working these up on the computer.</p>
<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/09/front-back.jpg"><img class="alignnone size-full wp-image-361" title="Corporate Brochure Title Page" src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/09/front-back.jpg" alt="" width="610" height="405" /></a></p>
<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/09/innerpage.jpg"><img class="alignnone size-full wp-image-365" title="inner pages" src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/09/innerpage.jpg" alt="" width="610" height="311" /></a></p>
<p><a href="http://www.sarfarazhanfi.com/wp-content/uploads/2010/09/innerpage-2.jpg"><img class="alignnone size-full wp-image-366" title="inner pages" src="http://www.sarfarazhanfi.com/wp-content/uploads/2010/09/innerpage-2.jpg" alt="" width="610" height="311" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/corporate-brochure-design/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Easy CSS Cross Browser Opacity</title>
		<link>http://sarfarazhanfi.com/easy-css-cross-browser-opacity/</link>
		<comments>http://sarfarazhanfi.com/easy-css-cross-browser-opacity/#comments</comments>
		<pubDate>Mon, 30 Aug 2010 21:49:00 +0000</pubDate>
		<dc:creator>Sarfaraz</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Cross Browser]]></category>
		<category><![CDATA[featured]]></category>
		<category><![CDATA[Opacity]]></category>

		<guid isPermaLink="false">http://www.sarfarazhanfi.com/?p=307</guid>
		<description><![CDATA[Due to the way different browsers have implemented transparency, there are three different CSS properties that can affect the transparency of an element:]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;ve ever found yourself in the position of needing to place a semi-transparent image or layer on a web page, you&#8217;ve probably ended up reading various arcane methods involving 24-bit PNG graphics and proprietary IE AlphaImageLoader expressions. Luckily, there is an easier way; albeit at the expense of valid CSS.<br />
Browser-specific properties</p>
<p>Due to the way different browsers have implemented transparency, there are three different CSS properties that can affect the transparency of an element:</p>
<p>.transparent_class {<br />
  /* IE 8 */<br />
   background:#000;<br />
  -ms-filter: &#8220;progid:DXImageTransform.Microsoft.Alpha(Opacity=50)&#8221;;</p>
<p>  /* IE 5-7 */</p>
<p>  filter: alpha(opacity=50);</p>
<p>  /* Netscape */<br />
  -moz-opacity: 0.5;</p>
<p>  /* Safari 1.x */<br />
  -khtml-opacity: 0.5;</p>
<p>  /* Good browsers */<br />
  opacity: 0.5;<br />
}</p>
]]></content:encoded>
			<wfw:commentRss>http://sarfarazhanfi.com/easy-css-cross-browser-opacity/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

