{"id":868,"date":"2018-03-29T03:40:37","date_gmt":"2018-03-28T21:10:37","guid":{"rendered":"https:\/\/spiceworksmyanmar.com\/blog\/?p=868"},"modified":"2022-10-06T13:53:39","modified_gmt":"2022-10-06T07:23:39","slug":"css3-knowledge-and-examples-part-2","status":"publish","type":"post","link":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/","title":{"rendered":"CSS3 Knowledge and Examples Part 2"},"content":{"rendered":"<p>\u100a\u102e\u1019\u1000\u1031\u1010\u102c\u1037 Spiceworks Myanmar company \u1019\u103d\u102c Web Designer \u1021\u103b\u1016\u1005\u1039\u1040\u1004\u1039\u1031\u101b\u102c\u1000\u1039\u101c\u102f\u1015\u1039\u1000\u102d\u102f\u1004\u1039\u1031\u1014\u1010\u1032\u1037 \u1019\u1006\u102f\u101b\u100a\u1039\u1011\u103c\u1014\u1039\u1038 \u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b \u103b\u1015\u102e\u1038\u1001\u1032\u1037\u1010\u1032\u1037 \u1010\u1005\u1039\u1031\u1001\u102b\u1000\u1039\u1000<br \/>\n1. Browser Define<br \/>\n2. CSS transition<br \/>\n3. RGBA background<br \/>\n4. Border radius<br \/>\n5. @font-Face<br \/>\n\u1005\u1010\u1032\u1094\u1021\u1031\u107e\u1000\u102c\u1004\u1039\u1038\u1021\u101b\u102c\u1031\u1010\u103c\u1014\u1032\u1094\u1015\u1010\u1039\u101e\u1000\u1039\u103b\u1015\u102e\u1038 \u100a\u102e\u1019\u101e\u102d\u101e\u1031\u101c\u102c\u1000\u1039 sharing \u101c\u102f\u1015\u1039\u1031\u1015\u1038\u1001\u1032\u1037\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<p>\u1012\u102e\u1010\u1005\u1039\u1015\u1010\u1039\u1019\u103d\u102c\u101c\u1032 Web Developer\u108f\u103d\u1004\u1039\u1094 Web Designer \u1031\u1010\u103c\u1021\u1010\u103c\u1000\u1039 CSS coding \u1031\u101b\u1038\u101b\u102c\u1019\u103d\u102c \u1021\u1031\u1011\u102c\u1000\u1039\u1000\u1030\u103b\u1016\u1005\u1039\u1031\u1005\u1019\u101a\u1039\u1094 CSS coding knowledge \u1031\u101c\u1038\u1031\u1010\u103c\u1000\u102d\u102f\u100a\u102e\u1019\u1031\u101c\u1094\u101c\u102c\u1011\u102c\u1038\u101e\u1031\u101c\u102c\u1000\u1039\u1031\u101c\u1038 \u1011\u1015\u1039\u103b\u1015\u102e\u1038 sharing \u101c\u102f\u1015\u1039\u1031\u1015\u1038\u1001\u103a\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n\u1000\u103a\u1014\u1039\u1010\u1032\u1037 CSS3 \u1021\u1031\u103b\u1000\u102c\u1004\u1039\u1038\u1021\u101b\u102c \u1045\u1001\u102f \u103b\u1016\u1005\u1039\u1010\u1032\u1037<br \/>\n6. CSS gradient<br \/>\n7. Text Rotate<br \/>\n8. CSS animation<br \/>\n9. Text shadow<br \/>\n10. Box shadow \u1014\u1032\u1094 \u1015\u1010\u1039\u101e\u1000\u1039\u103b\u1015\u102e\u1038\u1031\u103b\u1015\u102c\u101e\u103c\u102c\u1038\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<h3>6.CSS3 Gradient<\/h3>\n<p>CSS Gradient \u1000\u1031\u1010\u102c\u1094 color \u1031\u1010\u103c \u1000\u102d\u102f only css coding \u101e\u1036\u102f\u1038\u103b\u1015\u102e\u1038 \u1021\u1031\u101b\u102c\u1004\u1039\u1031\u1010\u103c\u1000\u102d\u102f\u1031\u101b\u102c\u1005\u1015\u1039\u1021\u101e\u1036\u102f\u1038\u103b\u1015\u1033\u1001\u103a\u1004\u1039\u1010\u1032\u1037\u1021\u1001\u103a\u102d\u1014\u1039\u1019\u103d\u102c \u1021\u101e\u1036\u102f\u1038\u1040\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104bCSS Gradient \u1000\u102d\u102f\u1021\u1013\u102d\u1000 \u1021\u101e\u1036\u102f\u1038\u103b\u1015\u1033\u101b\u1010\u1032\u1037 \u101b\u100a\u1039\u1047\u103c\u101a\u1039\u1001\u103a\u1000\u1039\u1000\u1031\u1010\u102c\u1094 download time and bandwidth usage \u1000\u102d\u102f \u1031\u101c\u103d\u103a\u102c\u1094\u1001\u103a\u1001\u103a\u1004\u1039\u101c\u102d\u102f\u1094 \u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<h4>6.1 How to use CSS3 Gradient<\/h4>\n<p>CSS3 Gradient \u1000\u102d\u102f<\/p>\n<ul>\n<li>Linear Gradients (goes down\/up\/left\/right\/diagonally)<\/li>\n<li>Radial Gradients (defined by their center)<\/li>\n<\/ul>\n<p>\u1006\u102d\u102f\u103b\u1015\u102e\u1038 \u1014\u103d\u1005\u1039\u1019\u103a\u102d\u1034\u1038\u1001\u103c\u1032\u1014\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<h4>6.2 CSS3 Linear Gradients<\/h4>\n<p>CSS3 Linear Gradient \u101e\u1010\u1039\u1019\u103d\u1010\u1039\u101b\u1014\u1039 \u1021\u1014\u100a\u1039\u1038\u1006\u1036\u102f\u1038 color stops \u1014\u103d\u1005\u1039\u1001\u102f\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1031\u1015\u1038\u101b\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\nSyntax:<code><br \/>\nbackground: linear-gradient(direction, color-stop1, color-stop2, ...);<br \/>\n<\/code><\/p>\n<h4>6.2.1 Linear Gradient &#8211; Top to Bottom (this is default)<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\nbackground: red; \/* For browsers that do not support gradients *\/\r\nbackground: -webkit-linear-gradient(red, yellow); \/* For Safari 5.1 to 6.0 *\/\r\nbackground: -o-linear-gradient(red, yellow); \/* For Opera 11.1 to 12.0 *\/\r\nbackground: -moz-linear-gradient(red, yellow); \/* For Firefox 3.6 to 15 *\/\r\nbackground: linear-gradient(red, yellow); \/* Standard syntax *\/\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-514\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot3-300x68.png\" alt=\"\" width=\"300\" height=\"68\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot3-300x68.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot3.png 660w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.2.2 Linear Gradient &#8211; Left to Right<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\nbackground: red; \/* For browsers that do not support gradients *\/\r\nbackground: -webkit-linear-gradient(left, red , yellow); \/* For Safari 5.1 to 6.0 *\/\r\nbackground: -o-linear-gradient(right, red, yellow); \/* For Opera 11.1 to 12.0 *\/  \r\nbackground: -moz-linear-gradient(right, red, yellow); \/* For Firefox 3.6 to 15 *\/\r\nbackground: linear-gradient(to right, red , yellow); \/* Standard syntax *\/\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-518\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot5-300x67.png\" alt=\"\" width=\"300\" height=\"67\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot5-300x67.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot5.png 681w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.2.3 Linear Gradient &#8211; Diagonal<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n  background: -webkit-linear-gradient(left top, red, yellow); \/* For Safari 5.1 to 6.0 *\/\r\n  background: -o-linear-gradient(bottom right, red, yellow); \/* For Opera 11.1 to 12.0 *\/\r\n  background: -moz-linear-gradient(bottom right, red, yellow); \/* For Firefox 3.6 to 15 *\/\r\n  background: linear-gradient(to bottom right, red, yellow); \/* Standard syntax *\/\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-521\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot6-300x54.png\" alt=\"\" width=\"300\" height=\"54\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot6-300x54.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot6-768x138.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot6.png 834w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.2.4 Linear Gradient &#8211; Using Angle<\/h4>\n<p>Syntax:<br \/>\n<code>background: linear-gradient(angle, color-stop1, color-stop2);<\/code><\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n  background: -webkit-linear-gradient(-90deg, red, yellow); \/* For Safari 5.1 to 6.0 *\/\r\n  background: -o-linear-gradient(-90deg, red, yellow); \/* For Opera 11.1 to 12.0 *\/\r\n  background: -moz-linear-gradient(-90deg, red, yellow); \/* For Firefox 3.6 to 15 *\/\r\n  background: linear-gradient(-90deg, red, yellow); \/* Standard syntax *\/\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-526\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot9-300x58.png\" alt=\"\" width=\"300\" height=\"58\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot9-300x58.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot9-768x147.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot9.png 797w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.2.5 Linear Gradient &#8211; Using Multiple color stops(top to bottom is default)<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n  background: -webkit-linear-gradient(red, yellow, green); \r\n  background: -o-linear-gradient(red, yellow, green);\r\n  background: -moz-linear-gradient(red, yellow, green);\r\n  background: linear-gradient(red, yellow, green);\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-523\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot7-300x62.png\" alt=\"\" width=\"300\" height=\"62\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot7-300x62.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot7.png 724w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.2.6 Linear Gradient &#8211; Using Multiple color stops<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red;\r\n  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);\r\n\r\n  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);\r\n\r\n  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);\r\n\r\n  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-524\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot8-300x55.png\" alt=\"\" width=\"300\" height=\"55\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot8-300x55.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot8-768x141.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot8.png 817w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.2.7 Linear Gradient &#8211; Using Transparency<\/h4>\n<p>color \u1031\u1010\u103c\u1000\u102d\u102f blur effect \u1014\u1032\u1094 \u1010\u103c\u1032\u101e\u1036\u102f\u1038\u1001\u103a\u1004\u1039\u101b\u1004\u1039 \u1021\u1031\u101b\u103d\u1095\u1019\u103d\u102c\u1031\u103b\u1015\u102c\u1001\u1032\u1094\u1010\u1032\u1094 rgba() \u1014\u1032\u1094 \u1010\u103c\u1032\u101e\u1036\u102f\u1038\u101b\u1019\u103d\u102c\u1015\u102b\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));\r\n\r\n  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));\r\n\r\n  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));\r\n\r\n  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-529\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/transpancy-300x62.png\" alt=\"\" width=\"300\" height=\"62\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/transpancy-300x62.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/transpancy.png 734w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.2.8 Linear Gradient &#8211; Repeating a linear-gradient<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);\r\n\r\n  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);\r\n\r\n  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);\r\n\r\n  background: repeating-linear-gradient(red, yellow 10%, green 20%);\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-530\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot11-300x73.png\" alt=\"\" width=\"300\" height=\"73\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot11-300x73.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot11.png 613w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.3 CSS3 Radial Gradients<\/h4>\n<p>Syntax:<code><br \/>\nbackground: radial-gradient(shape size at position, start-color, ..., last-color);<br \/>\n<\/code><\/p>\n<h4>6.3.1 Radial Gradient &#8211; Repeating a linear-gradient<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n  background: -webkit-radial-gradient(red, yellow, green); \r\n\r\n  background: -o-radial-gradient(red, yellow, green);\r\n\r\n  background: -moz-radial-gradient(red, yellow, green);\r\n\r\n  background: radial-gradient(red, yellow, green);\r\n\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-532\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot12-300x54.png\" alt=\"\" width=\"300\" height=\"54\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot12-300x54.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot12-768x138.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot12.png 835w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.3.2 Radial Gradient &#8211; Differently Spaced Color Stops<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n  background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%);\r\n\r\n  background: -o-radial-gradient(red 5%, yellow 15%, green 60%); \r\n\r\n  background: -moz-radial-gradient(red 5%, yellow 15%, green 60%);\r\n\r\n  background: radial-gradient(red 5%, yellow 15%, green 60%);\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-533\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot15-300x55.png\" alt=\"\" width=\"300\" height=\"55\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot15-300x55.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot15-768x142.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot15.png 818w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h4>6.3.3 Radial Gradient &#8211; Set Shapes<\/h4>\n<p>Radial Gradient \u1019\u103d\u102c Shade \u1015\u1036\u102f\u1005\u1036 \u1000\u102d\u102f\u101c\u1032 define \u101c\u102f\u1015\u1039\u1014\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<ul>\n<li>ellipse<\/li>\n<li>circle<\/li>\n<\/ul>\n<p>\u1006\u102d\u102f\u103b\u1015\u102e\u1038\u1014\u103d\u1005\u1039\u1001\u102f\u101b\u103d\u102d\u1015\u102b\u1010\u101a\u1039\u104bellipse \u1000 \u1031\u1010\u102c\u1094 default \u103b\u1016\u1005\u1039\u1019\u103d\u102c\u1015\u102b\u104b Example \u1019\u103d\u102c\u1031\u1010\u102c\u1094 circle \u1000\u102d\u102f \u1014\u1019\u1030\u1014\u102c\u1031\u101b\u1038\u103b\u1015\u1011\u102c\u1038\u1015\u102b\u1010\u101a\u1039\u104bellipse\u1000\u1031\u1010\u102c\u1094 default \u103b\u1016\u1005\u1039\u101c\u102d\u102f\u1037 \u1000\u102d\u102f\u101a\u1039\u1010\u102d\u102f\u1004\u1039\u1005\u1019\u1039\u1038\u107e\u1000\u100a\u1039\u1037\u1015\u102b\u1031\u1014\u102c\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n  background: -webkit-radial-gradient(circle, red, yellow, green); \r\n\r\n  background: -o-radial-gradient(circle, red, yellow, green); \r\n\r\n  background: -moz-radial-gradient(circle, red, yellow, green);\r\n\r\n  background: radial-gradient(circle, red, yellow, green);\r\n}<\/pre>\n<h4>6.3.4 Radial Gradient &#8211; Use of Different Size Keywords<\/h4>\n<p>The size parameter defines the size of the gradient. It can take four values:<\/p>\n<ul>\n<li>closest-side<\/li>\n<li>farthest-side<\/li>\n<li>closest-corner<\/li>\n<li>farthest-corner<\/li>\n<\/ul>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad1 {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n\r\n  background: -webkit-radial-gradient(60% 55%, closest-side, red, yellow, black);\r\n\r\n  background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);\r\n\r\n  background: -moz-radial-gradient(60% 55%, closest-side, red, yellow, black);\r\n\r\n  background: radial-gradient(closest-side at 60% 55%, red, yellow, black);\r\n}\r\n\r\n#grad2 {\r\n  background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black);\r\n\r\n  background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black);\r\n\r\n  background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);\r\n\r\n  background: radial-gradient(farthest-side at 60% 55%, red, yellow, black);\r\n}<\/pre>\n<p><strong>closest-side<\/strong> \u1014\u1032\u1094 <strong>farthest-side<\/strong> \u1000\u102d\u102f sample css code \u1031\u101b\u1038\u103b\u1015\u1011\u102c\u1038\u1031\u1015\u1038\u1010\u101a\u1039\u1031\u1014\u102c\u1039\u104b\u1018\u101a\u1039\u101c\u102d\u102f\u1015\u1036\u102f\u1005\u1036\u1031\u101c\u1038 \u1031\u103b\u1015\u102c\u1004\u1039\u1038\u101c\u1032\u101e\u103c\u102c\u1038\u1019\u101c\u1032 \u1031\u1014\u102c\u1000\u1039\u1011\u1015\u1039 keywords \u1031\u1010\u103c\u1015\u102b\u1011\u100a\u1039\u1037\u101e\u1036\u102f\u1038\u1015\u102e\u1038\u1005\u1019\u1039\u1038\u107e\u1000\u100a\u1039\u1037\u1031\u1015\u1038\u1015\u102b\u1031\u1014\u102c\u1039\u104b<\/p>\n<h4>6.3.5 Repeating a radial-gradient<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">#grad {\r\n  background: red; \/* For browsers that do not support gradients *\/\r\n\r\n  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);\r\n\r\n  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);\r\n\r\n  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);\r\n\r\n  background: repeating-radial-gradient(red, yellow 10%, green 15%);\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-535\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot16-300x57.png\" alt=\"\" width=\"300\" height=\"57\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot16-300x57.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot16-768x146.png 768w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot16.png 798w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<hr>\n<h3>7.CSS3 Text Rotation<\/h3>\n<p>CSS3 \u1019\u103d\u102c text \u1031\u1010\u103c\u1000\u102d\u102f\u101c\u1032 \u1005\u102d\u1010\u1039\u1010\u102d\u102f\u1004\u1039\u1038\u1000\u103a rotate \u101c\u102f\u1015\u1039\u1014\u102d\u102f\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b Rotate \u101c\u102f\u1015\u1039\u1019\u101a\u1039\u1006\u102d\u102f\u101b\u1004\u1039 CSS3 Transform \u1000\u102d\u102f\u1021\u101e\u1036\u102f\u1038\u103b\u1015\u1033\u101b\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b\u1000\u102d\u102f\u101a\u1039 \u1031\u107f\u1015\u102c\u1004\u1039\u1038\u1001\u103a\u1004\u1039\u101e\u101c\u102d\u102f degree \u101e\u1036\u102f\u1038\u103b\u1015\u102e\u1038\u1031\u103b\u1015\u102c\u1004\u1039\u1038\u101c\u102d\u102f\u1037\u101b\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\nExample:<\/p>\n<pre class=\"brush: css; notranslate\">.txt_rotate1 {\r\n    -webkit-transform: rotate(180deg);\r\n    -moz-transform: rotate(180deg);\r\n    -o-transform: rotate(180deg);\r\n    writing-mode: rl-tb;\r\n}\r\n.h1 {\r\n-webkit-transform: rotate(90deg);\r\n-moz-transform: rotate(90deg);\r\n-o-transform: rotate(90deg);\r\nwriting-mode: lr-tb;\r\n}<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-571\" src=\"http:\/\/spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/CSS3-300x97.png\" alt=\"\" width=\"300\" height=\"97\" srcset=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/CSS3-300x97.png 300w, https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2017\/12\/CSS3.png 374w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<hr>\n<h3>8.CSS3 Animation<\/h3>\n<p>CSS3 Animation \u1000\u1031\u1031\u1010\u102c\u1094 Web Developer \u1031\u1010\u103c\u1014\u1032\u1094 designer \u1031\u1010\u103c \u1021\u1010\u103c\u1000\u1039 \u1021\u101b\u1019\u1039\u1038\u1021\u101e\u1036\u102f\u1038\u1040\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104bHTML Element \u1031\u1010\u103c\u1000\u102d\u102f JavaScript or Flash\u1019\u101e\u1036\u102f\u1038\u1015\u1032\u1014\u1032\u1094 animation \u1031\u1010\u103c\u103b\u1015\u1033\u101c\u102f\u1015\u1039\u1014\u102d\u102f\u1004\u1039\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<h4>8.1 CSS3 Animation \u1031\u1010\u103c\u1018\u101a\u1039\u101c\u102d\u102f \u1021\u101e\u1036\u102f\u1038\u103b\u1015\u1033\u1000\u103a\u1019\u101c\u1032?<\/h4>\n<p>CSS3 Animation \u101e\u1036\u102f\u1038\u1019\u101a\u1039\u1006\u102d\u102f\u101b\u1004\u1039<\/p>\n<ul>\n<li>some keyframes \u1031\u1010\u103c\u1000\u102d\u102f\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1031\u1015\u1038\u101b\u1015\u102b\u1019\u101a\u1039\u104b<\/li>\n<li>keyframe \u1000 \u1000\u102d\u102f\u101a\u1039 animation \u101c\u102f\u1015\u1039\u1001\u103a\u1004\u1039\u1010\u1032\u1037 style element \u1031\u1010\u103c\u1000\u102d\u102f \u1021\u101c\u102f\u1015\u1039\u101c\u102f\u1015\u1039\u1031\u1015\u1038\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/li>\n<\/ul>\n<p><em><strong>\u101e\u1010\u102d\u1011\u102c\u1038\u101b\u1019\u103d\u102c\u1000\u1031\u1010\u102c\u1094 Default \u1021\u1031\u1014\u1014\u1032\u1094 Animation duation \u1000 0 \u103b\u1016\u1005\u1039\u1010\u1032\u1037\u1021\u1010\u103c\u1000\u1039 animation \u1000\u102d\u102f\u1018\u101a\u1039\u1021\u1001\u103a\u102d\u1014\u1039\u1011\u102d\u101c\u102f\u1015\u1039\u1031\u1005\u1001\u103a\u1004\u1039\u1010\u102c\u101c\u1032\u1006\u102d\u102f\u1010\u1032\u1037 animation duration property \u1000\u102d\u102f \u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1031\u1015\u1038\u101b\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/strong><\/em><\/p>\n<p>Animation \u1021\u1010\u103c\u1000\u1039 keyframes \u101e\u1010\u1039\u1019\u103d\u1010\u1039 \u1031\u1015\u1038\u101b\u1019\u101a\u1039\u1006\u102d\u102f\u1031\u1010\u102c\u1095 Keyframes rule \u1031\u1010\u103c\u101b\u103d\u102d\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<p><strong>Animation \u1021\u101c\u102f\u1015\u1039\u101c\u102f\u1015\u1039\u1016\u102d\u102f\u1094\u1021\u1010\u103c\u1000\u1039 animation \u1014\u1032\u1094 style element \u1031\u1010\u103c\u1000\u102d\u102f \u1001\u103a\u102d\u1010\u1039\u1031\u1015\u1038\u101b\u1019\u103d\u102c\u1015\u102b\u104b \u1021\u1032\u1094\u101c\u102d\u102f\u1001\u103a\u102d\u1010\u1039\u1010\u1032\u1037 \u1021\u101c\u102f\u1015\u1039\u1000\u102d\u102f Keyframes \u1000 \u101c\u102f\u1015\u1039\u1031\u1006\u102c\u1004\u1039\u1031\u1015\u1038\u1010\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/strong><br \/>\nExample:<\/p>\n<pre class=\"brush: css; notranslate\">@keyframes example {\r\n    from {background-color: red;}\r\n    to {background-color: yellow;}\r\n}\r\ndiv {\r\nwidth: 100px;\r\nheight: 100px;\r\nbackground-color: red;\r\nanimation-name: example;\r\nanimation-duration: 4s;\r\n} \r\n<\/pre>\n<p>Example \u1021\u101b animation-name \u1000 <strong>example<\/strong>\u103b\u1016\u1005\u1039\u1010\u1032\u1037\u1021\u1010\u103c\u1000\u1039 @keyframes \u101b\u1032\u1095 \u1014\u102c\u1019\u100a\u1039\u1000\u101c\u1032 <strong>example<\/strong>\u103b\u1016\u1005\u1039\u1031\u1014\u101b\u1015\u102b\u1019\u101a\u1039\u104b<br \/>\n<em>Note: animation-name \u1014\u1032\u1094 @keyframes name \u1000 \u1010\u1030\u1031\u1014\u101b\u1015\u102b\u1019\u101a\u1039\u104b<\/em><\/p>\n<h4>8.2 Delay an Animation<\/h4>\n<p>Animation \u1010\u1005\u1039\u1001\u102f \u1016\u1014\u1039\u1010\u102e\u1038\u101c\u103d\u103a\u1004\u1039 <strong>animation-delay<\/strong> properties \u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1031\u1015\u1038\u1016\u102d\u102f\u1094 \u101c\u102d\u102f\u1021\u1015\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">div {\r\nwidth: 100px;\r\nheight: 100px;\r\nposition: relative;\r\nbackground-color: red;\r\nanimation-name: example;\r\nanimation-duration: 4s;\r\nanimation-delay: 2s;\r\n} \r\n<\/pre>\n<h4>8.3 Set How Many Times an Animation Should Run<\/h4>\n<p>Animation \u1010\u1005\u1039\u1001\u102f \u1016\u1014\u1039\u1010\u102e\u1038\u101c\u103d\u103a\u1004\u1039  animation \u1021\u107e\u1000\u102d\u1019\u1039\u1021\u1031\u101b\u1021\u1010\u103c\u1000\u1039\u1000\u102d\u102f\u101c\u1032 \u1000\u102d\u102f\u101a\u1039\u1037\u1005\u102d\u1010\u1039\u1010\u102d\u102f\u1004\u1039\u1038\u1000\u103a\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1031\u1015\u1038\u108f\u1030\u102d\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">div {\r\nwidth: 100px;\r\nheight: 100px;\r\nposition: relative;\r\nbackground-color: red;\r\nanimation-name: example;\r\nanimation-duration: 4s;\r\nanimation-delay: 2s;\r\nanimation-iteration-count:3;\r\n} \r\n<\/pre>\n<p>Example \u1021\u101b animation-iteration-count:3 \u107e\u1000\u102d\u1019\u1039\u1031\u1015\u1038\u1011\u102c\u1038\u1010\u1032\u1037\u1021\u1010\u103c\u1000\u1039 animation \u1000 3 \u107e\u1000\u102d\u1019\u1039 \u1021\u101c\u102f\u1015\u1039\u101c\u102f\u1015\u1039\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<h4>8.4 Animation Direction<\/h4>\n<p>\u1000\u102d\u102f\u101a\u1039\u1016\u1014\u1039\u1010\u102e\u1038\u101c\u102d\u102f\u1000\u1039\u1010\u1032\u1037 Animation \u101b\u1032\u1095 direction \u1000\u102d\u102f\u101c\u1032 \u101e\u1010\u1039\u1019\u103d\u1010\u1039\u101c\u102d\u102f\u1095\u101b\u1015\u102b\u1031\u101e\u1038\u1010\u101a\u1039\u104b<br \/>\nThe animation-direction \u1000\u1031\u1010\u102c\u1094\u1031\u1021\u102c\u1000\u1039\u1015\u102b\u1021\u1010\u102d\u102f\u1004\u1039\u1038 keyword \u1031\u1010\u103c\u101b\u103d\u102d\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>normal &#8211; The animation is played as normal (forwards). This is default<\/li>\n<li>reverse &#8211; The animation is played in reverse direction (backwards)<\/li>\n<li>alternate &#8211; The animation is played forwards first, then backwards<\/li>\n<li>alternate-reverse &#8211; The animation is played backwards first, then forwards<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"brush: css; notranslate\" title=\"\">div {\r\nwidth: 100px;\r\nheight: 100px;\r\nposition: relative;\r\nbackground-color: red;\r\nanimation-name: example;\r\nanimation-duration: 4s;\r\nanimation-delay: 2s;\r\nanimation-direction: reverse;\r\n} \r\n<\/pre>\n<p>Example \u1021\u101b animation-direction \u1000\u102d\u102f reverse \u1031\u1015\u1038\u1011\u102c\u1038\u1010\u1032\u1094\u1021\u1010\u103c\u1000\u1039 \u1000\u102d\u102f\u101a\u1039\u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1011\u102c\u1038\u1010\u1032\u1037 animation value \u1031\u1010\u103c\u1000 \u1031\u103b\u1015\u102c\u1004\u1039\u1038\u103b\u1015\u1014\u1039\u1021\u101c\u102f\u1015\u1039\u101c\u102f\u1015\u1039\u101e\u103c\u102c\u1038\u1019\u103d\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<h4>8.5 Specify the Speed Curve of the Animation<\/h4>\n<p>CSS3 Transition \u1010\u102f\u1014\u1039\u1038\u1000\u101c\u102d\u102f\u1015\u1032 timing-function \u1000\u102d\u102f \u101e\u1010\u1039\u1019\u103d\u1010\u1039\u1031\u1015\u1038\u101c\u102d\u102f\u1037\u101b\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\nThe transition-timing-function property can have the following values:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>ease &#8211; specifies a transition effect with a slow start, then fast, then end slowly (this is default)<\/li>\n<li>linear &#8211; specifies a transition effect with the same speed from start to end<\/li>\n<li>ease-out &#8211; specifies a transition effect with a slow end<\/li>\n<li>ease-in-out &#8211; specifies a transition effect with a slow start and end<\/li>\n<li>cubic-bezier(n,n,n,n) &#8211; lets you define your own values in a cubic-bezier function<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4>8.6Animation Shorthand Property<\/h4>\n<p>CSS3 transition properties can be specified one by one, like this:<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">div {\r\nanimation-name: example;\r\nanimation-duration: 5s;\r\nanimation-timing-function: linear;\r\nanimation-delay: 2s;\r\nanimation-iteration-count: infinite;\r\nanimation-direction: alternate;\r\n}\r\n<\/pre>\n<p>or by using the shortand property transition<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">div {\r\nanimation: example 5s linear 2s infinite alternate;\r\n}\r\n<\/pre>\n<hr>\n<h3>9.CSS3 Text Shadow<\/h3>\n<p>The CSS3 text-shadow property applie shadow to text.<\/p>\n<h4>9.1 How to Use Text Shadow<\/h4>\n<p>In its simplest use, you only specify the horizontal shadow and the vertical shadow.<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">h1 { \r\ntext-shadow: 2px 2px;\r\n}<\/pre>\n<h4>9.2 Text Shadow With Color And Blur Effect<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">h1 {\r\n text-shadow: 2px 2px 5px red;\r\n}\r\n<\/pre>\n<h4>9.3 Multiple Shadows <\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">h1 {\r\n text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;\r\n}\r\n<\/pre>\n<pre class=\"brush: css; notranslate\" title=\"\">h1 {\r\n color: white;\r\n text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;\r\n}\r\n<\/pre>\n<hr>\n<h3>10.CSS3 Box Shadow<\/h3>\n<p>The box-shadow property attaches one or more shadows to an element.<\/p>\n<h4>10.1 How to Use Box Shadow<\/h4>\n<p>In its simplest use, you only specify the horizontal shadow and the vertical shadow.<\/p>\n<pre class=\"brush: css; notranslate\" title=\"\">div {\r\nbox-shadow: 10px 10px;\r\n}\r\n<\/pre>\n<h4>10.2 Box Shadow With Color And Blur Effect<\/h4>\n<pre class=\"brush: css; notranslate\" title=\"\">div {\r\nbox-shadow: 10px 10px 5px grey;\r\n}<\/pre>\n<p>CSS3 \u1014\u1032\u1094 \u1015\u1010\u1039\u101e\u1000\u1039\u103b\u1015\u102e\u1038 \u100a\u102e\u1019\u101e\u102d\u101e\u1031\u101c\u102c\u1000\u1039 \u1031\u103b\u1015\u102c\u103b\u1015\u1031\u1015\u1038\u101e\u103c\u102c\u1038\u1010\u102c\u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b<\/p>\n<p><a href=\"https:\/\/www.toptal.com\/developers\/css3maker\" target=\"_blank\">https:\/\/www.toptal.com\/developers\/css3maker <\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\">http:\/\/www.w3school.com\/css<\/a><\/p>\n<p>\u100a\u102e\u1019\u1031\u101c\u1094\u101c\u102c\u1010\u1032\u1094 Web Site link \u1000\u102d\u102f\u101c\u1032\u1031\u103b\u1015\u102c\u103b\u1015\u1031\u1015\u1038\u1011\u102c\u1038\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n\u100a\u102e\u1019\u1000\u102d\u102f\u101a\u1039\u1010\u102d\u102f\u1004\u1039\u101c\u1032\u1031\u101c\u1037\u101c\u102c\u1031\u1014\u1006\u1032\u1019\u102d\u102f\u1094CSS3 \u1031\u101c\u1094\u101c\u102c\u1010\u1032\u1094 \u101c\u1030\u1031\u1010\u103c \u1021\u1001\u1000\u1039\u1021\u1001\u1032 \u1019\u101b\u103d\u102d\u1031\u101c\u1037\u101c\u102c\u108f\u102d\u102f\u1004\u1039\u1031\u1021\u102c\u1004\u1039 \u1010\u1005\u1039\u1031\u1011\u102c\u1004\u1039\u1037\u1010\u1005\u1039\u1031\u1014\u101b\u102c\u1000 \u1021\u1000\u1030\u100a\u102e\u101b\u1014\u102d\u102f\u1004\u1039\u1019\u101a\u1039\u101c\u102d\u102f\u1094 \u1031\u1019\u103d\u103a\u102c\u1039\u101c\u1004\u1039\u1037\u1015\u102b\u1010\u101a\u1039\u104b<br \/>\n\u1031\u1014\u102c\u1000\u1039\u1011\u1015\u1039\u101c\u1032 \u1031\u101c\u1037\u101c\u102c\u103b\u1016\u1005\u1039\u1010\u102c\u1031\u101c\u1038\u1031\u1010\u103c Sharing \u101c\u102f\u1015\u1039\u1031\u1015\u1038\u101e\u103c\u102c\u1038\u1015\u102b\u1037\u1019\u101a\u1039\u1031\u1014\u102c\u1039\u104b<\/p>\n<p>\u1021\u102c\u1038\u101c\u1036\u102f\u1038\u1000\u102d\u102f \u1031\u1000\u103a\u1038\u1007\u1030\u1038\u1010\u1004\u1039\u1015\u102b\u1010\u101a\u1039\u101b\u103d\u1004\u1039\u1037\u104b<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u100a\u102e\u1019\u1000\u1031\u1010\u102c\u1037 Spiceworks Myanmar company \u1019\u103d\u102c Web Designer \u1021\u103b\u1016\u1005\u1039\u1040\u1004\u1039\u1031\u101b\u102c\u1000\u1039\u101c\u102f\u1015\u1039\u1000\u102d\u102f\u1004\u1039\u1031\u1014\u1010\u1032\u1037 \u1019\u1006\u102f\u101b\u100a\u1039\u1011\u103c\u1014\u1039\u1038 \u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b \u103b\u1015\u102e\u1038\u1001\u1032\u1037\u1010\u1032\u1037 \u1010\u1005\u1039\u1031\u1001\u102b\u1000\u1039\u1000 1. Browser Define 2. CSS transition 3. RGBA<\/p>\n","protected":false},"author":25,"featured_media":938,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS3 Knowledge and Examples Part 2 - Web Development &amp; Tech Blog | Spiceworks Myanmar<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS3 Knowledge and Examples Part 2 - Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"og:description\" content=\"\u100a\u102e\u1019\u1000\u1031\u1010\u102c\u1037 Spiceworks Myanmar company \u1019\u103d\u102c Web Designer \u1021\u103b\u1016\u1005\u1039\u1040\u1004\u1039\u1031\u101b\u102c\u1000\u1039\u101c\u102f\u1015\u1039\u1000\u102d\u102f\u1004\u1039\u1031\u1014\u1010\u1032\u1037 \u1019\u1006\u102f\u101b\u100a\u1039\u1011\u103c\u1014\u1039\u1038 \u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b \u103b\u1015\u102e\u1038\u1001\u1032\u1037\u1010\u1032\u1037 \u1010\u1005\u1039\u1031\u1001\u102b\u1000\u1039\u1000 1. Browser Define 2. CSS transition 3. RGBA\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development &amp; Tech Blog | Spiceworks Myanmar\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-28T21:10:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-06T07:23:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/03\/cover_css3_pt_two.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"366\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Su Yee Htun\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Su Yee Htun\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/\"},\"author\":{\"name\":\"Su Yee Htun\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/2010bdf4c188662cb592c96ea17b2561\"},\"headline\":\"CSS3 Knowledge and Examples Part 2\",\"datePublished\":\"2018-03-28T21:10:37+00:00\",\"dateModified\":\"2022-10-06T07:23:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/\"},\"wordCount\":554,\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/cover_css3_pt_two.jpg\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/\",\"name\":\"CSS3 Knowledge and Examples Part 2 - Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/cover_css3_pt_two.jpg\",\"datePublished\":\"2018-03-28T21:10:37+00:00\",\"dateModified\":\"2022-10-06T07:23:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/2010bdf4c188662cb592c96ea17b2561\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/cover_css3_pt_two.jpg\",\"contentUrl\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/cover_css3_pt_two.jpg\",\"width\":700,\"height\":366},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/css3-knowledge-and-examples-part-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Knowledge and Examples Part 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/\",\"name\":\"Web Development &amp; Tech Blog | Spiceworks Myanmar\",\"description\":\"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/#\\\/schema\\\/person\\\/2010bdf4c188662cb592c96ea17b2561\",\"name\":\"Su Yee Htun\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g\",\"caption\":\"Su Yee Htun\"},\"url\":\"https:\\\/\\\/www.spiceworksmyanmar.com\\\/blog\\\/author\\\/su-yee-htun\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS3 Knowledge and Examples Part 2 - Web Development &amp; Tech Blog | Spiceworks Myanmar","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/","og_locale":"en_US","og_type":"article","og_title":"CSS3 Knowledge and Examples Part 2 - Web Development &amp; Tech Blog | Spiceworks Myanmar","og_description":"\u100a\u102e\u1019\u1000\u1031\u1010\u102c\u1037 Spiceworks Myanmar company \u1019\u103d\u102c Web Designer \u1021\u103b\u1016\u1005\u1039\u1040\u1004\u1039\u1031\u101b\u102c\u1000\u1039\u101c\u102f\u1015\u1039\u1000\u102d\u102f\u1004\u1039\u1031\u1014\u1010\u1032\u1037 \u1019\u1006\u102f\u101b\u100a\u1039\u1011\u103c\u1014\u1039\u1038 \u103b\u1016\u1005\u1039\u1015\u102b\u1010\u101a\u1039\u104b \u103b\u1015\u102e\u1038\u1001\u1032\u1037\u1010\u1032\u1037 \u1010\u1005\u1039\u1031\u1001\u102b\u1000\u1039\u1000 1. Browser Define 2. CSS transition 3. RGBA","og_url":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/","og_site_name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","article_published_time":"2018-03-28T21:10:37+00:00","article_modified_time":"2022-10-06T07:23:39+00:00","og_image":[{"width":700,"height":366,"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/03\/cover_css3_pt_two.jpg","type":"image\/jpeg"}],"author":"Su Yee Htun","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Su Yee Htun","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/#article","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/"},"author":{"name":"Su Yee Htun","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/2010bdf4c188662cb592c96ea17b2561"},"headline":"CSS3 Knowledge and Examples Part 2","datePublished":"2018-03-28T21:10:37+00:00","dateModified":"2022-10-06T07:23:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/"},"wordCount":554,"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/03\/cover_css3_pt_two.jpg","articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/","name":"CSS3 Knowledge and Examples Part 2 - Web Development &amp; Tech Blog | Spiceworks Myanmar","isPartOf":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/#primaryimage"},"image":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/#primaryimage"},"thumbnailUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/03\/cover_css3_pt_two.jpg","datePublished":"2018-03-28T21:10:37+00:00","dateModified":"2022-10-06T07:23:39+00:00","author":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/2010bdf4c188662cb592c96ea17b2561"},"breadcrumb":{"@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/#primaryimage","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/03\/cover_css3_pt_two.jpg","contentUrl":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-content\/uploads\/2018\/03\/cover_css3_pt_two.jpg","width":700,"height":366},{"@type":"BreadcrumbList","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/css3-knowledge-and-examples-part-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.spiceworksmyanmar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS3 Knowledge and Examples Part 2"}]},{"@type":"WebSite","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#website","url":"https:\/\/www.spiceworksmyanmar.com\/blog\/","name":"Web Development &amp; Tech Blog | Spiceworks Myanmar","description":"Read Spiceworks Myanmar\u2019s blog on web development, design trends, and IT solutions. Stay informed with tips and insights from our experienced developers.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.spiceworksmyanmar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.spiceworksmyanmar.com\/blog\/#\/schema\/person\/2010bdf4c188662cb592c96ea17b2561","name":"Su Yee Htun","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/058b6aef84ef5816de8b8f0bd979f5f96873b0bae29c62f4df765e1366fdfdde?s=96&d=mm&r=g","caption":"Su Yee Htun"},"url":"https:\/\/www.spiceworksmyanmar.com\/blog\/author\/su-yee-htun\/"}]}},"_links":{"self":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/comments?post=868"}],"version-history":[{"count":19,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/868\/revisions"}],"predecessor-version":[{"id":8459,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/posts\/868\/revisions\/8459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media\/938"}],"wp:attachment":[{"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/media?parent=868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/categories?post=868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.spiceworksmyanmar.com\/blog\/wp-json\/wp\/v2\/tags?post=868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}