Menu
97 35 94 66  info@samiaco.ir
11

نمونه های شگفت انگیز از ماسک های SVG در طراحی سایت

نمونه های شگفت انگیز از ماسک های SVG در طراحی سایت

طراحان می توانند برخی از طرح های زیبا را با SVG و ماسک های SVG ایجاد نمایند این تکنیک ها چند سالی است در بین طراحان مورد استفاده قرار می گیرد و طرفداران زیادی را نیز به خود جذب کرده است ما در این مقاله می خواهیم به برخی از آن ها بپردازیم .

Button Hovers : همیشه این دکمه ها یکی از دکمه های محبوب طراحان بوده است چرا که وقتی کاربر موس خود را بر روی آن می برد حس تو رفتگی این دکمه ها تاثیر مثبت و عمیقی در احساسات کاربران ایجاد می کند با استفاده از ماسک می توان این نوع دکمه ها را بهتر و زیباتر هنگام طراحی استفاده کرد و طرح های بیشتر با انیمیشن های خلاقانه به وجود آورد .

 

Text Masking : یک مثال شفاف و ساده می تواند یک متن باشد که در داخل یک صفحه وب یا HTML قرار دارد و می تواند بر روی آن ماسک های مورد نظر را قرار داد این کار از طریق CSS انجام می شود همچنین در نظر داشته باشید اثر بزرگنمایی نیز اگر می خواهد به صورت واقعی انجام شود تنها با ویژگی های CSS امکان پذیر می باشد .


Cutout Mask Polygons : این نوع ماسک یک انیمیشن پیچیده که ایجاد می کند اما باید توجه داشته باشید تمامی این انیمیشن های پیچیده با این تکنیک از طریق یک المان canvas مدیریت می شود . در این تکنیک می توان چند ضلعی های پیچیده ایجاد کرد که بسیار جذاب و برای جلب رضایت کاربران سودمند می باشد همچنین باید توجه داشت این نوع تکنیک به مراتب از تکنیک های قدیمی حجمی کمتر اشغال می کند و سنگینی در لود صفحات به وجود نمی آورد .

Image Masking : این ماسک یکی ا ز ماسک های پر طرفدار بین طراحان هنگام طراحی سایت می باشد چرا که ایجاد ماسک و یا افکت های زیبا بر روی تصاویر همیشه مخاطب را به آن قسمت از سایت جلب کرده و طراح به راحتی می تواند پیام سایت و یا آن قسمت از سایت را هنگام تماشای مخاطبان به آن ها منتقل نماید . همچنین می توان هر تکسچری را برای این کار استفاده کرد که خود یک ویژگی مهم محسوب می شود .

Animated Gradient : یکی دیگر از ماسک های زیبا برای متن ها انیمیشن گرادیان می باشد ، می توان تمامی گرادیان یک طرح را با استفاده از فایل های SVG به زیبای طراحی کرد و می توان ماسک های پویا را بر روی آن ها اعمال نمود . که یک اثر بسیار فوق العاده و زیبا در صفحات سایت ایجاد می کند .

تعداد امتيازات: (1) Article Rating
تعداد مشاهده خبر: (328)
کد خبر: 2358


  • نمونه های شگفت انگیز از ماسک های SVG در طراحی سایت