Design

How To Use The CSS Clip-Path Property

မဂၤလာပါခင္ဗ်ာ။
ကၽြန္ေတာ္ကေတာ့ Spiceworks Myanmar ကုမၸဏီတြင္ Web Designer အျဖစ္ ဝင္ေရာက္ လုပ္ကိုင္လ်က္ရွိေသာ ေက်ာ္စိုးႏိုင္ ျဖစ္ပါတယ္။ ဒီတစ္ပတ္မွာေတာ့ CSS property တစ္ခုျဖစ္ေသာ clip-path အေၾကာင္းကို မွ်ေဝေပးခ်င္ပါတယ္ခင္ဗ်။

What is clip-path?
clip-path ဆိုသည္မွာ ႐ုပ္ပုံေတြနဲ႔ vector image format ျဖစ္ေသာ SVG (scalable vector graphics) ေတြကို လိုအပ္သလို clip လုပ္ႏိုင္ၿပီး စိတ္ဝင္စားစရာေကာင္းေအာင္ shape အမ်ိဳးမ်ိဳးကို ဖန္တီးႏိုင္ေသာ property ျဖစ္ပါတယ္။

Shape အမ်ိဳးမ်ိဳး create လုပ္ႏိုင္ရန္ clip-path မွာ value အေနနဲ႔ basic shape ( ၄) မ်ိဳးျဖင့္ သတ္မွတ္ထားပါတယ္။ Basic shapes ( ၄) မ်ိဳးကေတာ့
1.polygon
2.ellipse
3.circle ႏွင့္
4.inset
တို႔ဘဲျဖစ္ပါတယ္။

1.Polygon
Polygon ကို အသုံးျပဳမည္ဆိုရင္ flexible ျဖစ္ေသာ shape အမ်ိဳးမ်ိဳးကို point မ်ားသတ္မွတ္ၿပီး အသုံးျပဳႏိုင္ပါတယ္။ Points မ်ားက svg path နဲ႔တူၿပီး point မ်ားကို editing လုပ္မည္ဆိုရင္ svg ပုံကို sublime text editor မွာထည့္ၿပီး points မ်ားကို edit လုပ္ႏိုင္ပါတယ္ခင္ဗ်။ Polygon မွဆိုရင္ support လုပ္ေပးႏိုင္ေသာ point အေနျဖင့္ X coordinate ႏွင့္ Y coordinate ဆိုၿပီး တစ္ခုအေနျဖင့္ အသုံးျပဳႏိုင္ပါသည္။ Example အေနျဖင့္ Triangle Shape တစ္ခုကို clip-path တန္ဖိုးျဖစ္တဲ့ polygon ကို အသုံးျပဳၿပီး create လုပ္ထားပါတယ္ခင္ဗ်။
ေအာက္ပါပုံေလးကို ၾကည့္ၿပီး triangle shape ေလးတစ္ခု create လုပ္ႏိုင္မွာဘဲျဖစ္ပါတယ္။
n
Triangle ကို create လုပ္ၿပီး နားလည္ၿပီဆိုရင္ေတာ့ cross shape ႏွင့္ star shape စတဲ့ shape အမ်ိဳးမ်ိဳးကိုလည္း create လုပ္ႏိုင္ပါသည္။
ေအာက္ပါ polygon m‎aker link ကေန တစ္ဆင့္ shape အမ်ိဳးမ်ိဳးကို create လုပ္ႏိုင္ပါသည္။
https://bennettfeely.com/clippy/

