0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

آرشیو مطالب
colors web design

روانشناسی رنگ و کاربرد رنگ ها در طراحی وب سایت روانشناسی رنگ ها و اصول رنگ ها در طراحی وب سایت: در تمام لحظات زندگی رنگ ها با ما ارتباط زیادی برقرار میکنند,و بدون اینکه شما با اصول روانشناسی رنگ ها آشنایی داشته باشید باز هم رنگ ها به راحتی با شما ارتباط برقرار میکنند و احساسات شما را درگیر میکنند,بنابراین انتخاب رنگ ها در طراحی گرافیکی بسیار مهم است,اما امروز میخوام کمی دیدگاه شما را نسبت به روانشناسی رنگ ها در طراحی وب آشنا کنم.   اگر شما یک طراح وب سایت هستید یا مدیریت یک وب سایت را بر عهده دارید,بسیار مهم است که از رنگ هایی استفاده کنید که وب سایت شما یک وب سایت جذاب و در عین حال وب سایتی باشد که کاربران با ورود به آن وب سایت احساس خستگی نکنند و مدت زمان بیشتری در وب سایت شما باقی بمانند.و از آن مهم تر آن است که به بازار نهایی کار خود که از آن قصد کسب در آمد یا ارایه خدمات دارید فکر کنید.و متناسب با بازار کسب و کار خود به انتخاب رنگ برای وب سایت خود بپردازید. نکات مهم روانشناسی رنگ ها در طراحی سایت: اثر روان شناسی رنگ بر افراد قابلیت خواندن متون صفحات سایت رنگ متمم رنگهای انتخابی برای پس ضمینه ، تصاویر ، لینک ها و متون […]

responsive images

دوستان وب یاری با دانش من سلام جلسه دوم ریسپانسیو کردن تصاویر Responsive Images با ادامه مطلب آموزش چگونگی ریسپانسیو کردن تصاویر با شما همراه هستیم,در آموزش قبلی سه خصوصیت(property) برای  background-size معرفی کردیم,در این آموزش میخواهیم ادامه های خصوصیت های background-size را برای ریسپانسیو کردن کردن تصاویر به شما آموزش میدهیم. خصوصیت background-size:cover باعث میشود تا تصویر شما مقیاس بندی شود تا اینکه تمامی ناحیه ی content را بپوشاند.با توجه به مثال زیر به درک بهتری از این مطلب میرسید. div { width: 100%; height: 400px; background-image: url(‘img_flowers.jpg’); background-size: cover; border: 1px solid red; }   نمایش تصاویر با اندازهای گوناکون برای صفحه نمایش های گوناگون: یک تصویر بزرگ میتواند بر روی یک کامپیوتر با صفحه نمایش بزرگ به صورت کامل نمایش داده شود اما بر روی یک صفحه ی کوچک به درستی نمایش داده نشود. به منظور کاهش حجم لود تصاویر و یا به هر دلیل دیگری شاید شما بخواهید برای صفحه نمایش های مختلف از تصاویر مختلف استفاده کنید.بنابراین بهتر است که شما برای وسایل گوناکون با صحفه نمایش های گوناگون تصاویر گوناگون را لود کنید. در زیر ما دو تصویر با اندازه گوناگون داریم:   /* For width smaller than 400px: */ body { background-image: url(‘img_smallflower.jpg’); } /* For width 400px and larger: */ @media only screen and (min-width: 400px) { body { background-image: url(‘img_flowers.jpg’); } […]

ریسپانسیو کردن تصاویر

همه چیز در خصوص ریسپانسیو کردن تصاویر تا به حال مطالب زیادی در خصوص ریسپانسیو کردن وب سایت توسط تیم طراحی سایت وب یار در اختیار شما عزیزان قرار گرفته، در این پست آموزشی قصد داریم تمامی نکات درخصوص ریسپانسیو کردن تصاویر را به شما معرفی کنیم.در مورد ریسپانسیو کردن صفحات وب سایت مطلب آموزشی ریسپانسیو کردن جداول responsive table  را حتما بخوانید. اولین نکته درخصوص ریسپانسیو کردن تصاویر(Responsive images): یه نکته خیلی ساده و آموزشی اینه که اول از همه از خصوصیت مهم width استفاده کنید,ومقدار آن را برابر ۱۰۰% قرار دهید.همانند مثال زیر : img { width: 100%; height: auto; } دومین نکته در خصوص طراحی ریپسپانسیو تصاویر: دومین نکته در خصوص طراحی ریسپانسیو تصاویرآن است که خاصیت background-size که برابربا مقدار “contain” قرار بگیرد.اگر چه با این مقادیر برای خصوصیت background-size تصویر ریسپانسیو میشود,اما تصویر بین عرض و طولی که در کدهای css برایش تعریف شده است قرار میگیرد. بنابراین تصویر به عنوان بگراند تمامی ناحیه Contain را نمیپوشاند و مابین این ناحیه قرار میگیرد.     div { width: 100%; height: 400px; background-image: url(‘img_flowers.jpg’); background-repeat: no-repeat; background-size: contain; border: 1px solid red; } سومین نکته طراحی ریسپانسیو تصاویر: در صورتی که خصوصیت background-size را برابر با مقدار “۱۰۰% ۱۰۰%” باشد, تصویر مورد نظر با هر طول و عرضی کشیده میشود تا درون ناحیه ی content قرار […]