Real Time Web Analytics کانال تلگرام لرن روت

CSS

ایجاد یک لوزی به وسیله HTML , CSS

نویسنده : محمد مظفری
تاریخ انتشار:
22:16:25 1394-06-24
لوزی

شاید تا به حال به این فکر کرده باشید که چگونه با کمک HTML و CSS می توان یک لوزی را ایجاد کرد.برای آموزش کامل این کار با لرن روت همراه باشید.

ابتدا تگ img مورد نظر خود را درون یک div با آی دی مشخص قرار دهید. در فایل HTML خود مانند زیر عمل کنید:

<div id="pictureFrame">
     <img src="butterfly.jpg" id="picture">    
</div>

سپس درون فایل CSS خود به صورت زیر عمل کنید.

ابتدا مشخص کنید که سایز div چه اندازه ای باشد. سپس برای آن مشخص کنید که به اندازه 45 درجه به سمت راست گردش داشته باشد . وهمچنین مشخص کنید که اضافاتی که از  div بیرون می زند را مخفی کند.

(کد شماره 1)

#pictureFrame{
   width: 300px;
   height: 300px;
   transform:rotate(45deg);
   overflow: hidden;
}

سپس برای عکس درون div نیز باید تعیین کنیم که به اندازه 45 درجه به سمت چپ گردش داشته باشد.
(کد شماره 2)

#picture{
   width: 500px;
   height: 500px;
   transform:rotate(-45deg);
}

حالا عکس مورد نظر شما به صورت زیر خواهد بود.(عکس شماره 1)

                                               

البته شما می توانید یک شش ضلعی نیز بسازید برای اینکار باید سایز عکس را با سایز div یکسان در نظر گرفت که نتیجه آن به صورت زیر خواهد بود.
(عکس شماره 2)
                                 

اما در حالت اصلی که می خواهیم یک لوزی را بسازیم، تا اینجا (عکس شماره 1) را داریم . حالا باید عکس درون div را جابه جا کنیم (به کمک margin) تا لوزی هیچ گونه فضای سفیدی نداشته باشد. پس به جای کد شماره 2 کد زیر را خواهیم داشت. توجه کنید که سایز عکس حتماً باید از سایز div بزرگتر باشد.

#picture{
   width: 500px;
   height: 500px;
   transform:rotate(-45deg);
   margin: -100px;
}

در آخر عکس به صورت زیر نشان داده می شود؛

                                

ولی دقت داشته باشید که حتما باید سایز عکس از سایز div بزرگتر باشد در غیر اینصورت به صورت ناقص نشان داده می شود. 

برچسب ها:
مقالات مشابه