Design Resources

UI Design Resource ဆိုပြီးတော့ Post ရေးခဲ့ဖူးပါတယ်။ အခုတလော သဘောကျတဲ့ Design နဲ့ ပတ်သက်တဲ့ resources လေးတွေကို ပြောပြချင်ပါတယ်။

premiumpixels

premiumpixels.com ကို Smashing Magazine က ညွှန်းလို့ တွေ့ခဲ့ပါတယ်။ 365psd.com လောက် အမြောက်အများမရှိပေမယ့် လှပတဲ့ UI design PSD တွေကို အခမဲ့ လွတ်လပ်စွာ သုံးခွင့်ပေးထားပါတယ်။ License နဲ့ ပတ်သက်ပြီးတော့

All resources made available on Premium Pixels, including but not limited to, icons, images, brushes, shapes, layer styles, layered PSD’s, patterns, textures, web elements and themes are free for use in both personal and commercial projects.

လို့ ဆိုထားတဲ့အတွက်ကြောင့် ကိုယ့်ရဲ့ commercial projects တွေမှာလည်း အခမဲ့ ထည့်သုံးခွင့်ရှိပါတယ်။


Continue reading “Design Resources”

UI Design Resources

တစ်ခါတစ်လေ ကျွန်တော်တို့တွေ iphone , ipad UI Design ကို စဉ်းစားတဲ့ အခါ ဖြစ်ဖြစ် web design အတွက် UI ကို စဉ်းစားတာ ဖြစ်ဖြစ် ဘယ်လို သုံးသင့်ရမလဲဆိုတာ စဉ်းစားမရတာတွေ ရှိတတ်တယ်။ ကျွန်တော်က Designer မဟုတ်တဲ့အတွက် Design ပိုင်းကို လန်ထွက်နေအောင် မဆွဲနိုင်ဘူး။ သို့ပေမယ့် ဘယ် UI Design သုံးသင့်တယ်ဆိုတာကို နေ့စဉ် ထိတွေ့နေရတဲ့ ပတ်ဝန်းကျင်ကြောင့် သိနိုင်တယ်။ အခု တလော ရုံးမှာ အလုပ်များနေတာကြောင့် Designer ကလည်း project တစ်ခုကို အချိန်ပြည့် ယူနေရတယ်။ လက်ရှိ ကျွန်တော့် project တွေအတွက် UI Design ကိုယ့်ဘာသာကိုယ် ဖန်တီးရပါတော့တယ်။ Continue reading “UI Design Resources”

CSS – Part 3 : Text Formating

Text formatting ဆိုတာကတော့ စာလုံးတွေကို အရောင်ထည့်တာတွေ နောက်ပြီး font တွေပြောင်းတာ alignment လုပ်တာ စတာတွေကို css ကို ဆောင်ရွက်လို့ရပါတယ်။

Text Color

text color ကိုတော့ CSS မှာ color လို့သုံးပါတယ်။ အောက်မှာ ဥပမာ ကြည့်ပါ။

