ورود کاربران VIP سرزمین دانلود، مرجع دانلود و آموزش رایگان نرم افزار

منوی سایت

جدیدترین دانلودها

تازه های نرم افزار : مالتی مدیا

[ لیست کامل موضوعات ]

تازه های نرم افزار : امنیت

[ لیست کامل موضوعات ]

تازه های نرم افزار : گرافیک

[ لیست کامل موضوعات ]

تازه‌های نرم افزار: اینترنت و شبکه

[ لیست کامل موضوعات ]

تازه های نرم افزار : اداری و کاری

[ لیست کامل موضوعات ]

تازه های نرم افزار : ویندوز

[ لیست کامل موضوعات ]

تازه های نرم افزار : کاربردی

[ لیست کامل موضوعات ]

تازه های بخش موبایل

[ لیست کامل موضوعات ]

خدمات آنلاین سرزمین دانلود


تبدیل کد HTML به Java, PHP, ASP


تبدیل تاریخ شمسی به میلادی - میلادی به شمسی

CSS

تازه های این بخش :

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

  • 1695 بازدید
  • دوشنبه، 16 دی ماه، 1398
(مربوط به موضوع CSS)

آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
همانطور که اطلاع دارید، اینستاگرام یکی از محبوب ترین شبکه های اجتماعی حال حاضر در دنیا می باشد. توسط اینستاگرام می توانید تصاویر و ویدئوهای خود را با بیش از 500 میلیون کاربر عضو این شبکه به اشتراک بگذارید.
 
بسیاری از کاربران از بخش ادیت تصاویر اینستاگرام به منظور افکت گذاری بر روی تصاویر خود استفاده می کنند. فیلترهای تصویر در اینستاگرام به صورت کاملا رایگان قابل استفاده بوده و بر خلاف سایر نرم افزارهای ادیت و ویرایش تصویر، نسخه پولی و یا آنلاک شده ندارد. 
 
در این میان ممکن است برخی از مدیران و طراحان وب سایت بخواهند از افکت های تصویری برای زیباسازی عکس های درون وب سایت استفاده نمایند. به منظور ادیت عکس در محیط طراحی وب می توانید از ابزارهای مانند فتوشاپ و ... استفاده کنید.
 
در این مقاله می خواهیم به بررسی روش استفاده از افکت های اینستاگرام در طراحی وب و به صورت مستقیم بپردازیم. با سرزمین دانلود همراه باشید.
 
 
معرفی کتابخانه CSSGram
 
CSSGram یک کتابخانه کوچک و بر پایه CSS و SCSS می باشد. با استفاده از این کتابخانه می توانید بدون نیاز به فتوشاپ افکت های تصویری اینستاگرام را از طریق کدهای HTML و CSS بر روی تصاویر وب سایت اعمال کنید. 
 
برای دانلود CSSGram می توانید از تاپیک موجود در سایت GitHub استفاده نمایید.
 
 
روش استفاده از CSSGram
 
این قابلیت را نمی توان به صورت مستقیم بر روی تصاویر اعمال نمود. در واقع باید قبل از آدرس عکس و در بخش Container یا المنت های تصویر از آن استفاده نمایید. 
 
به منظور استفاده از این کتابخانه در ابتدا باید کدهای CSSGram را در صفحه اسناد HTML خود قرار دهید. روش کار این کتابخانه به این صورت است که با استفاده از CSS میزان روشنایی و سایر ویژگی های تصویر را به شکل افکت اینستاگرام تغییر خواهد داد. در ادامه کد یک عکس که با استفاده از این کتابخانه افکت گذاری شده است را می توانید مشاهده کنید:
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
پس از اضافه کردن افکت 1977 که یکی از افکت های اینستاگرام می باشد. CSS به شکل زیر در خواهد آمد.
 
آموزش استفاده از افکت های عکس اینستاگرام در طراحی وب
 
 
در این مقاله به بررسی روش استفاده از CSSGram به منظور افزودن افکت به تصاویر درون وب سایت پرداختیم. در نظر داشته باشید که استفاده از این روش به مراتب بسیار بهینه تر از نرم افزارهای ادیت عکس مانند فتوشاپ می باشد. برای ارسال نظرات و سوالات خود می توانید از طریق فرم زیر با ما در تماس باشید.
 
 

