Design

CSS3 Knowledge and Examples Part 1

ညီမကေတာ႔ Spiceworks myanmar company မွာ Web Designer အျဖစ္၀င္ေရာက္လုပ္ကိုင္ေနတဲ့ မဆုရည္ထြန္း ျဖစ္ပါတယ္။ ဒီအပတ္မွာေတာ့ CSS3 နဲ႔ ပတ္သက္ျပီး Web Developerႏွင္႔ Web Designer ေတြအတြက္ css coding ေရးရာမွာ အေထာက္ကူျဖစ္ေစမည္႔ CSS coding knowledge ေလးေတြကိုညီမေလ႔လာထားသေလာက္ေလး sharing လုပ္ေပးခ်င္ပါတယ္။CSS3 နဲ့ ပတ္သက္ျပီး
1. Browser Define
2. CSS transition
3. RGBA background
4. Border radius
5. @font-Face
6. CSS gradient
7. Text Rotate
8. CSS animation
9. Text shadow
10. Box shadow
စတဲ႔ အေၾကာင္းအရာေခါင္းစဥ္ ၁၀ ခု ကို အပိုင္း ႏွစ္ပိုင္းခြဲပီး ေျပာျပ ေပးမွာျဖစ္ပါတယ္။

1.Browser Define

CSS code ေတြေရးတဲ႔အခ်ိန္ Browser ေတြမတူတာေၾကာင့္ ကိုယ္ေရးလိုက္တဲ႔ css code က မွန္ပင္မဲ့ အလုပ္မလုပ္တဲ႔Error ေတြရွိတတ္ပါတယ္။အဲ့လိုError ေတြ မရွိေအာင္ CSS browser Define သတ္မွတ္ပံုေလးေျပာျပခ်င္ပါတယ္။
ပံုမွန္ CSS coding ေရးမယ္ဆိုရင္

  transition: all linear 2s;/* standard Code*/  

ဆိုပီးေရးေပးရပါတယ္။
Safari နဲ႕ Chrome Browser ေတြမွာအလုပ္လုပ္ေစခ်င္ရင္ keyword -webkit- ကိုသံုးေပးရမွာျဖစ္ပါတယ္။

-webkit-transition: all linear 2s;

Firefox Browser မွာအလုပ္လုပ္ေစခ်င္ရင္ keyword -moz- ကိုသံုးေပးရမွာျဖစ္ပါတယ္။

-moz-transition: all linear 2s;

Opera browser မွာအလုပ္လုပ္ေစခ်င္ရင္ keyword -o- ကိုသံုးေပးရမွာျဖစ္ပါတယ္။

-o-transition: all linear 2s;

IE Browser မွာအလုပ္လုပ္ေစခ်င္ရင္ keyword -ms- ကိုသံုးေပးရမွာျဖစ္ပါတယ္။

-ms-transition: all linear 2s;

စသည္ၿဖင္႔သတ္မွတ္ေပးရမွာျဖစ္ပါတယ္။

2.CSS3 Transition

CSS transition ကိုေတာ႔ CSS property values ေတြ ကို အခ်ိန္တစ္ခု သတ္မွတ္ျပီး value တစ္ခုနဲ႔ တစ္ခု အေျပာင္းအလဲ လုပ္ခ်င္တဲ႔အခါမွာသံုးပါတယ္။

2.1 How to use CSS3 Transitions

CSS3 Transition effect ဖန္တီးမယ္ဆိုရင္

  • ကိုယ္ effect ထည့္ခ်င္တဲ႔ CSS property
  • Css transition effect သက္ေရာက္မဲ့ၾကာခ်ိန္

သတိျပဳရမဲ့အခ်က္ကေတာ႔ Transition Effect တစ္ခုေရးတိုင္း Transition Duation သတ္မွတ္ေပးရမွာျဖစ္ပါတယ္။Transition duation ရဲ႕ Default Value က 0 ျဖစ္ေနလို႕ပါ။

2.2 Specify the Speed Curve of the Transition

The transition-timing-function property ကေတာ႔ CSS property ကို effect သက္ေရာက္မဲ့ Styleပဲျဖစ္ပါတယ္။

The transition-timing-function property can have the following values:

  • ease – specifies a transition effect with a slow start, then fast, then end slowly(this is default)
  • linear – specifies a transition effect with the same speed from start to end
  • ese-in – specifies a transition effect with a slow start
  • ease-out – specifies a transition effect with a slow end
  • ease-in-out – specifies a transition effect with a slow start and end
  • cubic-bezier(n,n,n,n)lets you define your own values in a cubic-bezier function

Example:

div{
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
 transition-timing-function: linear;
}

ညီမက example ဘယ္လိုေရးရမလဲဆိုတာပဲဲျပေပးတာပါ။ကိုယ္ကိုယ္တိုင္ ေနာက္ထပ္ stlye ေလးေတြထည္႔သံုးပီးစမ္းၾကည္႔ပါေနာ္။

2.3 CSS Transition delay

CSS tansition ကို effect မသက္ေရာက္ခင္ delay ဆိုတဲ႔ အခ်ိန္လဲသတ္မွတ္ေပးလို႔ရပါတယ္။

Example

.delay{
width: 100px;
height: 100px;
background: red;
-webkit-transition: all 2s linear 3s;
-moz-transition: all 2s linear 3s;
-ms-transition: all 2s linear 3s;
-o-transition: all 2s linear 3s;
transition: all 2s linear 3s;
}
.delay:hover{
	width: 200px;
}

