ایجادمتن های زیبا همراه با گرادینت و بازتابش نور توسط CSS

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

نمایش یک عکس بصورت پاپ آپ هنگام بردن ماوس روی لینک

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

انداختن حاشیه و کادرهای ساده و شیک برای عکس ها

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

4 روش هک CSS برای حل مشکلات در مرورگرهای مختلف

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

پیدا کردن مشکلات در کدهای CSS توسط یک ابزار ساده

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

کاهش حجم، سایز و بهینه سازی تصاویر برای استفاده در وب

کاهش حجم، سایز و بهینه سازی تصاویر برای استفاده در وب
امروز قصد دارم چگونگی کاهش حجم تصاویر و بهینه سازی عکس ها همراه با کیفیت مناسب برای استفاده در وبسایت را تشریح کنم. در این مطلب حقایقی در زمینه فشرده سازی تصاویر مطرح خواهم کرد که نشان میدهند چرا در برخی وب سایت ها سرعت بارگزاری یک تصویرِ نه چندان بزرگ به قدری کُند است، که قبل از بارگزاری کامل آن تصویر، میتوانید مطلب خود را یافته، مطالعه کرده و سایت را ترک کنید! و چرا در مقابل وبسایت هایی وجود دارند که با وجود تصاویر نسبتا بزرگتر سرعت بارگزاری آنها قابل تحسین است. [بیشتر]

کد جاوااسکریپت برای مخفی و ظاهر کردن عناصر سایت

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