My Burmese Blog » Web Design http://www.htootayzar.com/myblog Burmese Blog Fri, 30 Jul 2010 13:50:09 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Simple CSS Trick for Large Background http://www.htootayzar.com/myblog/2009/12/simple-css-trick-for-large-background/ http://www.htootayzar.com/myblog/2009/12/simple-css-trick-for-large-background/#comments Thu, 17 Dec 2009 13:48:58 +0000 Htoo Tay Zar http://www.htootayzar.com/myblog/?p=2285 CSS Layer on Htoo Tay Zar.com

ကြ်န္ေတာ့္ ဘေလာ့ဂ္ကို တိုက္ရိုက္မ၀င္ဘဲ htootayzar.com ကေန ၀င္တဲ့အခါ front page တစ္ခုကို အားလံုးၿမင္ဘူးၾကမယ္ ထင္ပါတယ္။ အမွန္ေတာ့ အဲဒီ page က ဒိုမိန္း၀ယ္ကတည္းက ဘာလုပ္ရမွန္းမသိလို႔ ထည့္ထားတာပါ။ ကြ်န္ေတာ္က ဆိုဒ္ကို ၀င္လိုက္တာနဲ႔ ဘေလာ့ဂ္တက္လာတာမ်ိဳးထက္ အၿခား ဆိုဒ္တစ္ခုလိုၿဖစ္ခ်င္တာေနာက္ လုပ္ခဲ့ဘူးတဲ့ အလုပ္ေတြလဲ ထည့္ခ်င္ေသးတာ ေနာက္ page rank အတြက္လဲ စဥ္းစားၿပီး ဘာမွမလုပ္ပဲ index ကိုခ်န္ထားခဲ့တာပါ။ ၿပင္မယ္ ၿပင္မယ္နဲ႔ မအားတာရယ္ လုပ္ရင္လဲ အၿပည့္အစံုၿဖစ္မွ တင္ခ်င္တာနဲ႔ အခု ႏွစ္ခ်ီၾကာေနၿပီ မၿပင္ၿဖစ္ေသးတာပါ။ ဒီေန႔ကေတာ့ အဲဒီ front page ကို ဘယ္လိုလုပ္ထားလဲဆိုတာ trick တခ်ိဳ႕ ေရးမလို႔ပါ။

အဲဒီ front page ကို photoshop ထဲမွာပဲ လုပ္ထားပါတယ္။ အၿခားထည့္စရာ ေဒတာ မရွိေသးလို႔ full page (cross resolutions) ၿဖစ္ေအာင္ လုပ္ထားပါတယ္။ အခု ကြ်န္ေတာ္ေၿပာမွာက photoshop မွာ ဘယ္လိုလုပ္လဲ ေၿပာမွာ မဟုတ္ပါဘူး။ CSS trick လုပ္ထားတာေလးေၿပာမလို႔ပါ။

အဲဒီ page လုပ္ဖို႔ စဥ္းစားေတာ့ ပထမဆံုး စဥ္းစားရတာက loading time ပါ ႏိုင္ငံၿခားမွာ အဲဒီေလာက္က ဘာမွ ထည့္စဥ္းစားဖို႔ မလိုေပမယ့္ ၿပည္တြင္းက ၾကည့္ဖုိ႔ ၾကေတာ့ ကြ်န္ေတာ့္ရဲ႕ widescreen wallpaper size background ၾကီးက ကြန္နက္ရွင္က်ေနတဲ့ အခါ ေတာ္ေတာ္ထိုင္ေစာင့္ရလိ့မ္မယ္။ အဲဒါကို ထည့္တြက္ရင္းနဲ႔ CSS နဲ႔ trick တစ္ခု လုပ္လို႔ရတယ္ဆိုတာ စဥ္းစားမိတာနဲ႔ trick ထည့္လိုက္ပါတယ္။

သံုးထားတာက background ပံု ေနာက္ခံပံုရယ္ ေနာက္ loading တက္ေနသလိုၿပေပးတဲ့ animated gif ဖိုင္တစ္ခုပါ။ loading တက္ေနတဲ့ animation gif ဖိုင္ကို လိုခ်င္တဲ့ဒီဇိုင္းနဲ႔ ajaxload.info မွာ ယူႏိုင္ပါတယ္။ ကြ်န္ေတာ္ အဲဒီ ဆိုဒ္က ပံုတစ္ခုကို ယူၿပီး body background မွာ ၿမဳပ္ထားလိုက္တယ္။