2.Circle
Circle ကေတာ့႐ိုးရွင္းၿပီး circle ဆိုသည္အတိုင္း radius ေပၚအေျခခံၿပီး shape မ်ားကို position X ႏွင့္ position Y ဆိုၿပီး သတ္မွတ္အသုံးျပဳႏိုင္ပါသည္။ Default တန္ဖိုးအေနျဖင့္ position က optional ျဖစ္ၿပီး radius 50% 50% ကိုအသုံးျပဳႏိုင္ပါတယ္။ Example အေနနဲ႔ ေအာက္ပါပုံအတိုင္း create လုပ္ၿပီးအသုံးျပဳႏိုင္ပါတယ္ခင္ဗ်။
n
3.Ellipse
Eclipse မွာဆိုရင္ syntax အေနနဲ႔ radius X radius Y ႏွင့္ position X position Y ဆိုၿပီး အသုံးျပဳႏိုင္ပါသည္။Default အေနျဖင့္ position တန္ဖိုးက optional ျဖစ္ၿပီး circle ႏွင့္အတူတူ 50% 50% အသုံးျပဳႏိုင္ပါသည္။
n
4.Inset
Inset ကိုေတာ့ အမ်ားအားျဖင့္ rectangle ရဲ႕ inner အပိုင္းႏွင့္ ပုံေတြကို crop လုပ္ၿပီး ျဖတ္ထုတ္တဲ့ အပိုင္းမွာအသုံးျပဳႏိုင္ပါသည္။ Example အေနျဖင့္ေအာက္ပါတိုင္း create ၿပီး အသုံးျပဳႏိုင္ပါတယ္ခင္ဗ်။
n
အခု clip-path ရဲ႕ basic shape (၄) မ်ိဳး အေၾကာင္းကိုေလ့လာသိရွိၿပီးေနာက္ ကြၽန္ေတာ္က အသုံးမ်ားတဲ့ clip path အမ်ိဳးအစား polygon ႏွင့္ circle ကိုအသုံးျပဳၿပီး animation ေလးျပဳလုပ္ပုံအဆင့္ဆင့္ကို ရွင္းျပသြားပါမည္။
ပထမအဆင့္အေနနဲ႔ ကြၽန္ေတာ္က HTML file တစ္ file create လုပ္ၿပီး Hello ဆိုတဲ့ Text ေလးကို create လုပ္ထားပါတယ္ခင္ဗ်။
n
ေနာက္ၿပီး text ေလးကို လိုအပ္ေသာ CSS ေလးနဲ႔ အလွဆင္ေရးသားထားပါမည္။
အခုဆိုရင္ css နဲ႔ create လုပ္ထားတဲ့ Hello ဆိုေသာ text ေလးကိုျမင္ရမွာျဖစ္ပါတယ္။
n
အခု ဒီ “Hello” text ေလးမွာ clip-path polygon animation ေလးထည့္ဖို႔အတြက္ ပထမဆုံး clip-path maker တြင္ မိမိလိုခ်င္ေသာပုံစံကို create လုပ္ၿပီးေနာက္ ထိုပုံစံအတြက္ point မ်ားကို ရရွိလာမည္ျဖစ္ပါသည္။ ဥပမာအားျဖင့္ ကြၽန္ေတာ္ကေတာ့ အနိမ့္အျမင့္မတူေသာ wave ပုံစံႏွစ္ခုကို create လုပ္ပါမည္။ ၎ေနာက္တြင္ wave ပုံစံႏွစ္ခုအတြက္ point မ်ားရရွိလာပါမည္။
n
ရရွိလာေသာ point မ်ားကို အသုံးျပဳၿပီး css animation @keyframe ထည့္ၿပီး wave animation တစ္ခုကို ေအာက္ပါ code အတိုင္း ဆက္ေရးသြားပါမည္။
n
အခုဆိုရင္ clip-path value polygon ကို အသုံးျပဳၿပီး ေအာက္ပါပုံအတိုင္း Polygon animation wave တစ္ခုကို ျမင္ရပါလိမ့္မည္။
n
coding file အျပည့္အစုံကိုေတာ့ ေအာက္မွာ ဝင္ၿပီး testing လုပ္လို႔ရပါတယ္ခင္ဗ်။

 

	
		body{
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			background: #000;
		}
		.content{
			position: relative;
		}
		h1{
			position: absolute;
			color: #fff;
			transform: translate(-50%,-50%);
			font-size:9em;
		}
		h1:nth-child(2){
			color: rgb(7,218,165);
			animation: animate 4s ease-in-out infinite;
		}
		@keyframes animate{
			0%,100%{
				clip-path: polygon(0% 45%, 15% 44%, 32% 50%,54% 60%, 70% 61%,84% 59%,100% 52%,100% 100%,0%100%);
			}
			50%{
				clip-path: polygon(0% 60%,16% 65%,34% 66%,51% 62%,67% 50%,84% 59%,100% 46%,100% 100%,0% 100%);
			}
		}
 

HELLO

HELLO

ေနာက္တစ္ခု အသုံးမ်ားတဲ့ clip-path အမ်ိဳးအစားကေတာ့ circle clip-path ျဖစ္ပါသည္။ circle clip-path hover effect ကိုလည္း အထက္မွာ create လုပ္ခဲ့သလို HTML ႏွင့္ CSS ကိုအသုံးျပဳၿပီး circle hover effect တစ္ခုကို ေအာက္ပါ ပုံအတိုင္း ေလ့လာၿပီး create လုပ္ႏိုင္ပါတယ္ခင္ဗ်။ coding အျပည္အစုံကိုလည္း ဝင္ေရာက္ေလ့လာၿပီး testing လုပ္လို႔ရပါတယ္ခင္ဗ်။ n

 

Hi

Spiceworks Myanmar is the Japan & Myanmar joint web design and development company with clients around Japan.
 
body{
	background: #DCF5FF;
	margin: 0;
	height: 100vh;
	display: grid;
	justify-items:center;
	align-items:center;
	font-family: 'Roboto', sans-serif;
	font-weight: normal;
	
}
.inner{
	background: rgb(7,218,165);
	padding: 10px;
	border-radius: 10px;
	width: 300px;
	clip-path: circle(5% at 90% 20%);
	transition: .7s ease-in-out;
	cursor: pointer;
	position: relative;
	top: 0;
	
}
.inner:hover{
	clip-path: circle(75%);
	background: #00B6FF;
}
h1{
	color: white;
	margin: 0;
	font-size: 25px;
}
p{
	color: white;
	font-size: 18px;
}

clip-path အသုံးျပဳခ်င္သူမ်ားအေနျဖင့္ clip-path ကို အသုံးျပဳမည္လို႔စဥ္းစားမိလွ်င္သိထားရမယ့္ အခ်က္တစ္ခုလည္းရွိပါတယ္ခင္ဗ်။ clip-path css သည္ browser support အေနျဖင့္ 2020 မွာ အကုန္အလုပ္လုပ္ႏိုင္ေပမယ့္လည္း safari နဲ႔ IE မွာေတာ့ support လုပ္ေပးႏိုင္ရန္ လိုအပ္ေနဆဲျဖစ္ပါတယ္ခင္ဗ်။

အခုလို အခ်ိန္ေပးၿပီး ဂ႐ုတစိုက္ဖတ္ရႈေပးတဲ့ အတြက္ ေက်းဇူးတင္ပါတယ္ခင္ဗ်။

Hello

Leave a Reply

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