آموزش ساخت انیمیشن Curl توسط css3
مقدمه
با سلام خدمت شما دوستان گرامی و علاقه مندان به آموزش طراحی وب . من علیرضا ابراهیمی هستم و با آموزشی تحت عنوان ساخت انیمیشن Curl از سری آموزش های ویژه ی برنامه نویسی و طراحی وب در خدمت شما هستم.
برای یادگیری این بخش بایستی با موارد زیر آشنایی داشته باشید :
• HTML
• CSS3
ساخت انیمیشن Curl با استفاده از CSS3
شیوه ی کار به این صورت است که ابتدا یک div در html تعریف می کنیم و کلاسی به نام all به آن نسبت می دهیم.
<div class="all">
</div>
سپس درون این div یک تصویر و یک div دیگر نیز تعریف می کنیم. سپس به div جدید خود کلاسی به نام curl برای آن در نظر می گیریم.
<div class="all">
<img src="flower.jpg" alt="flower">
<div class="curl">
</div>
</div>
دقت داشته باشید که تصویر و فایل index ما هر دو در یک پوشه قرار دارند بنابراین از آدرس نسبی استفاده می کنیم!
حالا به سند CSS خود می رویم و استایل دهی را آغاز می کنیم:
در ابتدا عرض و ارتفاع عکس خود را تغییر می دهیم.
img{
width: 400px;
height: 300px;
}
ما قصد ساخت همچین چیزی را برای عکس خود داریم :
همونطور که مشاهده می کنید در اینجا یک مثلث توسی رنگ بر روی عکس ما وجود دارد. اما در واقع اگر عمیق تر نگاه کنید می توانیم پی ببریم که به جای یک مثلث ، یه مربع بر روی تصویر دیده می شود ؛ نیمه آن رنگ توسی و نیمه ی دیگر آن رنگ سفید دارد اما چون با رنگ background ما یکی است ، انگار تنها یک مثلث وجود دارد.
خب ما از همین روش استفاده می کنیم.
ابتدا می خواهم برای div ای که کلاس curl برای آن در نظر گرفته بودم یک سری استایل تعریف کنم.
.curl{
width: 60px;
Height: 60px;
Background-color: lightgray;
}
سپس می خواهم که این div دقیقا سمت بالا و چپ عکس ما قرار بگیرد. به این منظور باید postion آن را به absolute تغییر دهیم و left و top آن را برابر 0 قرار دهیم.
.curl{
Position: absolute;
Top:0;
left: 0;
}
تا به اینجا باید به این شکل در آمده باشد:
همانطور که نظاره می کنید position این div ما نسبت به صفحه محاسبه می شود ؛ یعنی وقتی دستور top:0 و left:0 را دادیم ، div ما با فاصله ی 0 از صفحه از سمت بالا و چپ قرار گرفت. برای حل این مشکل باید برای div اصلی خود (با کلاس all) یک postion با مقدار relative در نظر بگیریم.
.all{
Position: relative;
Float: left;
}
حالا می بینیم که این مشکل هم برطرف شده است :
خب در ابتدا background قبلی curl را پاک می کنیم . برای رنگ بندی آن به دو قسمت باید از gradient استفاده کنیم . در نهایت آن را 45 درجه به صورت پادساعتگرد می چرخانیم.
.curl{
Background-image : linear-gradient(-45deg , lightgray 55%, white 60%); }
خب تا الان باید همچین چیزی ساخته باشید :
حالا در نهایت عرض و ارتفاع curl را به 0 تغییر می دهیم تا وقتی که بر روی .all ، hover کردیم ، اندازه ی آن بزرگ تر شود. (لازم به ذکر است که برای ساخت چنین انیمیشنی باید از transition استفاده کنید.)
.curl{
Width: 0;
Height: 0;
Transition: 0.4s;
}
.all:hover .curl{
Width: 60px;
Height: 60px;
Transition: 0.4s; }
نظرات کاربران