body {
background: #000 url(greybox/indicator.gif) no-repeat center;
font-family: Georgia, “Times New Roman”, Times, serif;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}

.background {
background: transparent url(homenew.jpg) no-repeat top center;
position: abosolute;
height: 100%;

}

ေနာက္ အဲဒီ page မွာ ကြ်န္ေတာ္သံုးထားတဲ့ စာလံုးအေရာင္က ေတြ႔ခဲ့တဲ့ အတိုင္းပါပဲ။ အနက္ေရာင္သံုးထားတယ္ အဲဒါေၾကာင့္ body background အေရာင္ကို အနက္ေရာင္သံုးထားလိုက္ပါတယ္။ ဘာလို႔လဲဆိုေတာ့ ပထမဆံုး ေနာက္ခံ image wallpaper မတက္ေသးတဲ့ အခ်ိန္မွာ စာလံုးေတြက ေနာက္ခံ အနက္ေရာင္နဲ႔ ေရာၿပီး ေပ်ာက္ေနေအာင္လို႔ပါ။ အဲဒီ အခ်ိန္မွာပဲ file size အရမ္းေသးတဲ့ loading.gif ကေတာ့ center no-repeat နဲ႔ တက္ေနပါလိမ့္မယ္။ ဆိုေတာ့ ဆိုဒ္က ajax လိုလို flash လိုလို loading တက္ေနတယ္ေပါ့ =D ခဏေစာင့္ပါဆိုတဲ့ သေဘာမ်ိဳး visitor ကို ၿပေပးထားမယ့္သေဘာေပါ့။

အဲဒီခ်ိန္မွာ cursor ကို ေလွ်ာက္ေရႊ႕ၾကည့္ရင္ေတာ့ အဲဒီ link ေတြ hover လုပ္တဲ့ အခါေတာ့ ၿမင္ေနရလိမ့္မယ္။ ေနာက္ခံပံု အၾကီးတက္လာတဲ့ အခါက်ေတာ့မွ ယူဇာကို ဆိုဒ္ကလံုး၀ တက္သြားၿပီ ဆိုတဲ့ သေဘာမ်ိဳးၿဖစ္သြားတာေပါ့။ ဒီအတိုင္း အဲဒီ trick မထည့္ပဲထားလိုက္ရင္ ယူဇာ စက္မွာ ကြန္နက္ရွင္ေႏွးေနတဲ့ အခ်ိန္ဆို ဆိုဒ္က ဘာမွမတက္ဘူး အနက္ေရာင္ၾကီးပဲ တက္တယ္ဆိုၿပီး ၿပန္မထြက္သြားေအာင္ စြဲေဆာင္ထားတဲ့ သေဘာပါ။ ဒီသေဘာတရား အတိုင္းလုိက္ၿပီး double background (.png files) ေတြနဲ႔ တြဲၿပီး ဒီဇိုင္းထည့္လို႔ရပါမယ္။ ေနာက္ javascript framework တစ္ခုခုသံုးၿပီး animated background မ်ိဳးေတြ လုပ္ယူလို႔ ရႏိုင္တာေပါ့။ CSS ထည့္ထားတာ အေသးစိတ္ကိုေတာ့ home page view source မွာ ၾကည့္ၾကည့္ပါ ကြ်န္ေတာ္ ၿပင္ရမွာ ပ်င္းလို႔ ဖိုင္ေတာင္ ခြဲထည့္မထားပါဘူး :D

စကားမစပ္ ေၿပာတာပါေနာက္ဆို ကြ်န္ေတာ္ ဆိုဒ္တစ္ခုလံုး ဒီ blog page တင္မကပဲ ေၿပာင္းဖုိ႔ အစီအစဥ္ရွိပါတယ္။ အရင္ကထဲက ေၿပာင္းမယ္ ေၿပာင္းမယ္နဲ႔ လုပ္ထားတာ theme ေတြ ၄ ခုေလာက္ရွိေနၿပီ တစ္ခုလုပ္လုိက္ ေနာက္ထပ္ ဒီဇိုင္းတစ္ခုၾကိဳက္ၿပန္တာနဲ႔ မေၿပာင္းၿဖစ္တာပါ။ အခုထိကေတာ့ banner ခဏတိုင္းလဲ ရတာပဲ ၾကိဳက္တုန္းပါပဲ =D အဆင္ေၿပပါေစ…

