Design

CSS3 Knowledge and Examples Part 2

ညီမကေတာ့ Spiceworks Myanmar company မွာ Web Designer အျဖစ္၀င္ေရာက္လုပ္ကိုင္ေနတဲ့ မဆုရည္ထြန္း ျဖစ္ပါတယ္။ ျပီးခဲ့တဲ့ တစ္ေခါက္က
1. Browser Define
2. CSS transition
3. RGBA background
4. Border radius
5. @font-Face
စတဲ႔အေၾကာင္းအရာေတြနဲ႔ပတ္သက္ျပီး ညီမသိသေလာက္ sharing လုပ္ေပးခဲ့ပါတယ္။

ဒီတစ္ပတ္မွာလဲ Web Developerႏွင္႔ Web Designer ေတြအတြက္ CSS coding ေရးရာမွာ အေထာက္ကူျဖစ္ေစမယ္႔ CSS coding knowledge ေလးေတြကိုညီမေလ႔လာထားသေလာက္ေလး ထပ္ျပီး sharing လုပ္ေပးခ်င္ပါတယ္။
က်န္တဲ့ CSS3 အေျကာင္းအရာ ၅ခု ျဖစ္တဲ့
6. CSS gradient
7. Text Rotate
8. CSS animation
9. Text shadow
10. Box shadow နဲ႔ ပတ္သက္ျပီးေျပာသြားမွာျဖစ္ပါတယ္။

6.CSS3 Gradient

CSS Gradient ကေတာ႔ color ေတြ ကို only css coding သံုးျပီး အေရာင္ေတြကိုေရာစပ္အသံုးျပဳခ်င္တဲ့အခ်ိန္မွာ အသံုး၀င္ပါတယ္။CSS Gradient ကိုအဓိက အသံုးျပဳရတဲ့ ရည္၇ြယ္ခ်က္ကေတာ႔ download time and bandwidth usage ကို ေလွ်ာ႔ခ်ခ်င္လို႔ ျဖစ္ပါတယ္။

6.1 How to use CSS3 Gradient

CSS3 Gradient ကို

  • Linear Gradients (goes down/up/left/right/diagonally)
  • Radial Gradients (defined by their center)

ဆိုျပီး နွစ္မ်ိဴးခြဲနိုင္ပါတယ္။

6.2 CSS3 Linear Gradients

CSS3 Linear Gradient သတ္မွတ္ရန္ အနည္းဆံုး color stops နွစ္ခုသတ္မွတ္ေပးရမွာျဖစ္ပါတယ္။
Syntax:
background: linear-gradient(direction, color-stop1, color-stop2, ...);

6.2.1 Linear Gradient – Top to Bottom (this is default)

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */
}

6.2.2 Linear Gradient – Left to Right

#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */  
background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* Standard syntax */
}

6.2.3 Linear Gradient – Diagonal

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left top, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red, yellow); /* Standard syntax */
}

6.2.4 Linear Gradient – Using Angle

Syntax:
background: linear-gradient(angle, color-stop1, color-stop2);

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(-90deg, red, yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(-90deg, red, yellow); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(-90deg, red, yellow); /* For Firefox 3.6 to 15 */
  background: linear-gradient(-90deg, red, yellow); /* Standard syntax */
}

6.2.5 Linear Gradient – Using Multiple color stops(top to bottom is default)

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(red, yellow, green); 
  background: -o-linear-gradient(red, yellow, green);
  background: -moz-linear-gradient(red, yellow, green);
  background: linear-gradient(red, yellow, green);
}

6.2.6 Linear Gradient – Using Multiple color stops

#grad {
  background: red;
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

6.2.7 Linear Gradient – Using Transparency

color ေတြကို blur effect နဲ႔ တြဲသံုးခ်င္ရင္ အေရွ႕မွာေျပာခဲ႔တဲ႔ rgba() နဲ႔ တြဲသံုးရမွာပါ။

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));

  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));

  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));

  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

6.2.8 Linear Gradient – Repeating a linear-gradient

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);

  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);

  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

6.3 CSS3 Radial Gradients

Syntax:
background: radial-gradient(shape size at position, start-color, ..., last-color);

