در طراحی سمت کاربر بهتر است که مواردی را پیش بینی کرده و راه حلی برای آن داشته باشیم،به عنوان مثال اگر عکسی در کد قرار داده اید و همه چیز ظاهرا در مرورگر خوب است،سعی کنید برای آزمایش یک عکس با سایز خیلی بزرگتر را هم استفاده کنید.شاید شاهد یک ناسازگاری باشید.که با یک خاصیت max-with و یا overflow و امثالهم بتوان آن را مهار کرد.

وقتی تصویر از کادر اصلی بیرون می زند

اگر در آزمایش بالا متوجه شدید که تصویر از المنت مادر خود بیرون زده است،بهترین راه حل دادن چنین خاصیتی ست:

.tasvir{
 max-with:100%;
}

با این کار اجازه به هم ریختگی تصاویر در طرحتان را از تصاویر ناسازگار گرفته اید.

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

وقتی متن های اضافی دردسرساز می شوند

حالت فوق را برای یک کادر که قرار است متونی را نمایش دهد مد نظر بگیرید.باید این احتمال را داد که کاربر شاید متون بیش از حدی را وارد کند و باعث ناسازگاری در قالب سایت شما شود که نتیجه یک مشتری ناراضی ست!

برای این مشکل شما می توانید دست به دامان CSS شوید،به این صورت که اجازه بیرون زدن از حد خود را به او ندهید.

با کد زیر این مشکل را می توانید حل کنید،با این کار اضافه متن شما قیچی شده و سه نقطه جای آن را می گیرد:

.matn{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

آیا این مسائل را می توان در سمت سرور رفع نمود؟

این را هم می توان مد نظر داشت که این مشکلات می تواند در کدنویسی سمت سرور مهار شود،اما بهتر و استانداردتر است که قبل از ارسال به مرحله سمت سروراین مسائل رفع شود،چرا که هرچه درخواست مازاد بر سرور کمتر ، بهتر.

The post کنترل و مهار اضافه ی متن و یا تصویر در CSS appeared first on وب دیزاین.

قبل تر ها در استفاده از تکنولوژی های به روز در حوزه وب شاید حساسیت خاصی وجود داشت،از دردسرهای مرورگر IE گرفته تا عدم پیشتیبانی همسان مرورگرها،آن هم به این دلیل که طراحی ما به اصطلاح Cross Browser بود و در تمام مرورگرها یک چهره داشته باشد.این روز ها اما کماکان این حساسیت و دغدغه وجود دارد اما نه به اندازه قبل.از طرفی برای زیبایی کار گاها شاید حیف باشد که حلال خدا را حرام کنیم!

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

از آنجایی که پرچم کدبازها همیشه بالاست ، هستند و بودند افرادی که برای این امکان CSS کتابخانه هایی نوشته باشند ، من جمله کتابخانه معروف aniamte.css که امروز برای برنامه نویسان front-end نام آشنایی ست.

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

متحرک سازی با استفاده از animate.css

کار بسیار ساده است ، ابتدا کتابخانه را به کدخودتان پیوست کنید:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

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

مشاهده نمونه انیمیشن های این کتابخانه

و حالا به کدتون کلاس بدین:

<div class="animated bounce">یک متن متحرک</div>

کلاس  animated به این معناست که این المنت برای متحرک سازی آماده است و فقط باید افکت مورد نظر به عنوان کلاس قید شود ، که در اینجا افکت bounce تنظیم شده است.

لیست تمام افکت ها را می توانید در لینکهای مذکور بیابید.

متحرک سازی به هنگام رسیدن به یک المنت خاص

اگر متوجه شده باشید به محض لود سایت تمامی المنتهایی که کلاس های انیمیشنی را به همراه افکتشان داشته باشند اجرا می شوند.اما چگونه می توان اجرای انیمیشن را به محض این که کاربر به آن المنت رسید اجرا کنیم؟ کافیست کلاس افکت را در همان هنگام به المنت بدهیم.پس با این کار افکت ما در موقعی که المنت در معرض دید کاربر قرار گرفته باشد نمایش داده می شود.

گره این مرحله از کاربه دست JavaScript باز می گردد.جاوااسکریپت برای این مساله کتابخانه ها و کدهایی دارد که معروفترین آنها در این زمینه هم اکنون کتابخانه Waypoints می باشد که علاوه بر کد مستقل دارای پلاگین جی کوئری نیز می باشد.خب دست به کار می شویم.

فایل انیمیشنی CSS را که از قبل پیوست کرده ایم ، حال  این پلاگین را به همراه جی کوئری به صفحه پیوست می کنیم:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="waypoints.min.js"></script>

خب اکنون فرض می کنیم این کد HTML ماست که منتظر است کمی تکان بخورد:

<div class="animated elem">یک متن متحرک</div>

خب اکنون با کد جاوااسکریپت زیر به مرورگر می گوییم وقتی به این کد رسیدی  کلاس مد نظر ما که افکت ها را اعمال می کند به آن اضافه کن:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.elem').waypoint(function() {
            $(this).addClass('bounce');
    }, {
        offset: 'bottom-in-view'
    });

});
</script>

