سایه انداختن برای کادرها و جعبه ها در سایت توسط CSS

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

ساخت پس زمینه سایت با حجم کم توسط تصاویر تکرارپذیر و یکپارچه

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

8 اشتباه در استفاده از تگ های HTML

8 اشتباه در استفاده از تگ های HTML
پیشتر در ارسالی با عنوان 10 اشتباه در کدنویسی HTML که نباید مرتکب شوید مواردی را برای استفاده صحیح از نمادها در HTML بررسی کردیم. در این ارسال کلکسیونی از رایجترین اشتباهات در نحوه استفاده از تگ هایHTML را مورد بررسی قرار میدهم و در مورد هرکدام نحوه استفاده درست را با رعایت اصول و معنای تگ مورد نظر شرح خواهم داد. خطاهای مشترکی که در سورس کد اکثر وب سایت ها مشاهده و بارها و بارها تکرار شده اند و بسیاری از این اشتباهات، دیگر به عادت هایی تبدیل شده اند که ما در روزهای اول کدنویسی خود کسب کرده ایم. [بیشتر]

15 ابزار آنلاین CSS برای طراحی وب سایت

15 ابزار آنلاین CSS برای طراحی وب سایت
به عنوان یک طراح همواره باید دانش خود را به روزرسانی کنید و از انواع ابزارها و تکنولوژی هایی که به نوعی می توانند کار و سرعت شما را بهبود ببخشند، آگاهی داشته باشید. علاوه براین اگر منصفانه نگاه کنیم برخی از ابزارها کارها را بهتر از ما انجام میدهند. وجود برخی دیگر از ابزارها نیز در طراحی وب سایت یک ضرورت است. به عنوان نمونه یک طراح خوب نباید فشرده سازی و کاهش حجم کدهای CSS توسط فشرده سازهای آنلاین را در پایان طراحی فراموش کند. بدون شک برخی از این ابزارها در جعبه ابزار همیشگی و همراه شما هنگام طراحی وب سایت ها جای خواهند گرفت. اگر شما نیز ابزارهای دیگری را می شناسید، در بخش کامنت های این ارسال معرفی کنید. [بیشتر]

قرار دادن عناصر دقیقا در مرکز صفحه نمایش توسط jQuery

قرار دادن عناصر دقیقا در مرکز صفحه نمایش توسط jQuery
آیا تاکنون سعی کرده اید عنصری را طوری در صفحه وب خود پیاده سازی کنید که دقیقا در وسط همه مروگرها و مانیتورهای گوناگون با روزلوشن های متفاوت ظاهر شود؟ اگر پاسخ شما مثبت است پس حتما با مشکلات گوناگون اینکار خصوصا وسط قرار دادن در محور عمودی صفحه آشنایی دارید. در این آموزش می خواهیم توسط کدهای جی کوئری عنصر مورد نظر را دقیقا در وسط صفحه نمایش دهیم. این تکه کد بدون هیچ مشکلی در تمامی مرورگرها و مانیتورها با رزولوشن های مختلف عنصر مورد نظر را دقیقا در وسط محور عمودی و محور افقی قرار خواهد داد. [بیشتر]

قالب رایگان سایت فروشگاه و تجارت الکترونیک با فرمت PSD

قالب رایگان سایت فروشگاه و تجارت الکترونیک با فرمت PSD
امروز یک قالب زیبا که به صورت براق و پاک برای وب سایت های تجارت الکترونیک و فروشگاهی طراحی شده است را با فرمت PSD به شما تقدیم میکنم. این قالب فروشگاهی برای انواع وب سایت های تجارت الکترونیک که دارای سبد خرید نیز می باشند قابل استفاده است. فونت های استفاده شده در این قالب توسط رافی Arial و Bebas است. لبه های عناصر بسیار خلاقانه تفکیک و طراحی شده است. کلیه لایه هادر فایل PSD فولدربندی شده است و شما می توانید بخش های مورد نیاز خود را به راحتی و مستقل ویرایش کنید. [بیشتر]

ساخت لینک های که با کلیک یا بردن ماوس روی آنها صدا میدهند

ساخت لینک های که با کلیک یا بردن ماوس روی آنها صدا میدهند
در این آموزش توسط تگ A در HTML و همچنین چند خط کوتاه کد jQuery لینک هایی خواهیم ساخت که با کلیک کردن و یا قرار گرفتن نشانگر ماوس روی آنها و یا هر رویداد دیگر، صدایی را که ما می خواهیم تولید میکنند. این موضوع برای قدیمی ترها یادآور افکت هایی است که روزگاری با استفاده از فلش انجام می گرفت اما امروزه به لطف کتابخانه فوق العاده جذاب و کاربردی jQuery به سادگی هرچه تمامتر و با کمترین حجم کدنویسی و فایل قابل پیاده سازی است. [بیشتر]

آموزش کامل طراحی وب سایت در فتوشاپ با جزییات

آموزش کامل طراحی وب سایت در فتوشاپ با جزییات
در این ارسال نحوه طراحی یک وب سایت در فتوشاپ را همراه با کلیه جزییات آموزش خواهم داد. این وب سایت به عنوان نمونه برای یک موسسه خدمات اتومبیل طراحی خواهد شد اما با تغییر محتوا و تصاویر آن به سادگی برای هر موضوعی قابل استفاده است. در طراحی این وب سایت بسیاری از بخش های مورد استفاده و رایج در وب سایت ها مانند لوگو، نوار جستجو، نوار منو، گالری تصاویر، پنل ورود، بلاگ، خدمات، توضیحات و سرآیند و بخش پایینی سایت در نظر گرفته شده است. به سبب وجود آیتم های متنوع و کاربردی در این آمورش می توانید دیگر پروژه های طراحی وب سایت خود را با دست باز و خلاقیت بیشتری ارائه کنید. مثل همیشه سعی شده مطلب با زبان ساده بیان شود. همچنین فایل کامل پروژه با فرمت PSD و کتاب الکترونیکی آموزش با فرمت PDF به صورت رایگان تقدیم شده است. با من همراه شوید. [بیشتر]