এসভিজি থেকে সিএসএস শেপ রূপান্তরকারী

শেপ মাস্টার টেমানি আফিফ কি হতে পারে সিএসএস আকারের বৃহত্তম সংগ্রহ গ্রহে সমস্ত সরঞ্জাম সহ এগুলি উড়তে তৈরি করার জন্য। তিনি সাধারণত সেই আকারগুলি তৈরি করতে ব্যবহৃত চতুর কৌশলগুলির একটি মিশ্রণ রয়েছে, যার মধ্যে অনেকগুলি তিনি এখানে কয়েক বছর ধরে সিএসএস-ট্রিক্সে আচ্ছাদিত।

আরও কিছু জটিল আকার সাধারণত ক্লিপ করা হত path() ফাংশন। এটি অনেক অর্থবোধ করে কারণ এটি আক্ষরিক অর্থে এসভিজি গ্রহণ করে path সমন্বয় করে যে আপনি ফিগমা এবং রফতানির মতো কোনও অ্যাপ্লিকেশন আঁকতে পারেন।

তবে তেমানি সদ্য-প্রকাশিতদের সর্বদাই চলে গেছে shape() ফাংশন যা সম্প্রতি ক্রোমিয়াম ব্রাউজার এবং সাফারি উভয় ক্ষেত্রেই রোল আউট হয়েছে। এটি অন্তর্ভুক্ত একটি ব্র্যান্ড-নতুন জেনারেটর যা রূপান্তর করে path() আকার shape() কমান্ড পরিবর্তে।

সুতরাং, যদি আমাদের এমন একটি আকার থাকে যা মূলত একটি এসভিজি দিয়ে তৈরি করা হয়েছিল pathএটি পছন্দ:

.shape {
  clip-path: path(
    M199.6,18.9
    c-4.3-8.9-12.5-16.4-22.3-17.8
    c-11.9-1.7-23.1,5.4-32.2,13.2
    c-9.1,7.8-17.8,16.8-29.3,20.3
    c-20.5,6.2-41.7-7.4-63.1-7.5
    c38.7,27,24.8,33,15.2,43.3
    c-35.5,38.2-0.1,99.4,40.6,116.2
    c32.8,13.6,72.1,5.9,100.9-15
    c27.4-19.9,44.3-54.9,47.4-88.6
    c0.2-2.7,0.4-5.3,0.5-7.9
    c204.8,38,203.9,27.8,199.6,18.9
    z
  );
}

… জেনারেটর এটি থুতু ফেলবে:

.shape {
  clip-path: shape(
    from 97.54% 10.91%,
    curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,
    curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,
    curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,
    curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,
    curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,
    curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,
    curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,
    curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,
    curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,
    curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,
    close
  );
}

বেশ শীতল!

সত্যিই, আমি নিশ্চিত না যে আমাকে কতবার রূপান্তর করতে হবে path() থেকে shape()। স্টপগ্যাপ বাছাই জিনিসটির মতো মনে হচ্ছে যেখানে সময়ের সাথে সাথে এটির প্রয়োজন হ্রাস পায় shape() আরও প্রায়শই ব্যবহৃত হয় – এবং এটি বিদ্যমানগুলির মতো নয় path() ফাংশনটি ভাঙা বা অবমূল্যায়ন করা হয় … এটি ঠিক আলাদা। তবে তবুও, আমি জেনারেটরটিকে অনেকটা ব্যবহার করছি আমি আমার মাথা চারপাশে জড়ানোর চেষ্টা করি shape() কমান্ড। কমান্ডগুলি প্রসঙ্গে দেখা অমূল্য যা এটিকে একটি দুর্দান্ত শেখার সরঞ্জাম করে তোলে।

সরাসরি লিঙ্ক →