animation

آموزش بوت استرپ ، نوار پیشرفت ( Progress Bar )

یکی از مهم ترین عناصر در برای نشان دادن پیشرفت یک پروژه ،  نمودار میله ای جهت آمارگیری و ... نوار پیشرفت می باشد. نوار پیشرفت ( Progress Bar ) همان تگ <progress> در html5 می باشد که بوت استرپ با ترکیب این المان با css و کمی جاوااسکریپت، به جذابیت بصری آن افزوده است و علاوه بر این، آن را به صورت ریسپانسیو نیز درآورده است. نکته: نوارهای پیشرفت در اینترنت اکسپلورر9 و ورژن های قبلی آن پشتیبانی نمی شود ( زیرا آنها از transition ها و animation ها برای ایجاد بعضی افکت های خود استفاده می کنند ). با استفاده از کلاس .progress در <div> اصلی و استفاده از .progress-bar در تگ های والد می توان یک ...

ادامه مطالب
آموزش چرخش یک شی با CSS3

با عرض سلام من صادق مهدی لو هستم و در این آموزش قصد دارم نحوه چرخش یک شی رو با استفاده از CSS3  بهتون آموزش بدم،‌ با مردان وردپرس همراه باشید. یکی از امکانات جدیدی که به CSS3 اضافه شده این هست که شما میتونید یک شی رو با هر زاویه ای که دلتون می خواد بچرخونید به نمونه زیر دقت کنید: [crayon-5a363cdbc8455031130949/] .demo511 { display: block;width: 10px;height: 200px;border: 1px solid;padding: 0px;font-size: 26px;font-family: Arial;background: #CCC;margin: 80px auto; -webkit-animation-name: rotation; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s ; /* Chrome, Safari, Opera */ -webkit-animation-iteration-count: infinite; animation-name: rotation; animation-duration: 4s ; animation-iteration-count: infinite; } @-webkit-keyframes rotation ...

ادامه مطالب