Related Posts

]]> http://www.htootayzar.com/myblog/2009/12/simple-css-trick-for-large-background/feed/ 5 Adobe Browser Lab http://www.htootayzar.com/myblog/2009/11/adobe-browser-lab/ http://www.htootayzar.com/myblog/2009/11/adobe-browser-lab/#comments Mon, 16 Nov 2009 11:24:43 +0000 Htoo Tay Zar http://www.htootayzar.com/myblog/?p=2201 Adobe Browsers Lab

Adobe Browser Lab ဆိုတာက Adobe ကေန host လုပ္ထားတဲ့ web based flash application တစ္ခုပါ။ Web Designer, Developer ေတြ သူတို႔ ေရးထားတဲ့ ဆိုဒ္ကို OS ေတြ Browser ေတြမွာ ဘယ္လို render လုပ္တယ္ဆိုတာ ၾကည့္ဖုိ႔ လုပ္ထားတာၿဖစ္ပါတယ္။

Browser Lab က ဆိုဒ္တစ္ခုလံုး flash နဲ႔လုပ္ထားတာၿဖစ္ၿပီး အထဲမွာ address box မွာ ကိုယ္ၾကည့္ခ်င္တဲ့ ဆိုဒ္ link ထည့္ OS နဲ႔ browser အမ်ိဳးအစားေရြးၿပီး ၾကည့္လုိ႔ရပါတယ္။ အထဲမွာ Internet Explorer 6, 7, 8 နဲ႔ Firefox, Safari တို႔ပါတာေတြ႔ရပါတယ္။ ေနာက္အၿခား onion skin, rulers လိုမ်ိဳးေတြပါပါလို႔ ပိုအဆင္ေၿပပါတယ္။ Dreamweaver CS 4 အတြက္ extension download ေပးထားတာလဲ ေတြ႔ရပါတယ္။ အဲဒါနဲ႔သံုးမယ္ဆိုရင္ေတာ့ local ကဖိုင္ကိုပါ ၾကည့္လုိ႔ရေအာင္ လုပ္ေပးပါတယ္။

Related Posts

]]> http://www.htootayzar.com/myblog/2009/11/adobe-browser-lab/feed/ 1 Icon Finder http://www.htootayzar.com/myblog/2009/05/icon-finder/ http://www.htootayzar.com/myblog/2009/05/icon-finder/#comments Wed, 27 May 2009 02:23:39 +0000 Htoo Tay Zar http://www.htootayzar.com/myblog/?p=1742 Icon Finder dot Net Logo

Icon Finder ဆိုုတာက Free Icon Search Engine တစ္ခုုပါ။ ရိုုးရွင္းတဲ့ ဒီဇိုုင္းနဲ႔ ရွာလိုုက္ရင္ .png .ico ဖိုုင္မ်ိဳးေတြ ရွာေပးပါတယ္။ သူမွာ လိုုခ်င္တဲ့ color, size ေတြနဲ႔ ရွာလိုု႔ရပါတယ္။ ေနာက္ icon ေတြ အတြက္ tag ေတြကိုု ကိုုယ္တိုုင္ ထည့္လဲရပါတယ္။ Icon ေတာ္ေတာ္မ်ားမ်ားကိုု ရွာေပးႏိုုင္တယ္။ Personal sites ေတြမွာ free သံုုးႏိုုင္ၿပီး Commercial site ေတြ အတြက္ေတာ့ icon designer ကိုု ဆက္သြယ္ဖိုု႔ လိုုပါမယ္။ auto complete မ်ိဳးေတြ grid view, ajax ေတြ ထည့္ထားတာကလဲ ရွာရတာ အေတာ္ အဆင္ေၿပပါတယ္။

Icon Finder Snap Shot

Related Posts

]]> http://www.htootayzar.com/myblog/2009/05/icon-finder/feed/ 2 4 Free Useful WordPress Framework Themes http://www.htootayzar.com/myblog/2009/01/4-free-useful-wordpress-framework-themes/ http://www.htootayzar.com/myblog/2009/01/4-free-useful-wordpress-framework-themes/#comments Wed, 14 Jan 2009 15:09:32 +0000 Htoo Tay Zar http://www.htootayzar.com/myblog/?p=1194 wp-framework