Example အတိုင္းဆိုရင္ delay ဆိုတဲ႔ css class ကို hover ေထာက္ရင္ delay time:3s ေပးထားတဲ႔အတြက္ 3s ၾကာပီးမွသာ width 200px ကိုေျပာင္းသြားမွာျဖစ္ပါတယ္။

2.4 CSS Transition + Transform

CSS transition ကို tansform နဲ႔ေပါင္းပီး CSS property ေတြကို effect ေျပာင္းလို႔ရပါေသးတယ္။

Example:

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: all 2s linear 2s; -webkit-transform: 1s;
-moz-transition: all 2s linear 2s;    -moz-transform: 1s;
-ms-transition: all 2s linear 2s;     -ms-transform: 1s;
-o-transition: all 2s linear 2s;      -o-transform: 1s;
 transition: all 2s linear 2s;         transform: 1s;
}
div:hover{
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
 transform: rotate(180deg);
}

width:100px; height:100px; ရွိတဲ႔ div တစ္ခုကိုhover ေထာက္လိုက္တာနဲ႔ CSS tansition နဲ႔ transform effect သက္ေရာက္ပံုေလးပါ။

CSS Transition ရဲ႕ေနာက္ဆံုးအေန နဲ႔ CSS transition သတ္မွတ္ပံုေလးေတြ ေျပာျပေပးမွာပါ။

Example

div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
OR
div {
transition: width 2s linear 1s;
}

3.RGBA background

RGBA color value ကေတာ႔ rgba(red,green,blue,alpha) ပဲျဖစ္ပါတယ္။
RGBA color values က RGB(red,green,blue) color values ေတြကို alpha နဲ႔ ထပ္ေပါင္းပီး color ေျပာင္းတာျဖစ္ပါတယ္။alpha ဆိုတာက ေတာ့ color တန္ဖိုးေတြကို opicity နဲ႔ ထည့္တာျဖစ္ပါတယ္။ alpha တန္ဖိုး သတ္မွတ္ရင္ေတာ႔ 0 နဲ႔ 1ၾကားတန္ဖိုးေတြသတ္မွတ္ေပးရမွာပါ။

Example
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}

RGBA background photo

4.Border Radius

Border Radius က button ေတြ မွာ ျဖစ္ျဖစ္၊ boder line ထည့္တဲ့အခ်ိန္ ေထာင့္ေတြကို ေကြးတဲ႔အခါမွာအသံုးျပဳပါတယ္။
Border Radius value သတ္မွတ္ပံု က ၄နည္းရွိပါတယ္။

  • Four values: first value applies to top-left, second value applies to top-right, third value applies to bottom-right, and fourth value applies to bottom-left corner
  • Three values: first value applies to top-left, second value applies to top-right and bottom-left, and third value applies to bottom-right
  • Two values: first value applies to top-left and bottom-right corner, and the second value applies to top-right and bottom-left corner
  • One value: all four corners are rounded equally

Example:

1.Border Radius With One Values

div {
border: 1px solid red;
padding: 10px;
background-color: blue;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px; 
border-color: #000;
}

1.Border Radius With One Values


2.Border Radius With Four Values

div {
border: 1px solid red;
padding: 10px;
background-color: blue;
border-radius: 15px 50px 30px 5px;
-moz-border-radius: 15px 50px 30px 5px;
-webkit-border-radius: 15px 50px 30px 5px;
}

1.Border Radius With Four Values


3.Border Radius With Three Values

div {
border: 1px solid red;
padding: 10px;
background-color: blue;
border-radius: 15px 50px 30px ;
-moz-border-radius: 15px 50px 30px ;
-webkit-border-radius: 15px 50px 30px ; 
}

1.Border Radius With three Values


4.Border Radius With Two Values

div {
border: 1px solid red;
padding: 10px;
background-color: blue;
border-radius: 15px 50px ;
-moz-border-radius: 15px 50px ;
-webkit-border-radius: 15px 50px ; 
}

1.Border Radius With two Values


border radius ကို border:50px solid red; အေန နဲ႔ value ေပးလိုက္ရင္ စက္၀ိုင္းပံုစံ ရရွိမွာျဖစ္ပါတယ္။စမ္းၾကည့္ေပးပါအုန္းေနာ္။

5.@Font Face

computer ထဲ မွာ font မရွိရင္ ေတာင္ @font Face ကိုသံုးျပီး လိုခ်င္တဲ့ font ကို လိုသလိုအသံုးျပဳနိုင္မွာျဖစ္ပါတယ္။

Different @Font Face

  • TrueType Fonts (TTF)
    for both the Mac OS and Microsoft Windows operating systems.
  • OpenType Fonts (OTF)
    for scalable computer fonts
  • The Web Open Font Format (WOFF)
    for use in web pages.
  • The Web Open Font Format (WOFF 2.0)
    that provides better compression than WOFF 1.0.
  • SVG Fonts/Shapes
    to be used as glyphs when displaying text.
  • Embedded OpenType Fonts (EOT)
    use as embedded fonts on web pages.

How to Use @Font Face

Example:

@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

ေနာက္ တစ္ပါတ္မွာ က်န္တဲ႔ အေၾကာင္းအရာေတြ ထပ္ေရးေပးပါ႔မယ္ေနာ္။
အားလံုးကိုေက်းဇူးတင္ပါတယ္ရွင္႔။
Reference Link: www.w3school.com

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *