آذر 24, 1398

    آموزش گرافیک تصاویر در Css3 ویژه

    By خرداد 27, 1394 3004 اضافه کردن دیدگاه جدید

    در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

    وقتی بر روی تصاویر بخش آموزش موس را نگه میدارید مشاهده کرده اید که تصاویر نزدیک تر می شود ؟ اینکار از طریق روشهای مختلفی انجام می شود که متداول ترین آن Css3 می باشد . من در این مقاله آموزشی میخواهم به شما آموزش بدهم که وقتی ماوس را بر روی تصویر نگه میدارید عکس بزرگتر شود ، تصویر وقتی موس بر روی آن قرار می گیرد کدر شود و رنگ حاشیه به محض قرار گیری موس بر روی کادر تغییر کند .

    1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .مشاهده دمو این بخش آموزش در مرورگر

     

    <!DOCTYPE html>
    <html>
       <head>
       </head>
                  <body>
                  </body>
    </html>

     

     

    2. سپس باید در داخل تگ img یک آی دی ایجاد کرده و enlarge را درون آن نشانه گذاری کنیم تا بتوانیم با استفاده از دستورات Css شکل آن را تغییر بدهیم . من ابتدا عرض و ارتفاع تصویر را مشخص میکنم سپس تنظیمات را با استفاده از transform طوری تغییر میدهم که وقتی موس بر روی تصویر قرار گرفت چه کاری صورت بپذیرد .

     

    <a href="#"><img id="enlarge" src="/test-image.jpg" alt="PZ3 demo #2" title=""></a>

     

     

    3. در مرحله بعدی یک تگ <style> بین تگ head ایجاد کرده و کدهای زیر را درون آن کپی کنید . من برای اینکه برای کاربران مبتدی این قسمت مبهم نباشد کل کد را تایپ می کنم .

     

    <!DOCTYPE html>
    <html>
        <head>
              <style>
              </style>
        </head>
    <body>
             <a href="#"><img id="enlarge" src="/test-image.jpg" alt="PZ3 demo #2" title=""></a>
    </body>
    </html>

     

     

    4. کد کلی به شکل زیر می باشد .من از تگ transform استفاده کرده ام .
    خاصیت transform - متد scale : توسط متد scale می توانید ابعاد عنصر مورد نظر خود را در دو جهت افقی و عمودی افزایش دهید .
    برای این منظور باید مقادیری که می خواهید عنصر مورد نظرتان تغییر اندازه دهد را به ترتیب افقی و عمودی در پرانتز مقابل متد 7 تعیین کنید . برای مثال اگر مقدار 3 را تعیین کنید ، عرض و طول عنصر مورد نظرتان 3 برابر خواهد شد .

     <!DOCTYPE html>
    <html>
        <head>
              <style>
    #enlarge:hover {
        transform:scale(2,2);
        transform-origin:0 0;
    }
    #enlarge {
        height:115px;
        width:155px;
    }
              </style>
        </head>
    <body>
             <a href="#"><img id="enlarge" src="/test-image.jpg" alt="PZ3 demo #2" title=""></a>
    </body>
    </html>

    مشاهده دمو این بخش آموزش در مرورگر

    تعیین شفافیت تصویر با استفاده از تگ opacity

    عنصر استانداردی که در css3 برای ایجاد لایه های شفاف تعریف شده، opacity نام دارد که به معنی تاری و کدری است، البته برای مرورگرهای قدیمی تر که از css3 پشتیبانی نمی کنند باید از مقادیر دیگری تحت عنوان ms-filter، filter، moz-opacity و khtml-opacity استفاده کنیم.
    روش کار همانند 4 مرحله بالا می باشد . مقادیر شفافیت برای مرورگر اکسپلورر به صورت اعدادی بین 0 تا 100 و برای سایر مرورگرها و حالت استاندارد css3، عددی بین 0 تا 1 است.
    نام آی دی id="transparency" می باشد

    <!DOCTYPE html>
    <html>
        <head>
    <style>
    #transparency:hover {
        opacity:0.5;    
    </style>
        </head>
    <body>
         <a href="#"><img id="transparency" src="/test-image.jpg" alt="PZ3 demo #2" title=""></a>
    </body>
    </html>

    مشاهده دمو این بخش آموزش در مرورگر


    ایجاد حاشیه دور تصویر با استفاده از تگ border
    با استفاده از این تگ می توانید برای اشکال و هر چیزی که در یک صفحه وب وجود دارد کادر ایجاد کنید .

    <!DOCTYPE html>
    <html>
        <head>
              <style>
    #imageborder {
        border:3px solid #008000;
    }
    #imageborder:hover {
        border:3px solid #800000;
    }
              </style>
        </head>
    <body>
         <a href="#"><img id="imageborder" src="/test-image.jpg" alt="PZ3 demo #2" title=""></a>
    </body>
    </html>

    مشاهده دمو این بخش آموزش در مرورگر

    رای دادن به این مورد
    (1 رای)
    آخرین بروز رسانی سه شنبه, 26 خرداد 1394 22:52

    نوشتن دیدگاه

    تصویر امنیتی
    تصویر امنیتی جدید

    آخرین مطالب آموزشی

    «
    • 1
    • 2
    • 3
    »

    گالری پست

    چطور می توانید متوجه شوید که در اندروید چه برنامه ای را بیش از همه استفاده می کنید ؟

    چطور می توانید وضعیت فعالیت خود را در اینستاگرام پنهان کنید

    موس Trackball چیست و چرا شما نیاز به موس Trackball دارید ؟

    ارسال فکس از طریق تلفن همراه

    چطور داریور کارت گرافیک خود را برای بهتر شدن عملکرد در بازی بروز رسانی کنیم

    چطور فایل های خراب در ویندوز را درست کنیم

    تماس از طریق WiFi calling و روش فعال کردن آن در گوشیهای اندروید

    چگونه پسورد آنلاین قوی بسازیم که به سختی هک شود ؟

    قبل از فعال کردن تایید دو مرحله ای این مقاله را بخوانید

    © 2018 Your Company. All Rights Reserved. Designed By Tripples

    Please publish modules in offcanvas position.

    تک وب دیزاین-قالب فارسی جوملا