WordPress Themes Framework ဆိုုတာက တကယ္ေတာ့ ဒီဇိုုင္းပါတဲ့ WP Themes ေတြ မဟုုတ္ပါဘူး.. ဒါက ဒီဇိုုင္နာေတြ အတြက္ အလြယ္ တကူ design လုုပ္လိုု႔ ရေအာင္ ဖန္တီးထားတဲ့ plain themes ေတြပါ။ သူရဲ႕ တည္ေဆာက္ထားပံုုကိုု ၾကည့္ၿပီး ကိုုယ္လိုုခ်င္တဲ့ ဒီဇိုုင္းကိုု စိတ္ၾကိဳက္ၿပင္ ယူႏိုုင္ပါတယ္။ သူကေတာ့ အေၿခခံ html tag ေတြနဲ႔ အၿခား ဘာမွမပါပါဘူး။

ဒီလိုု Framework နဲ႔ လုုပ္ရတာက အားလံုုးကိုု အစကေန စလုုပ္တာထက္ အခ်ိန္ကုုန္ပိုု သက္သာပါတယ္။ ေနာက္ plug in, sidebar ေတြ အဆင္ေၿပေၿပ ထည့္လိုု႔ ရႏိုုင္ပါတယ္။ တစ္ခုုပဲ အဲဒီ framework က default CSS, read me ဖိုုင္ ေတြေတာ့ မလုုပ္ခင္ ေသေသခ်ာခ်ာ ဖတ္ရပါတယ္။ ကြ်န္ေတာ္ေတာ့ framework theme နဲ႔ လုုပ္တာေတာင္ လည္ေနတုုန္းပဲ ဒီ ၂၀၀၉ ထဲမွာ ကိုုယ္ပိုုင္ theme ေၿပာင္းၿဖစ္မွာပါ။ အခုု ကြ်န္ေတာ္လဲ ေနာက္ လင့္ရွာရလြယ္ေအာင္ ပိုု႔စ္တင္ထားတယ္.. WordPress framework theme ေတြပါ။

WP Framework Theme

wp-framework

WP Framework is a “blank” WordPress theme that empowers you to create awesome WordPress Themes in little to no time!

WP Framework Theme by WP Framework
Download
Demo

WordPress Sandbox Theme

Sandbox Theme

The Sandbox is a powerful tool available for WordPress theme designers and developers. The Sandbox can be easily designed just with CSS, so beginners will feel comfortable not bothering with PHP.

Sandbox Theme by Plaintxt.Org
Download
Demo

Whiteboard Framework

whiteboard-logo

It is designed to speed up the process of designing and coding a Wordpress theme by eliminating the time spent on Wordpress’ back-end PHP that is used in every theme.

Whiteboard Theme by Plain Beta
Download

Starkers WordPress Theme

Starkers

For those looking for a beautifully-designed free theme, I’m afraid you’ve come to the wrong place, but this will hopefully assist those of you who make your own Wordpress themes regularly. ~ by Elliot Jay Stocks.

Starkers Theme by Elliot Jay Stocks
Download

Related Posts

]]> http://www.htootayzar.com/myblog/2009/01/4-free-useful-wordpress-framework-themes/feed/ 4 Interview with Nick La from WDW http://www.htootayzar.com/myblog/2008/12/interview-with-nick-la-from-wdw/ http://www.htootayzar.com/myblog/2008/12/interview-with-nick-la-from-wdw/#comments Sat, 06 Dec 2008 10:40:20 +0000 Htoo Tay Zar http://www.htootayzar.com/myblog/?p=1014

မေန႔က Nick La နဲ႔ interview လုပ္ထားတဲ့ ပို႔စ္ တစ္ခုေတြ႔လို႔ ဘေလာ့ဂ္မွာ ၿပန္တင္လိုက္ပါတယ္။ Nick La ဆိုသူကေတာ့ Web Designer Wall, N Design Studio, Best Web Gallery တိ္ု႔ရဲ႔ ဖန္တီးထားတဲ့ ဒီဇိုင္းနာ တစ္ေယာက္ ၿဖစ္ပါတယ္။ သူဘေလာ့ဂ္ေတြမွာ web design, web trends, illustrator စတဲ့ ဒီဇိုင္း အေၾကာင္းအရာေတြကို ဖတ္ရႈႏိုင္ပါတယ္။ ေနာက္ Best Web Gallery မွာေတာ့ အၿခား css ဆိုဒ္ေတြရဲ႕ ဒီဇိုင္းေတြကို ေလ့လာႏိုင္ပါတယ္။


