آموزش CSS (قسمت۴)

آموزش-css-قسمت۴

در بخش قبلی آموزش CSS، با چینش عنصرهای ایجاد شده در صفحه آشنا شدید.در این آموزش میخوام با مشخصه های box-shadow و text-shadow آشناتون کنم که برای ایجاد سایه برای اشیا و متن ها استفاده می شوند که در طراحی های مدرن و امروزی کاربرد بسیار زیادی دارند.

کدهای HTML :

<div class="dr dr-box1">
    <img src="http://dr-code.ir/front/image/logo.png" alt="دکتر کد">
    <h5> آموزش CSS </h5>
    <a href="#"><button> ادامه... </button></a>
</div>
<div class="dr dr-box2">
    <img src="http://dr-code.ir/front/image/logo.png" alt="دکتر کد">
    <h5> آموزش CSS </h5>
    <a href="#"><button> ادامه... </button></a>
</div>
<div class="dr dr-box3">
    <img src="http://dr-code.ir/front/image/logo.png" alt="دکتر کد">
    <h5> آموزش CSS </h5>
    <a href="#"><button> ادامه... </button></a>
</div>

کدهای CSS : 

<style>
    .dr{
        width: 150px;
        height: 230px;
        background-color: #efefef;
        margin: 10px;
        display: inline-block;
        box-shadow: 0px 3px 5px #adadad;
        transition: 0.5s;
        padding: 10px;
    }
    .dr:hover{
        box-shadow: 0px 3px 7px #636363;
    }
    .dr img{
        max-width: 80px;
        height: auto;
        margin-left: 30px;
    }
    .dr h5{
        color: #CD6133;
        text-shadow: 2px 2px 2px #636363;
        text-align: center;
    }
    .dr button{
        background-color:limegreen;
        border: 0px;
        color: #ffffff;
        width: 100%;
        padding: 8px;
    }
    .dr button:hover{
        box-shadow: 1px 1px 2px #636363;
    }
</style>

در کدهای CSS بالا ما توسط کد box-shadow یک سایه ای برای عنصر خودمان ایجاد کردیم که تنظیمات مربوط به رنگ و نحوه نمایش سایه را تعریف کردیم.خب توسط box-shadow توانستیم سایه برای عنصر خودمان تعریف کنیم حال با استفاده از text-shadow می توانیم برای نوشته های خودمان نیز سایه قرار دهیم.در کدهای بالا توسط رویداد hover تعریف کردیم که موقع قرار گرفتن نشانگر ماوس بر روی عنصر ما، تنظیمات مربوط به سایه تغییر کرده و پررنگ تر شود و کد transition هم که مربوط به زمان اعمال کدهای hover‌ می باشد که ما بر روی 0.5 (نیم ثانیه) تعریف کرده ایم.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



پرسش و پاسخ

سوالی دارید بپرسید؟