سلام دوستان ، امروز قصد داریم یک انیمیشن خیلی کوتاه با CSS3 را با یکدیگر ایجاد نمائیم که اگر این روش را یاد بگیرد میتوانید به راحتی شروع به رسم نموداری با CSS3 نمائید .
قبل از اینکه وارد مبحث آموزش شویم بهتر است در ابتدا خروجی را به شما نشان دهیم:
همانطور که خروجی را مشاهده نمودید ، در این بخش قصد داریم این انیمیشن کوتاه را به شما دوستان یاد دهیم .
در ابتدا برای عنصر div یک استایل تعریف میکنیم :
div.r { width: 100px; margin: 5px 0; padding: 5px; color: white; background-color:#3bbe8b; text-align: right; border-radius: 5px; }
- radius : این کد که برابر با 5 میباشد برای مشخص کردن خمیدگی گوشهها کاربرد دارد.
سپس یک کد هم برای div مینویسیم ،زمانی که اشاره گر ماوس روی شکل ما قرار گرفت :
div.r:hover { width: 500px; background-color: #4794d5; font-weight:bold; color:yellow; }
این کد نشان میدهد وقتی که اشاره گر ماوس روی شکل قرار گرفت طول آن به 500 ارتقاع یابد و از لحاظ ظاهری ، رنگ نیز تغییر کند.
حال وقت تعیین سرعت شروع نمودار میباشد :
ease : در ابتدا سرعت کم ، سپس زیاد و مجددا کم میشود :
#ease { -webkit-transition: 3s ease; -moz-transition: 3s ease; -o-transition: 3s ease; -ms-transition: 3s ease; transition: 3s ease; }
linear : با همان سرعتی که شروع میشود ، خاتمه پیدا میکند :
#linear { -webkit-transition: 3s linear; -moz-transition: 3s linear; -o-transition: 3s linear; -ms-transition: 3s linear; transition: 3s linear; }
ease-in : دارای سرعت شروع کندی میباشد :
#easein { -webkit-transition: 3s ease-in; -moz-transition: 3s ease-in; -o-transition: 3s ease-in; -ms-transition: 3s ease-in; transition: 3s ease-in; }
ease-out : دارای سرعت پایان کندی میباشد :
#easeout { -webkit-transition: 3s ease-out; -moz-transition: 3s ease-out; -o-transition: 3s ease-out; -ms-transition: 3s ease-out; transition: 3s ease-out; }
ease-in-out : سرعت شروع و پایان کند میباشد :
#easeinout { -webkit-transition: 3s ease-in-out; -moz-transition: 3s ease-in-out; -o-transition: 3s ease-in-out; -ms-transition: 3s ease-in-out; transition: 3s ease-in-out; }
ما در این قسمت چون میخواستیم 5 رده بندی سرعت را نمایش دهیم ، آنها را در idهای تعریف نمودیم ، اما اگر شما بخواهید میتوانید بدون تعریف کردن id یا class این کار را انجام دهید ، برای اینکار کافیست این 5 ویژگی را در قابل transition انجام دهید.
حال وقت فراخوانی کد استایل ما میباشد :
<div id="ease">ease</div> <div id="linear">linear</div> <div id="easein">ease-in</div> <div id="easeout">ease-out</div> <div id="easeinout">ease-in-out</div>
ما در این قسمت ، اندازه سرعت را برابر با 3 ثانیه قرار داده ایم .
برای رسم اشکال فوق میتوانستیم از keyframes نیز استفاده نمائیم . در قسمتهای بعدی مثال هایی را در رابطه با این دستور خواهیم زد.
اگر براتون جالب بود پس کلیک بر روی پلاس وان ، یک نظری هم بدهید
تو مطمئنی این نموداره ؟
سلام اول تشکر بابت مطلبتون دوم اینکه من میخوام با استفاده از اطلاعات ذخیره شده در بانک اطلاعاتیم نمودار رسم کنم میدونم که اینکار رو با css میشه انجام داد ولی نمیدونم چطور اندازه ستون هارو مشخص کنم چون اندازه ستون ها در بانک اطلاعاتیم هستن .
سلام
فرض می کنیم سه داده در دیتابیس با اندازه های 30 ، 70 و 100 دارید . این مقادبر رو از دیتابیس دریافت میکنید (کوئری میزنید) . درصد هر داده رو نسبت به کل حساب میکنید . مثلا درصد داده اول 30 تقسیم بر 200 میشه 15 درصد . در اندازه ستون ها از این درصد استفاده کنید .
متوجه شدم ممنونم.
😉
خیلی هم عالی
background-color : black این بکراند رو سیاه می کنه من می خوام عکسم سیاه سفید شه !!!!
یک دستور برای بگکرداند دو رنگی به صورت گرادینت فکر میکنم باشه ولی الان یادم نیست ، یادم اومد بهتون میگم
سلام.
آقا میلاد یه سوال داشتم.
خصوصیت display در CSS چه کاری رو انجام میده؟
ممنون میشم جواب بدید. ❓
شیوه نمایش تگ رو تعیین می کنه . مثلا مقدار none میگه که تگ مخفی باشه . اینجا رو ببینید .
این خاصیت برای نحوه نمایش عنصر ما استفاده می شود
این خاصیت دارای سه پارامتر می باشد :
display : none : اگر این خاصیت را استفاده نمائید ، عنصر شما پنهان می باشد.
display :block : این خاصیت معمولا برای منوها استفاده می شود منوی هایی که در گوشه بعضی از سایت ها دیده می شود
display : inline : با این خاصیت مثلا می توانید یک منوی افقی ایجاد نمائید
اگر متوجمه نشدید بگوید تا مثال هایی بزنم
مرسی از آموزشتون ……. یه سوال فقط ….اگه یه عکس سیاه سفید باشه و بخوایم وقتی موس روی اون هست رنگی بشه و یکم به سمت بالا حرکت کنه باید چه کار کنیم ….؟؟؟؟
برای اینکار از خاصیت background-color : black و با استفاده از خاصیت های top میتونی حرکت به سمت بالا و پائین بدهی
ممنون که جواب دادید.
😉
خواهش میکنم
راستی ببخشیدا چرا مطالب رو اینجوری توضیح میدین؟! یه خورده کلی نمیگین؟ من که هیچی نمیفهمم! دوستانو نمیدونم.یه خورده بیشتر میشه توضیح بدین . من خودم فقط با اچ تی ام ال آشنایی دارم.ولی هیچی از مطالب شما نمیفهم خیلی هم زور میزنم ولی نمیشه.نمیدونم اشکالش از کجاست 😥
دوست عزیز این بخش آموزش css3 می باشد و به قول دانشگاهی ها ، پیش نیاز آن css می باشد ، در ابتدا css را یاد بگیرد و پس شروع به یادگیری css3 نمائید
سلام.
خیلی مطلب خوبی بود.
فقط میشه بگید اگه بخوام وقتی موس میره روی شیء طولش از چپ بزرگتر بشه و نه از راست باید چی کار کنیم؟
مثلا می توانید برای عنصر body یک استایل تعریف کنید مانند :
در ابتدا وارد آدرس زیر شوید :
سپس سورس کد صفحه را مشاهده نمائید ctrl + u
نه کلا منظورم اینه که خیلی خوب کار میکنین 😆 دمه شما hot