သူ႔ ဘေလာ့ဂ္ဟာ လက္ရွိ WordPress.org မွာ rating အေတာ္မ်ားမ်ား ေပးခံထားရတဲ့ ဒီဇိုင္းၿဖစ္ပါတယ္။ ေနာက္ အရင္ႏွစ္က Eight Annual Weblog Award မွာလဲ စာရင္း၀င္ခဲ့ပါတယ္။ အခု သူ႔ရဲ႕ interview တစ္ခုကို Design Interviews မွာ ေတြ႔လို႔ ၿပန္တင္လိုက္တာပါ။ မူရင္း အင္တာဗ်ဴးကို Design Interviews မွာ ဖတ္ရႈႏိုင္ပါတယ္။

Related Posts

]]> http://www.htootayzar.com/myblog/2008/12/interview-with-nick-la-from-wdw/feed/ 0 Recommended Article for Web Designers http://www.htootayzar.com/myblog/2008/08/recommended-article-for-web-designers/ http://www.htootayzar.com/myblog/2008/08/recommended-article-for-web-designers/#comments Sun, 17 Aug 2008 14:29:42 +0000 Htoo Tay Zar http://www.htootayzar.com/myblog/?p=517 ဒီေန႔ feed ေတြဖတ္ရင္းနဲ႔ စိတ္၀င္စားဖို႔ေကာင္းတဲ့ အေၾကာင္းအရာ တစ္ခုကို ဖတ္ၿဖစ္လို႔ ဒီမွာ ၿပန္ၿပီးပို႔စ္တင္လိုက္တာပါ.. Kai Loon blog မွာ ဖတ္ၿဖစ္တဲ့ personal အေၾကာင္းအရာတစ္ခုပါ.. သူက ဒီအေၾကာင္းကို မေန႔က twitter မွာ twitt လုပ္ထားတာေတြ႔လို႔ ကြ်န္ေတာ္ေတာင္ reply လုပ္လိုက္ေသးတယ္ အေၾကာင္းအရာက က သူ႔သူငယ္ခ်င္းက အလုပ္အပ္လို႔ ဒီဇိုင္းဆြဲေပးတယ္ layout ၇ေတာ့ ၿပေတာ့ ဟုိက HTML, CSS စတဲ့ဖိုင္ေတြေတာင္းၿပီး ေနာက္ဆံုး မလုပ္ၿဖစ္ေတာ့ရာကေန သူသြားၾကည့္ေတာ့ အဲဒီဆိုဒ္မွာ သူ႔ရဲ႕ layout သံုးထားတဲ့ ကိစၥပါ. Layout ဆိုတာမ်ိဳးကလည္း တကယ္ေတာ့ art လုိ႔ ေၿပာရင္ရမယ္ထင္တယ္ အိုင္ဒီယာ အေရာင္ ဒီဇိုင္း resolution ေတြက တကယ္ေတာ့ mark up ထပ္ပိုၿပီး စဥ္းစားရတဲ့ အရာမ်ိဳးပါပဲ. ဒီလိုမ်ိဳး အၿဖစ္ေတြကေတာ့ လူေတြအားလံုးမွာ ကုိယ္ခ်င္းစာစိတ္ သူမ်ားကို ေလးစားတတ္တဲ့စိတ္မရွိရင္ ထပ္ၿဖစ္ေနမွာပဲ. ေရွာင္ႏိုင္ေအာင္ၾကိဳးစားရမွာပါပဲ ကိုယ္လည္းေနာင္ ၾကံဳရတဲ့ အခါ ခြင့္လႊတ္ၿပီး ေအးေအးေဆးေဆး ေနတာပဲ ေကာင္းပါတယ္.

Read Article @ Kai Loon

Related Posts

]]> http://www.htootayzar.com/myblog/2008/08/recommended-article-for-web-designers/feed/ 0