6.3.1 Radial Gradient – Repeating a linear-gradient

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(red, yellow, green); 

  background: -o-radial-gradient(red, yellow, green);

  background: -moz-radial-gradient(red, yellow, green);

  background: radial-gradient(red, yellow, green);

}

6.3.2 Radial Gradient – Differently Spaced Color Stops

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%);

  background: -o-radial-gradient(red 5%, yellow 15%, green 60%); 

  background: -moz-radial-gradient(red 5%, yellow 15%, green 60%);

  background: radial-gradient(red 5%, yellow 15%, green 60%);
}

6.3.3 Radial Gradient – Set Shapes

Radial Gradient မွာ Shade ပံုစံ ကိုလဲ define လုပ္နိုင္ပါတယ္။

  • ellipse
  • circle

ဆိုျပီးနွစ္ခုရွိပါတယ္။ellipse က ေတာ႔ default ျဖစ္မွာပါ။ Example မွာေတာ႔ circle ကို နမူနာေရးျပထားပါတယ္။ellipseကေတာ႔ default ျဖစ္လို့ ကိုယ္တိုင္စမ္းၾကည့္ပါေနာ္။

#grad {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, red, yellow, green); 

  background: -o-radial-gradient(circle, red, yellow, green); 

  background: -moz-radial-gradient(circle, red, yellow, green);

  background: radial-gradient(circle, red, yellow, green);
}

6.3.4 Radial Gradient – Use of Different Size Keywords

The size parameter defines the size of the gradient. It can take four values:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
#grad1 {
  background: red; /* For browsers that do not support gradients */

  background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black);

  background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);

  background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black);

  background: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black);

  background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black);

  background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);

  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

closest-side နဲ႔ farthest-side ကို sample css code ေရးျပထားေပးတယ္ေနာ္။ဘယ္လိုပံုစံေလး ေျပာင္းလဲသြားမလဲ ေနာက္ထပ္ keywords ေတြပါထည့္သံုးပီးစမ္းၾကည့္ေပးပါေနာ္။

6.3.5 Repeating a radial-gradient

#grad {
  background: red; /* For browsers that do not support gradients */

  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);

  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);

  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);

  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}


7.CSS3 Text Rotation

CSS3 မွာ text ေတြကိုလဲ စိတ္တိုင္းက် rotate လုပ္နိုင္ပါတယ္။ Rotate လုပ္မယ္ဆိုရင္ CSS3 Transform ကိုအသံုးျပဳရမွာျဖစ္ပါတယ္။ကိုယ္ ေၿပာင္းခ်င္သလို degree သံုးျပီးေျပာင္းလို့ရပါတယ္။
Example:

.txt_rotate1 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    writing-mode: rl-tb;
}
.h1 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: lr-tb;
}


8.CSS3 Animation

CSS3 Animation ကေေတာ႔ Web Developer ေတြနဲ႔ designer ေတြ အတြက္ အရမ္းအသံုး၀င္ပါတယ္။HTML Element ေတြကို JavaScript or Flashမသံုးပဲနဲ႔ animation ေတြျပဳလုပ္နိုင္မွာျဖစ္ပါတယ္။

8.1 CSS3 Animation ေတြဘယ္လို အသံုးျပဳက်မလဲ?

CSS3 Animation သံုးမယ္ဆိုရင္

  • some keyframes ေတြကိုသတ္မွတ္ေပးရပါမယ္။
  • keyframe က ကိုယ္ animation လုပ္ခ်င္တဲ့ style element ေတြကို အလုပ္လုပ္ေပးမွာျဖစ္ပါတယ္။

သတိထားရမွာကေတာ႔ Default အေနနဲ႔ Animation duation က 0 ျဖစ္တဲ့အတြက္ animation ကိုဘယ္အခ်ိန္ထိလုပ္ေစခ်င္တာလဲဆိုတဲ့ animation duration property ကို သတ္မွတ္ေပးရမွာျဖစ္ပါတယ္။

Animation အတြက္ keyframes သတ္မွတ္ ေပးရမယ္ဆိုေတာ႕ Keyframes rule ေတြရွိပါတယ္။

Animation အလုပ္လုပ္ဖို႔အတြက္ animation နဲ႔ style element ေတြကို ခ်ိတ္ေပးရမွာပါ။ အဲ႔လိုခ်ိတ္တဲ့ အလုပ္ကို Keyframes က လုပ္ေဆာင္ေပးတာျဖစ္ပါတယ္။
Example:

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} 

