آموزش CSS3 (سی اس اس 3) - معرفی CSS3 (سی اس اس 3)
CSS3 (سی اس اس 3) جدیدترین استاندارد برای CSS است.
CSS3 (سی اس اس 3) با نسخه های قبلی، کاملاً سازگار است.
در این آموزش، با ویژگی های جدید CSS3 (سی اس اس 3) آشنا خواهید شد.
آموزش Moduleها در CSS3 (سی اس اس 3)
CSS3 (سی اس اس 3) به بخش هایی بنام Module تقسیم می شود. در CSS3 (سی اس اس 3) نسبت به نگارش قبلی برخی از خواص به بخش های کوچکتری تقسیم شده اند و برخی خواص جدید نیز اضافه شده است.
بعضی از مهم ترین Moduleهای CSS3 (سی اس اس 3):
- آموزش CSS3-لبه ها: گوشه ها را گرد کنید، سایه اضافه کنید و یا از تصاویر برای حاشیه ها استفاده نمایید.
- آموزش CSS3-پس زمینه: اندازه تصویر پس زمینه را مشخص نمایید و یا از چند تصویر به عنوان پس زمینه استفاده کنید.
- آموزش CSS3-شیب رنگ: یک انتقال آرام بین دو یا چند رنگ مختلف را نمایش دهید.
- آموزش CSS3-افکت های متن: متن را سایه دار کنید و نوشته های بلند را بشکنید.
- آموزش CSS3-فونت: هر فونتی را که می خواهید استفاده نمایید. حتی اگر روی کامپیوتر کاربر نصب نباشد.
- آموزش CSS3-تبدیل دو بعدی: با تبدیل دو بعدی، عناصر را حرکت دهید، بچرخانید، خم کنید، تغییر اندازه دهید و یا بکشید.
- آموزش CSS3-تبدیل سه بعدی: تبدیل سه بعدی به عناصر جلوه سه بعدی اضافه می کند.
- آموزش CSS3-انتقال یا Transision: در صورت تغییر ویژگی های یک عنصر، می توانیم این تغییر را بصورت تدریجی مشاهده نماییم.
- آموزش CSS3-متحرک سازی: عناصر را متحرک نمایید.
- آموزش CSS3-متن های چند ستونه: مانند روزنامه ها که چند ستونه هستند، متن را در صفحه به صورت چند ستونه نمایش دهید.
- آموزش CSS3-رابط کاربری: تغییر اندازه عناصر توسط کاربر، تنظیم دقیق اندازه عنصر و کشیدن حاشیه با فاصله از لبه اصلی.
توصیه CSS3 (سی اس اس 3)
خصوصیات CSS3 (سی اس اس 3) همچنان توسط W3C تحت توسعه است.
با این حال، بسیاری از قابلیت ها و ویژگی های CSS3 (سی اس اس 3) داخل مرورگر های مدرن اجرا شده است.
فیلم آموزش CSS3
در صورتی که فرصت مطالعه مطالب ارائه شده در سایت بیاموز را ندارید و می خواهید در کمترین زمان ممکن CSS پیشرفته را فرابگیرید، پیشنهاد ما، تهیه "فیلم آموزش CSS3" است.
در فیلم آموزشی زیر می توانید، جلسه اول آموزش css3 را مشاهده نمایید:
لطفا برای تهیه آموزش بالا، روی لینک روبرو کلیک فرمایید: فیلم آموزش CSS3
ببخشید من برای کدنویسی ازNusphere phpEd استفاده میکنم نمیدونم چرا انتخابگر nth-child و ~ و @keyframes رو اخطار میده!!!
برای رفع این مشکل چیکار کنم؟ممنون
دستورات nth-child و keyframes@ در CSS3 اضافه شده اند. بنابراین باید از نرم افزاری استفاده کنید که از CSS3 پشتیبانی کند. در اینترنت نوشته شده که PhpED 14.0 از CSS3 پشتیبانی می کنه. اگر این نسخه را دارید استفاده می کنید، سعی کنید CSS3 رو در تنظیماتش فعال کنید. در غیر این صورت نسخه ی مذکور(یا ورژن های بالاتر) رو نصب کنید.
واقعا کار تیم شما در زمینه ترجمه سازی و تدوین مطالب سایت فوق العاده عالی بوده است، امیدواریم بازهم از این کارها بکنید.
خداقوت
با تشکر از سایت خوب و عالیتون .یه سوال خارج از این مبحث داشتم .می خواستم بدونم برای یادگیری طراح UX , UI چه چیزهایی لازمه یاد بگیرم؟ممنون میشم از راهنماییتون
UI یعنی رابط کاربری و بیشتر با ظاهر بصری سایت سر و کار داره، ولی UX مربوط به تجربه‌ی کاربری که میشه که کمی فراتر از UI هست و فقط جنبه‌ی ظاهری رو شامل نمیشه.
مثلا برای خرید از یه فروشگاه، باید بررسی بشه که کاربر چه مراحلی رو دوست داره که اتفاق بیفته تا یه خرید راحت انجام بده...
برای اولی باید بیشتر روی دیزاین و گرافیک تمرکز کنید، ولی برای UX نیاز به کسب تجربه و بررسی نمونه سایتهای مختلف دارید.
می خواستم خواهش کنم نحوه چیدمان صفحه رو آموزش بدین من چیزایی که یادگرفتم نمی تونم کنار هم بزارم و یه صفحه کامل طراحی کنم
ممنون
1- با استفاده از عنصر div
2- با استفاده از عنصر table
در اینجا قصد دارم طراحی یک صفحه 2 ستونه را با استفاده از عنصر div خدمت شما آموزش دهم، اما قبل از شروع، باید مفهوم عناصر block و inline را کاملاً درک کرده باشید. همان طور که می دانید عنصر div یک عنصر block است، یعنی تمام طول یک سطر را به خود اختصاص می دهد، بنابراین زمانی که قصد طراحی یک صفحه دو ستونه را داریم به مشکل بر خواهیم خورد. اما راه حل این مشکل در خصوصیت float نهفته است، این خصوصیت علاوه بر اینکه عنصر را به سمت راست یا چپ شناور می کند، اگر عنصر float شده از نوع block باشد، آنرا به نوع inline نیز تبدیل خواهد کرد.
حالا با این مقدمه، بهتر می توانیم آموزش طراحی صفحه دو ستونه را آموزش بدیم. اما صفحه ی ما به یک header و یک footer نیز نیز دارد، بنابراین ابتدا یک div برای header و سپس در زیر آن دو تا div که کنار هم قرار می گیرند و دو ستون صفحه را تشکیل می دهند و نهایتاً یک div دیگر که در زیر دو ستون قرار می گیرد.
اما بنظرتون بهتر نیست که این مجموعه را داخل یک ظرف قرار بدیم، تا اگر زمانی خواستیم تغییری روی کل مجموعه بدهیم، بسادگی امکان پذیر باشد.
لطفاً با کلیک روی لینک زیر، مثال "خودتان امتحان کنید" مربوطه به توضیحات بالا را مشاهده نمایید:
beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_layout_divs
با ایجاد این سایت به معنای واقعی " برنامه نویسی را معنایی دیگر ببخشیم "را پیاده کردین .
واقعا با این سایت و این نحوه آموزش و پاسخگویی سریع به سوالات منت بزرگی را به گردن ما گذاشتین
من سایتهای زیادی رو امتحان کردم اکثر اونها نیمه راه آموزش رو ول کردن ولی شما این کار رو به پایان رساندین
امیدوارم در آینده نزدیک بتونیم با هم همکاری کنیم .
منتظر تماس شما برای همکاری هستم.