این مطلب مربوط به موضوع CSS میباشد.
ادامه مطلب

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

  • 1512 بازدید
  • يكشنبه، 19 اسفند ماه، 1397
(مربوط به موضوع CSS)

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

اگر به یک نرم افزار عالی برای کار با ادیتور CSS نیاز دارید و این کار را می خواهید به بهترین نحو و سریع انجام دهید، یکی از بهترین گزینه ها نرم افزار Rapid CSS Editor می باشد.

 

 

آموزش استفاده از نرم افزار Rapid CSS Editor :

 

ابتدا نرم افزار را از انتهای همین مطلب دانلود و نصب کنید.

 

پس از نصب وارد نرم افزار شوید. وقتی وارد نرم افزار می شوید صفحه زیر برای شما نمایان می شود.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

در قسمت مشخص شده می توانید یک فایل را باز کنید یا یک فایل جدید را بسازید و ...

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

برای ذخیره فایل های نوشته شده بر روی گزینه ی مشخص شده کلیک کنید.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

در قسمت مشخص شده به ترتیب عملیات های برش، کپی، جای گذاری را انجام دهید.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

برای رفتن به عملیات قبل و بعد بر روی گزینه ی مشخص شده کلیک کنید.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

در قسمت مشخص شده می توانید یک عکس، متن، لینک و ... را اضافه کنید.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

در قسمت مشخص شده می توانید نوع فرمت و اندازه آن را تغییر دهید.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

برای تغییر تنظیمات پاراگراف بندی از گزینه های مشخص شده استفاده کنید.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

از طریق بخش مشخص شده می توانید رنگ هایی را انتخاب کنید.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

 

در قسمت وسط صفحه می توانید کد های نوشته شده را مشاهده کنید و در قسمت سمت چپ می توانید فایل های ساخته شده را مشاهده کنید.

 

آموزش کار با ادیتور CSS با نرم افزار Rapid CSS Editor

 

نتیجه گیری:

 

اگر به یک نرم افزار عالی برای کار با ادیتور CSS نیاز دارید و این کار را می خواهید به بهترین نحو و سریع انجام دهید، یکی از بهترین گزینه ها نرم افزار Rapid CSS Editor می باشد.

 

اگر سوالی یا مشکلی در مورد این نرم افزار داشتید از طریق بخش نظرات با ما در ارتباط باشید.

 

 

 دانلود Rapid CSS Editor

 

 ساير مقالات مربوط به Rapid CSS Editor


این مطلب مربوط به موضوع CSS میباشد.
ادامه مطلب

بهینه سازی نسخه چاپ در CSS3

  • 49498 بازدید
  • سه شنبه، 2 ارديبهشت ماه، 1393
(مربوط به موضوع CSS)

بهینه سازی نسخه چاپ در CSS3

 

 

 

 

تا به حال برای خیلی از افراد hفاق افتاده که بخواهند صفحه ای را از سایتی چاپ کنند ولی وقتی که نسخه چاپی صفحه را مشاهده می کنند به آن خوبی و واضحی که در صفحه نمایش می بینند نیست.

در این مطلب آموزشی ما قصد داریم تا به شما آموزش دهیم تا چطور با استفاده از CSS3 نسخه چاپی وب سایت خود را گسترش دهید.

 

روش کار

 

1- تعریف چاپگر به جای نمایشگر به عنوان خروجی

محل نوشتن تنظیمات مربوط به چاپ را با استفاده از دستور media مشخص می کنیم:
 
    @media print { 
 }
 
2- حذف رنگ های اضافه
 
بسیاری از مرورگرها به صورت پیش فرض در زمان چاپ رنگ ها را مدیریت (معکوس) می کنند تا در مصرف تونر یا کارتریج پرینتر صرفه جویی شود. اما برای داشتن بهترین خروجی، بهتر است رنگ ها به صورت مجزا برای چاپ تعریف شوند.
 
   @media print {
    body {
    color: #000;
    background: #fff;
    }
    }
 
3- حذف اجزای اضافه در زمان چاپ
 