Example အရ animation-name က exampleျဖစ္တဲ့အတြက္ @keyframes ရဲ႕ နာမည္ကလဲ exampleျဖစ္ေနရပါမယ္။
Note: animation-name နဲ႔ @keyframes name က တူေနရပါမယ္။

8.2 Delay an Animation

Animation တစ္ခု ဖန္တီးလွ်င္ animation-delay properties သတ္မွတ္ေပးဖို႔ လိုအပ္ပါတယ္။

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} 

8.3 Set How Many Times an Animation Should Run

Animation တစ္ခု ဖန္တီးလွ်င္ animation အၾကိမ္အေရအတြက္ကိုလဲ ကိုယ့္စိတ္တိုင္းက်သတ္မွတ္ေပးႏူိင္ပါတယ္။

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count:3;
} 

Example အရ animation-iteration-count:3 ၾကိမ္ေပးထားတဲ့အတြက္ animation က 3 ၾကိမ္ အလုပ္လုပ္မွာျဖစ္ပါတယ္။

8.4 Animation Direction

ကိုယ္ဖန္တီးလိုက္တဲ့ Animation ရဲ႕ direction ကိုလဲ သတ္မွတ္လို႕ရပါေသးတယ္။
The animation-direction ကေတာ႔ေအာက္ပါအတိုင္း keyword ေတြရွိပါတယ္။

    • normal – The animation is played as normal (forwards). This is default
    • reverse – The animation is played in reverse direction (backwards)
    • alternate – The animation is played forwards first, then backwards
    • alternate-reverse – The animation is played backwards first, then forwards
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
animation-direction: reverse;
} 

Example အရ animation-direction ကို reverse ေပးထားတဲ႔အတြက္ ကိုယ္သတ္မွတ္ထားတဲ့ animation value ေတြက ေျပာင္းျပန္အလုပ္လုပ္သြားမွာျဖစ္ပါတယ္။

8.5 Specify the Speed Curve of the Animation

CSS3 Transition တုန္းကလိုပဲ timing-function ကို သတ္မွတ္ေပးလို့ရပါတယ္။
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
      • 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

8.6Animation Shorthand Property

CSS3 transition properties can be specified one by one, like this:

div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

or by using the shortand property transition

div {
animation: example 5s linear 2s infinite alternate;
}

9.CSS3 Text Shadow

The CSS3 text-shadow property applie shadow to text.

9.1 How to Use Text Shadow

In its simplest use, you only specify the horizontal shadow and the vertical shadow.

h1 { 
text-shadow: 2px 2px;
}

9.2 Text Shadow With Color And Blur Effect

h1 {
 text-shadow: 2px 2px 5px red;
}

9.3 Multiple Shadows

h1 {
 text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
h1 {
 color: white;
 text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

10.CSS3 Box Shadow

The box-shadow property attaches one or more shadows to an element.

10.1 How to Use Box Shadow

In its simplest use, you only specify the horizontal shadow and the vertical shadow.

div {
box-shadow: 10px 10px;
}

10.2 Box Shadow With Color And Blur Effect

div {
box-shadow: 10px 10px 5px grey;
}

CSS3 နဲ႔ ပတ္သက္ျပီး ညီမသိသေလာက္ ေျပာျပေပးသြားတာျဖစ္ပါတယ္။

http://www.css3maker.com/
http://www.w3school.com/css

ညီမေလ႔လာတဲ႔ Web Site link ကိုလဲေျပာျပေပးထားပါတယ္။
ညီမကိုယ္တိုင္လဲေလ့လာေနဆဲမို႔CSS3 ေလ႔လာတဲ႔ လူေတြ အခက္အခဲ မရွိေလ့လာႏိုင္ေအာင္ တစ္ေထာင့္တစ္ေနရာက အကူညီရနိုင္မယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။
ေနာက္ထပ္လဲ ေလ့လာျဖစ္တာေလးေတြ Sharing လုပ္ေပးသြားပါ့မယ္ေနာ္။

အားလံုးကို ေက်းဇူးတင္ပါတယ္ရွင့္။

Hello

Leave a Reply

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