body { color:#FF0000; }

လို့ဆိုရင် body စာလုံးတွေက အနီရောင်နဲ့ ပြပေးမှာပါ။

Text alignment

text alignment ကတော့ left, right , center,justify ဆိုပြီး သတ်မှတ်ပေးတာပါ။ ကျွန်တော်တို့ html မှာက align နဲ့ လုပ်ခဲ့တာ မှတ်မိအုံးမယ်ထင်ပါတယ်။ CSS မှာကတော့

p  { text-align: center; }
h1 { text-align: right; }
h2 { text-align : justify }

left ကတော့ default ပါ။ ဒါလေးတွေက လွယ်သေးတော့ ကိုယ့်ဘာသာ ကိုယ်စမ်းကြည့်လိုက်ပါ။

Text Transformation

ကျွန်တော်တို့တွေ HTML မှာ upper case တွေ lower case တွေပြောင်းချင်ရင် စာတွေ ပြန်ပြင်ရိုက်ရပါတယ်။ CSS သုံးရင် အဲလို ပြန်ပြင်ရိုက်တဲ့ ပြဿနာ ရှင်းသွားပါတယ်။ အောက်က example လေး ကို ကြည့်ကြည့်ပါ။

<html>
<head>
<title>Sample</title>
<style type="text/css">
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
<body>
<p class="uppercase">uppder case</p>
<p class="lowercase">LOWER CASE</p>
<p class="capitalize">capitalize</p>
</body>
</head>
</html>

Text Indentation

စာလုံးတွေကိုရွှေ့ချင်တယ်ဆိုရင် indentation ကို သုံးလို့ရပါတယ်။ အောက်က ဥပမာလေး ကိုကြည့်ကြည့်ပါ။

<html>
<head>
<title>Sample</title>
<style type="text/css">
p {text-indent:50px;}
</style>
<body>
<p>
Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
</p>
</body>
</head>
</html>

Space between characters

Characters တစ်ခုနဲ့ တစ်ခုကြား space တွေကို ခြားချင်ရင်တော့ letter-spacing ဆိုတာကို သုံးလို့ရပါတယ်။

<html>
<head>
<style type="text/css">
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>

Space Between Lines

Characters တစ်ခုနဲ့ တစ်ခုကြား space အကွာအဝေး ချိန်ညှိလို့ရသလို line တစ်ခုနဲ့ တစ်ခုကြားလည်း line-height နဲ့ ချိန်ညှိလို့ရပါတယ်။ အောက်က example လေးကို လေ့လာကြည့်ပါ။

<html>
<head>
<style type="text/css">
p.small {line-height:90%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
This is a paragraph with a standard line-height.
The default line height in most browsers is about 110% to 120%.
This is a paragraph with a standard line-height.
</p>

<p class="small">
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.
</p>

<p class="big">
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.
</p>

</body>
</html>

Right To Left Text

ဒါကတော့ ကျွန်တော်တို့တွေ သုံးခဲတယ်။ left to right ရေးရတဲ့ ဘာသာစကားတွေအတွက် သုံးတာပါ။ ဥပမာ တော့ မပြတော့ဘူး။ ဘယ်လိုပေါ်လဲ သိချင်ရင် စမ်းကြည့်နိုင်ပါတယ်။

p{direction:rtl;}

Word Spacing

Character spacing , line spacing တွေပြီးတော့ word spacing ပေါ့။

<html>
<head>
<style type="text/css">
p
{ 
word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is some text. This is some text.
</p>

</body>
</html>

Nowrap

စာလုံးတွေကို wrap မဖြစ်ချင်ဘူး။ စာလုံးက တစ်တန်းပြည့်သွားပေမယ့် အောက်တစ်လိုင်း မဆင်းသွား စေချင်ဘူးဆိုရင် white-space ကို nowrap ပေးရပါတယ်။

p
{
white-space:nowrap;
}

ကိုယ့်ဘာသာ ကိုယ်စမ်းကြည့်လိုက်ပေါ့။

Vertical Align

image တွေမှာ ကျွန်တော်တို့တွေ HTML တုန်းက align တွေလိုက်ထည့်ရတယ်။ text align ညှိတာပေါ့။ အဲလိုမျိုးပဲ CSS မှာလည်း သုံးလို့ရပါတယ်။

<html>
<head>
<style type="text/css">
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p> 
<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p> 
<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>

Text-shadow

စာလုံးတွေနောက်မှာ shadow ထည့်ချင်တဲ့အခါမှာတော့ text-shadow ကို သုံးနိုင်ပါတယ်။

<html>
<head>
<style>
p.test {
&nbsp;&nbsp; &nbsp;text-shadow: #6374AB 20px 25px 2px;
}
</style>
</head>
<body>
<p class="test">This is txt shadow</p>
</body>
</html>

text-shadow: #အရောင် , X , Y, bluer ဆိုပြီး ထည့်ပေးရတာပါ။

CSS Text Properties

Property

Description

Values

color

text color

color

direction

text direction

ltr

rtl

line-height

line တစ်ခုနဲ့ တစ်ခုကြား အမြင့်

normal

number

length

%

letter-spacing

characters တစ်ခုနဲ့ တစ်ခုကြား အကွာအဝေး

normal

length

text-align

text align ညှိခြင်း

left

right

center

justify

text-decoration

add decoration to text

none

underline

overline

line-through

blink

text-indent

indent ရွှေ့ခြင်း

length

%

text-shadow

အရိပ်ထည့်ခြင်း

none

color

length

text-transform

uppercase , lowercase ပြောင်းခြင်း

none

capitalize

uppercase

lowercase

vertical-align

vertical align

baseline

sub

super

top

text-top

middle

bottom

text-btoom

length

%

white-space

wrap text လုပ်မလုပ်

normal

pre

nowrap

word-spacing

word တစ်ခုနဲ့တစ်ခုကြား spacing 

normal

length