در یک صفحه سایت قسمت هایی وجود دارد که برای نمایشگر طراحی شده اند. مواردی مانند تبلیغات، منوی سایت، تصاویر زمینه و ... با توجه به نیاز بهتر است در زمان چاپ حذف شوند. 
دستورات display: none و background: none انتخاب های مناسبی برای حذف این موارد از نسخه چاپی هستند.
    /* Default styles */
     
    h1 {
    color: #fff;
    background: url("/banner.jpg");
    }
     
    @media print {
    h1 {
    color: #000;
    background: none;
    }
     
    nav, aside {
    display: none;
    }
    }
 
4- واحدهای اندازه گیری در چاپ
 
در CSS واحدهای اندازه گیری متنوعی وجود دارد که پرکاربردترین آن پیکسل است. در زمان چاپ بهتر است از واحدهایی مانند سانتی متر و میلی متر استفاده شود تا بهترین خروجی را روی کاغذ داشته باشیم. یکی از بهترین روش ها، تعریف فاصله محتویات با لبه کاغذ با استفاده از page و margin است.
    @media print {
    h1 {
    color: #000;
    background: none;
    }
     
    nav, aside {
    display: none;
    }
     
    body, article {
    width: 100%;
    margin: 0;
    padding: 0;
    }
     
    @page {
    margin: 2cm;
    }
    }
 
5- یکپارچه بودن قسمت های مهم
 
 
زمان چاپ به صورت خودکار محتویات سایت صفحه بندی می شوند. برای بعضی از قسمت های سایت بهتر است صفحه بندی را مدیریت کنیم. به عنوان مثال، از چاپ شدن تیترها در پایین صفحه با دستور زیر جلوگیری می کنیم.
 
    h2, h3 {
    page-break-after: avoid;
    }
 
همچنین برای تصاویر حداکثر عرض تعریف می کنیم تا تصاویر بزرگتر به صورت خودکار در زمان چاپ متناسب با عرض صفحه چاپ شوند.
 
    img {
    max-width: 100% !important;
    }
 
نکته: بهتر است مقالات، اخبار و ... (article) در زمان چاپ از ابتدای صفحه شروع شوند.
 
    article {
    page-break-before: always;
    }
 
 
در نهایت بهتر است از تقسیم شدن بخش هایی مانند لیست ها و تصاویر به چند صفحه جلوگیری کنیم.
 
    ul, img {
    page-break-inside: avoid;
    }
 
 
نکته: چهار موردی که در این بخش ذکر شد فقط به عنوان نمونه بودند و با توجه به نیاز می توان این بخش را تکمیل کرد.
 
 
6- نمایش تصاویر زمینه و رنگ ها در چاپ
 
در بعضی از سایت ها (نمونه کارها، گالری تصاویر و ...)، تصاویر و رنگ ها اهمیت ویژه ای دارند. در صورتی که مرورگر کاربر پشتیبانی کند، با استفاده از دستورات CSS می توانیم آن ها را به همان صورتی که در نمایشگر به نظر می رسند به چاپگر (رنگی) ارسال کنیم.
 
    @media print and (color) {
    * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    }
    }

این مطلب مربوط به موضوع CSS میباشد.
ادامه مطلب
سرزمین دانلود، مرجع دانلود و آموزش نرم افزار

لینک های ویژه

سرزمین دانلود را دنبال کنید !

عضویت در خبرنامه سرزمین دانلود

با وارد کردن ایمیل خود و سپس تایید آن، جدیدترین مطالب و نرم افزار ها برای شما ارسال می شود:



------------------------------------------

جعبه دانلود

تازه های بخش سرگرمی

[ لیست کامل موضوعات ]

تازه های بخش آموزشی. مجوزها

[ لیست کامل موضوعات ]
logo-samandehi

برچسب ها

نرم افزار کامپیوتر بازی کامپیوتر دانلود ویندوز نرم افزار اندروید بازی اندروید آموزش زبان دانلود آهنگ مقالات آموزشی نقشه سایت 1 نقشه سایت 2

اطلاعات

سرزمین دانلود را دنبال کنید!

   طراحی و توسعه: قالب سبز      © 2007 - 2021  تمامی حقوق این سایت برای سرزمین دانلود محفوظ است و هرگونه کپی برداری بدون ذکر منبع ممنوع می باشد.