ماسک گرادیان (Masking-Gradients)
در «ماسک گرادیان» از گرادیان ها به عنوان «ماسک (Mask)» استفاده می کنیم. ماسک، بخش هایی از عنصر را نامرئی یا کم رنگ می کند. این کار با ویژگی «ماسک-ایمیج (mask-image)» انجام می شود.
ماسک با گرادیان خطی (Linear Gradient)
گرادیان خطی یعنی تغییر رنگ در یک خط. اینجا از سیاه تا شفاف می رویم. سیاه یعنی دیده نشدن؛ شفاف یعنی نمایش کامل.
.mask1 {\n -webkit-mask-image: linear-gradient(black, transparent);\n mask-image: linear-gradient(black, transparent);\n}\nماسک خطی روی پس زمینه متن
می توانیم تصویر را پس زمینه کنیم و با گرادیان، بالایش را محو کنیم. این کار برای اسکرول نرم متن عالی است.
.mask1 {\n max-width: 600px;\n height: 400px;\n background: url(img_5terre.jpg) no-repeat;\n -webkit-mask-image: linear-gradient(black, transparent);\n mask-image: linear-gradient(black, transparent);\n}\nماسک گرادیان شعاعی دایره ای (Radial Circle)
گرادیان شعاعی یعنی از مرکز به اطراف تغییر رنگ می کند. شکل «دایره» یک پنجره گرد می سازد.
.mask2 {\n -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);\n mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);\n}\nماسک گرادیان شعاعی بیضی (Radial Ellipse)
بیضی برای تصاویر افقی یا عمودی مناسب تر است. چون قاب را نرم تر می کند.
.mask3 {\n -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);\n mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);\n}\nماسک گرادیان مخروطی (Conic)
گرادیان مخروطی دور تا دور می چرخد. برای وینیت چرخشی یا برش های زاویه دار خوب است.
.mask3 {\n -webkit-mask-image: conic-gradient(black 0deg, transparent 360deg);\n mask-image: conic-gradient(black 0deg, transparent 360deg);\n}\nنکته: مقدار سیاه یعنی پنهان سازی بیشتر. هرچه شفاف تر، نمایش بیشتر. پس با توقف های گرادیان، شدت ماسک را کنترل کن.
گام های عملی سریع
- عنصر یا تصویر را انتخاب کن.
mask-imageرا با نوع گرادیان تنظیم کن.- توقف های رنگی را برای مرز نرم تعیین کن.
- در صورت نیاز، اندازه و موقعیت را تغییر بده.
جمع بندی سریع
- ماسک گرادیان برش نرم و زیبا می دهد.
- Linear برای محو عمودی یا افقی عالی است.
- Radial دایره و بیضی می سازد.
- Conic جلوه چرخشی ایجاد می کند.
برای ادامه «ماسک گرادیان» به ماسک PNG و object-position هم سر بزن تا قاب بندی بهتر شود.