کد بالا کلاس ها را وقتی کاربر از بالا به پایین در حال اسکرول است اعمال می کند ، برای حالت عکس به این صورت می توانید اقدام کنید:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.elem').waypoint(function() {
            $(this).addClass('bounce');
    });

});
</script>

اکنون می توایند صفحه را اسکرول کرده و متوجه تغییرات شوید.

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

مثال های بالا برای یک المنت بود ، فرض کنید مقدار زیادی المنت در صفحه وجود دارد که قرار است متحرک شوند و تکرار تک تک کدها برای تمام المنتها کاری غیرحرفه ایست،لذا راهکار بهتری در این بخش ارائه خواهیم داد.

ابتدا فایل animate.css / jquery.js / waypoints.js را به صفحه پیوست کنید.

حالا این کد جاوااسکریت را هم به صفحه خودتان اضافه کنید:

<script type="text/javascript">
jQuery(document).ready(function($) {

    $('.animated').waypoint(function() {
            $(this).addClass($(this).data('animated'));
    }, {
        offset: 'bottom-in-view'
    });

});
</script>

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

<div class="animated" data-animated="bounce">یک متن متحرک</div>
<div class="animated" data-animated="zoomInRight">یک متن متحرک دیگر</div>

یعنی کافیست کلاس animated را به المنت های دلخواه داده و بعد data-animated آن المنت را بر روی افکت مدنظر خود تنظیم کنید.آن کد جاوااسکریپت به محض رسیدن به این المنت کلاس را از این قسمت خوانده و به المنت اضافه می کند که منجر به متحرک شدن آن در همان لحظه می گردد.

نمونه کد کامل انیمیشن به هنگام مشاهده صفحه

برای مشاهده دمو کلیک کنید.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Animate Demo</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.4/waypoints.min.js"></script>
    <style type="text/css">
    div.wrapper {
        width: 50%;
        margin: auto;
        text-align: center;
        direction: rtl;
        font-family: byekan, "b yekan", Vazir, tahoma;
        font-size: 3em;
    }
    </style>
</head>

<body>
    <div class="wrapper">
        <p class="animated" data-animated="bounce">یک متن متحرک / Animated Text</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p class="animated" data-animated="zoomInRight">یک متن متحرک دیگر / Animated Text</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <p class="animated" data-animated="flip">یک متن متحرک دیگر / Animated Text</p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

    </div>
</body>
<script type="text/javascript">
jQuery(document).ready(function($) {

    $('.animated').waypoint(function() {
        $(this).toggleClass($(this).data('animated'));
    }, {
        offset: 'bottom-in-view'
    });

});
</script>

</html>

The post صفحات وب سایت خود را متحرک کنید appeared first on وب دیزاین.