بدون شک یکی از درخشان ترین روند 2012توسعه است CCS3، HTML5. امروز ما یک نمای کلی و بسیار مفید از نمونه ها را ارائه می دهیم " 20+: درس های خلاقانه و مفید در CSS3″ارائه شده در SpeckyBoy. همه نمونه ها ساخته شده اند بدون جاوا اسکریپت پاک کنید، درس های ارائه شده حاوی دمو و فایل های آماده CSS3 برای دانلود.

ما مطمئن هستیم که این تکنیک ها برای توسعه دهندگان وب مفید خواهد بود!

درس های css3 :

1. گالری عکس CSS3، لغزنده، جلوه ها با تصاویر

1.1.Slider در CSS3

من نمی توانم آن را باور کنم، اما این نوار لغزنده با جلوه های مختلف به طور انحصاری در CSS3 ساخته شده است، بسیار چشمگیر.

1.2. پس‌زمینه یک وب‌سایت تمام صفحه با افکت اسلایدر با استفاده از CSS3

طراحان وب مدت‌هاست که زمینه‌های مختلف سایت را آزمایش می‌کنند، اما تا به حال کار بسیار کمی با CSS خالص انجام می‌شد، باید از JS استفاده می‌کردید. اکنون CSS3 به شما این فرصت را می‌دهد که با پس‌زمینه سایت خود هر طور که می‌خواهید انجام دهید - می‌توانید یک پس‌زمینه با یک عکس بزرگ و با کیفیت بالا داشته باشید، می‌توانید چندین پس‌زمینه را با افکت‌های مختلف تغییر دهید، و با مقیاس‌پذیری پس‌زمینه بسته به پارامترهای صفحه نمایش به طور کلی، یک فرصت شگفت انگیز برای سایت های خلاق.

1.3. لایت باکس در CSS3

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

1.4. ویژگی های تصویر در CSS3

این آموزش ویژگی های جدیدی را در CSS3 برای ویژگی های تصویر، مانند گوشه های گرد، سایه ها و سایر افکت ها نشان می دهد.

1.5. بنر متحرک با استفاده از CSS3

1.6 در حال بارگذاری پانل در CSS3

1.7. روبان سه بعدی با CSS3

نمایش نسخه ی نمایشی یا دانلود فایل های کد CSS3 →

2. منوها، ناوبری و دکمه های CSS3

2.1. منوی Apple.com در CSS3

آموزش ساخت منوی معروف Apple.com در CSS3.

2.2. منوی افقی متحرک در CSS3

یک آموزش ساده که نحوه ساخت منوی متحرک در CSS3 با افکت های مختلف را نشان می دهد.

2.3. منوی عمودی متحرک با CSS3

2.4. دکمه های متحرک با CSS3

آموزش عالی با 7 نمونه از دکمه های خلاقانه متحرک.

2.5. منوی متحرک خلاقانه با تصاویر با استفاده از CSS3

در این درس، 10 مثال ارائه شده به سادگی چشم باز هستند. چنین منوهای خلاقانه پیچیده ای قبلاً منحصراً با استفاده از JS ایجاد می شد. چشمگیر!

2.6. جلوه ناوبری دایره با CSS3

یک جلوه غیرمعمول هنگام نگه داشتن ماوس روی یک مورد ناوبری انتخاب شده به شکل یک دایره با یک تصویر. توجه داشته باشید!

2.7. منوی کشویی در CSS3

آموزش پیاده سازی یک منوی کشویی ساده با سطوح فرعی در CSS3.

2.8. ناوبری CSS3 با انتقال متحرک

3. اثرات مختلف بر روی CSS3

3.1. راهنمای ابزار متحرک در CSS3 بدون جی کوئری

به لطف توسعه فناوری های وب و مرورگرهای مدرن، می توانیم بدون استفاده از جاوا اسکریپت جلوه های زیادی ایجاد کنیم. این امر زندگی را برای توسعه دهندگان وب بسیار آسان کرده است. زیرا اکنون می توانیم با استفاده از CSS خالص و بدون استفاده از جاوا اسکریپت افکت ایجاد کنیم. بنابراین، در این مقاله می‌خواهم به شما بگویم که آیا می‌توان با استفاده از CSS خالص بنر ایجاد کرد، چه چیزی نیاز دارد، و همچنین مزایا و معایب این روش.

CSS3 طیف گسترده ای از امکانات را فراهم می کند، فقط باید از آنها به درستی استفاده کنید. به عنوان مثال، من می‌خواهم پیوندهایی را به آثار گذشته‌ام «شخصیت‌ها در CSS خالص» ارائه دهم:

ابتدا می خواهم نمونه هایی از بنرهای CSS خود را ارائه کنم. ممکن است قبلاً آنها را در سایت دیده باشید، اما حتی ندانید چه چیزی و چگونه ایجاد شده اند.

درباره دمو:هر نمونه (بنر) دارای مدت زمان بر حسب ثانیه در پایین است و همچنین دکمه "Refresh" دارد که نمایش بنر را از ابتدا شروع می کند.

بنر شماره 1 - "آموزش انفرادی ساخت سایت":

من این بنر را حدود 2 روز ایجاد کردم. چرا اینقدر طولانی؟ زیرا تطبیق بنر (لاستیکی ساختن آن) هنگام محاسبه مجدد مختصات مدتی طول کشید. در حال حاضر، اندازه آن به عرض بلوک والد (که حاوی خود بنر CSS است) بستگی دارد.

من این بنر را به معنای واقعی کلمه در 2-2.5 ساعت ایجاد کردم. تنها چیزی که در اینجا روند ایجاد را کند کرد، انتخاب آیکون ها بود. چون باید نزدیک به موضوع بنر انتخاب می شدند.

این بنر بسته به عرض بلوک ظرفی که در آن قرار دارد نیز کشیده می شود. تقریباً 1.5 ساعت طول کشید تا ایجاد شود.

این بنرها بسیار زیبا به نظر می رسند، اما آیا واقعاً به همین سادگی است؟ بیایید به مزایا و معایب این روش ایجاد بنرها نگاه کنیم.

مزایا و معایب بنرهای CSS:

چگونه یک بنر CSS ایجاد کنیم؟

1 ایده

ابتدا باید بدانید که بنر دقیقاً چه انیمیشنی باید داشته باشد (چه چیزی، کجا و از کجا باید حرکت کند و کجا ظاهر شود). می توانید یک برگه A4 بردارید و ترسیم کنید که هر عنصر کجا حرکت می کند و چه چیزی باید روی بنر باشد.

از این گذشته، اگر ندانید که چه چیزی باید باشد و چگونه کار می کند، نمی توانید شروع به ایجاد بنر کنید.

2 ساختار HTML

مرحله بعدی ایجاد نشانه گذاری HTML است تا بتوان عناصر را جابجا کرد (و برای آنها متحرک کرد). یعنی شما نمی توانید همه کارها را با یک تصویر انجام دهید که به سمت راست یا چپ حرکت می کند و سپس انیمیشن تمام می شود.

به طور معمول یک بلوک مشترک وجود دارد که بقیه بلوک ها در آن قرار دارند. و در این بلوک کلی می توانیم عناصر را همانطور که نیاز داریم مدیریت کنیم.

3 انیمیشن CSS

مرحله آخر ایجاد انیمیشن برای بلوک ها و همچنین نوشتن سبک برای آنها است، زیرا برخی از قسمت های انیمیشن به طور پیش فرض مخفی هستند.

برای ایجاد بنر شخصی خود، باید اصول اولیه CSS و HTML را به خوبی درک کنید.

با این آموزش انیمیشن های اولیه CSS را بیاموزید - .

نتیجه گیری

همه مرورگرهای مدرن از ویژگی های CSS3 پشتیبانی می کنند، به این معنی که بنرها در چنین مرورگرهایی به درستی نمایش داده می شوند. اما با کمک افزونه های JS می توانید بنرهای CSS را برای مرورگرهای قدیمی ایجاد کنید. با یادگیری اصول اولیه انیمیشن CSS، فرآیند ایجاد بنر را درک خواهید کرد و به زودی اولین بنر خالص CSS خود را ایجاد خواهید کرد! 😉

بیایید با استفاده از CSS3 یک بنر تبلیغاتی بسازیم. در حال حاضر فقط از انیمیشن های CSS3 به طور کامل پشتیبانی می کند مرورگرهای فایرفاکسو WebKit. اما کارکردن بنر در مرورگرهای دیگر به اندازه کافی آسان است. با این حال، هنگام آزمایش با آخرین تکنیک های CSS، انتظار عملکرد عالی را در همه جا (به خصوص در IE 7 و بالاتر) نداشته باشید.

توجه:برای صرفه جویی در فضا در صفحه، تمام پیشوندهای سازنده مرورگر حذف شده اند. کد را در منابع ببینید.

نشانه گذاری HTML

ابتدا به ساختار بنر در HTML نگاه می کنیم. در این مرحله باید تصور کنیم که انیمیشن چگونه عمل می کند:

برای درک عمیق تر از ساختار نشانه گذاری، بیایید روی قایق تمرکز کنیم:

سه انیمیشن با قایق رخ می دهد:

لیز خوردن قایق در سمت چپ. برای یک لیست (گروه) نامرتب اعمال می شود.

تقلید قایق که روی آب تکان می خورد. برای یک آیتم فهرست (قایق) اعمال می شود.

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

اگر به صفحه دمو نگاه کنید، می بینید که انیمیشن مورد لیست (قایق) نیز بر عنصر div داخل آن (علامت سوال) تأثیر می گذارد. همچنین، انیمیشن "sliding out" برای یک لیست نامرتب روی آیتم لیست (قایق و علامت سوال) کار می کند.

بنابراین می توان نتیجه گرفت که عناصر کودک علاوه بر اعمال خود، انیمیشن های والدین خود را نیز دریافت می کنند. اکنون تنها چیزی که باقی می ماند فهرست کردن ساختارهای والد/فرزند است.

CSS

قبل از شروع تجزیه و تحلیل ایجاد انیمیشن، باید اطمینان حاصل کنید سازگار با عقببا مرورگرهای قدیمی

سازگاری به عقب

ما به سادگی با استایل دادن به نشانه گذاری به گونه ای که گویی انیمیشن های CSS اصلا وجود ندارند، سازگاری رو به عقب را تضمین می کنیم. اگر شخصی صفحه را در یک مرورگر قدیمی مشاهده کند، یک تصویر ثابت معمولی و نه فضای سفید خالی را می بیند.

به عنوان مثال: اگر از CSS استفاده کنید چه؟ مشابه موارد زیر، مشکلاتی وجود خواهد داشت:

/* اشتباه است! */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 0; /* این div به طور پیش فرض پنهان است - اوه! */ انیمیشن: ما -fade-in-animation 1s 1 )

اگر مرورگر از انیمیشن ها پشتیبانی نکند، عنصر div برای کاربر نامرئی می ماند.

و به این صورت است که ما از سازگاری عقب با مرورگرهای قدیمی اطمینان می‌دهیم:

/* TRUE */ @keyframe our-fade-in-animation ( 0% (opacity:0;) 100% (opacity:1;) ) div ( opacity: 1; /* این div به طور پیش فرض قابل مشاهده است */ انیمیشن: ما -fade-in-animation 1s 1 )

حالا عنصر div نمایش داده می شود حتی اگر انیمیشن شروع نشود. و در مرورگرهای مدرن div ابتدا در طول انیمیشن پنهان می شود.

پیچ و تاب

اکنون می دانیم که چگونه از سازگاری با عقب اطمینان حاصل کنیم (که به جلوگیری از مشکلات هنگام کار با پروژه های واقعی کمک می کند). وقت آن است که پایه کد CSS خود را ایجاد کنیم.

شما باید 3 نکته را به خاطر بسپارید:

از آنجایی که این بنر در سایت های مختلف استفاده خواهد شد، ما تمام تلاش خود را خواهیم کرد انتخابگرهای CSSخاصهمه آنها با شناسه #ad-1 شروع می شوند. به این ترتیب سعی می کنیم از همپوشانی بین کد خود و کد سایت جلوگیری کنیم.

ما عمداً تأخیر انیمیشن را نادیده می گیریمدر تاسیسات اگر هنگام تنظیم سبک‌ها با دید پیش‌فرض عناصر از تاخیر انیمیشن استفاده کنید، ساختار بنر به دلیل ناپدید شدن یا ظاهر شدن ناگهانی قسمت‌هایی از تصویر پس از تکمیل انیمیشن مختل می‌شود. تاخیر انیمیشن با مدت زمان و تنظیم فریم ها شبیه سازی می شود.

در صورت امکان ما از یک انیمیشن برای چندین عنصر استفاده می کنیم.به این ترتیب در زمان صرفه جویی می کنیم و حجم کد را کاهش می دهیم.

پس بیایید پایه بنر خود را ایجاد کنیم. بیایید موقعیت نسبی را برای آن تنظیم کنیم تا عناصر داخلی به درستی قرار گیرند. همچنین هر چیزی خارج از محدوده عنصر را پنهان می کند:

#ad-1 (عرض: 720 پیکسل؛ ارتفاع: 300 پیکسل؛ شناور: چپ؛ حاشیه: 40 پیکسل خودکار 0؛ تصویر پس‌زمینه: url(../images/ad-1/background.png؛ موقعیت پس‌زمینه: مرکز؛ پس‌زمینه -repeat: no-repeat: hidden box-shadow: 0px 6px #000;

سپس استایل هایی را برای فیلدهای متن و ورودی تنظیم می کنیم. با انیمیشن های مناسب تماس بگیرید. همچنین باید مطمئن شوید که محتوا دارای بالاترین شاخص z برای قطعات متحرک است تا با هم تداخل نداشته باشند:

#ad-1 #content ( عرض: 325 پیکسل؛ شناور: راست؛ حاشیه: 40 پیکسل؛ تراز متن: مرکز؛ شاخص z: 4؛ موقعیت: نسبی؛ سرریز: قابل مشاهده؛ ) #ad-1 h2 (فونت-خانواده: "Alfa Slab One"، رنگ شکسته: #137dd5; تأخیر */ ) #ad-1 h3 ( font-family: "Boogaloo"، خط شکسته؛ رنگ: #202224؛ اندازه قلم: 31px؛ ارتفاع خط: 31px؛ text-shadow: 0px 0px 4px #fff؛ انیمیشن: تاخیری -fade-animation 1 ease-in-out /* ظاهر h3 با تاخیر شبیه سازی شده */ ) فرم #ad-1 ( حاشیه: 30px 0 6px؛ موقعیت: نسبی؛ انیمیشن: فرم-انیمیشن 12s 1 ease-in; -out; /* خارج کردن فرم برای وارد کردن یک آدرس ایمیل با تاخیر شبیه سازی شده */ ) #ad-1 #email ( عرض: 158 پیکسل؛ ارتفاع: 48 پیکسل؛ شناور: سمت چپ؛ بالشتک: 0 20 پیکسل؛ اندازه قلم: 16 پیکسل. font-family: "Lucida Grande"، sans-serif text-shadow: 1px 0px #a2917d;

حاشیه: 1px جامد #a2917d;

#ad-1 ul#water( /* اگر به انیمیشن دیگری برای آب نیاز دارید، می‌توانید آن را اینجا اضافه کنید */ ) #ad-1 li#water-back ( عرض: 1200 پیکسل؛ ارتفاع: 84 پیکسل؛ تصویر پس‌زمینه: url( .. /images/ad-1/water-back.png: z-index: absolute: -20px: water-back-in-out; * تقلید از امواج پاشیده */ ) #ad-1 li#water-front (عرض: 1200 پیکسل؛ ارتفاع: 158 پیکسل؛ تصویر پس‌زمینه: url (../images/ad-1/water-front .png)؛ پس‌زمینه تکرار: z-index: -70px: انیمیشن جلوی آب 2 ثانیه، پخش شدن امواج را کمی سریعتر انجام می دهد.

بیایید سبک هایی را برای قایق و عناصر آن تنظیم کنیم. انیمیشن های مربوطه را نیز می نامیم:

#ad-1 ul#boat ( عرض: 249 پیکسل؛ ارتفاع: 215 پیکسل؛ z-index: 2؛ موقعیت: مطلق؛ پایین: 25 پیکسل؛ سمت چپ: 20 پیکسل؛ سرریز: قابل مشاهده؛ انیمیشن: قایق در انیمیشن 3s 1 ease-out . موقعیت: 0px: قابل مشاهده است. ad-1 #question-mark (عرض: 24 پیکسل؛ ارتفاع: 50 پیکسل؛ تصویر پس زمینه: url(../images/ad-1/question-mark.png)؛ موقعیت: مطلق؛ سمت راست: 34 پیکسل؛ بالا: -30 پیکسل انیمیشن: 4s-fade-animation 1 ease-in-out /* Fade in the question */ ;

حال بیایید استایل هایی برای ابرها ایجاد کنیم. برای آنها ما از انیمیشن با جلوه حرکت بی پایان استفاده خواهیم کرد. تصویر جوهر ایده را نشان می دهد:

و این هم کد CSS:

#ad-1 #clouds ( موقعیت: مطلق؛ بالا: 0px؛ z-index: 0؛ انیمیشن: cloud-animation 30s بی نهایت خطی؛ /* ابرها را به سمت چپ اسکرول کنید، تنظیم مجدد و تکرار کنید */ ) #ad-1 # cloud-group -1 ( عرض: 720 پیکسل؛ موقعیت: مطلق؛ چپ: 0 پیکسل؛ ) #ad-1 #cloud-group-2 ( عرض: 720 پیکسل؛ موقعیت: مطلق؛ سمت چپ: 720 پیکسل؛ ) #ad-1 .cloud- 1 ( عرض: 172 پیکسل؛ ارتفاع: 121 پیکسل؛ آدرس اینترنتی (../images/ad-1/cloud-1.png؛ موقعیت: بالای مطلق: 40 پیکسل؛ (عرض: 121 پیکسل؛ ارتفاع: 75 پیکسل؛ تصویر پس‌زمینه: url( ../images/ad-1/cloud-2.png: absolute: -25px ) #ad-1 ( عرض: 105px; : url(../images/ad-1/cloud-3.png: absolute;)

انیمیشن ها

یادآوری:از این نقطه به بعد، هیچ چیز در واقع متحرک نیست. اگر اکنون به بنر ما نگاه کنید، یک تصویر ثابت خواهید دید. اینجاست که انیمیشن ها ساخته می شوند و در کد بالا فراخوانی می شوند.

حالا بیایید به تصویر استاتیک زیبای خود جان بدهیم:

/* انیمیشن تاخیری شبیه سازی شده برای نمایش چندین عنصر استفاده می شود. شبیه سازی تاخیر با شروع فرآیند با ادامه 80٪ انیمیشن (و نه بلافاصله) انجام می شود. به این ترتیب می‌توانید هر تاخیری را شبیه‌سازی کنید: */ @keyframes delayed-fade-animation ( 0% (opacity: 0;) 80% (opacity: 0;) 100% (opacity: 1;) ) /* انیمیشن برای نمایش فرم با یک آدرس ایمیل و یک دکمه. از تقلید تاخیر نیز استفاده می‌شود */ @keyframes فرم-انیمیشن ( 0% (مادری: 0؛ سمت راست: -400 پیکسل؛) 90% (تصویر: 0؛ سمت راست: -400 پیکسل؛) 95% (مادری: 0.5؛ راست: 20 پیکسل ;) 100% (تاری: 1؛ راست: 0 پیکسل؛) ) /* این انیمیشن برای بیرون آوردن قایق از صفحه نمایش در ابتدای ویدیو استفاده می شود: */ @keyframes boat-in-animation ( 0% (سمت چپ: -200px;) 100% (سمت چپ: 20px;) ) /* انیمیشن برای ابرها. گروه اول ابرها از مرکز شروع به حرکت می کنند و دسته دوم - به سمت راست صفحه. گروه اول به آرامی از صفحه نمایش حذف می شود و گروه دوم در سمت راست ظاهر می شود. هنگامی که گروه سمت چپ کاملاً پنهان شد، ابرها خیلی سریع به موقعیت اصلی خود باز می گردند: */ @keyframes cloud-animation ( 0% (سمت چپ: 0px;) 99.9999% (سمت چپ: -720px;) 100% (سمت چپ: 0px; ) ) / * سه انیمیشن آخر تقریباً یکسان هستند - تفاوت در موقعیت قرارگیری عناصر نهفته است. آنها پخش شدن امواج اقیانوس را شبیه سازی می کنند: */ @keyframes boat-animation ( 0% (پایین: 0px؛ سمت چپ: 0px؛) 25% (پایین: -2px؛ سمت چپ: -2px؛) 70% (پایین: 2px؛ سمت چپ) : - 4px;) 100% (پایین: -1px؛ سمت چپ: 0px;) ) @keyframes water-back-animation ( 0% (پایین: 10px؛ سمت چپ: -20px؛) 25% (پایین: 8px؛ سمت چپ: - 22px؛ 70% (پایین: 12 پیکسل؛ سمت چپ: -24 پیکسل؛) 100% (پایین: 9 پیکسل؛ سمت چپ: -20 پیکسل؛) ) @keyframes water-front-animation ( 0% (پایین: -70 پیکسل؛ سمت چپ: -30 پیکسل ;) 25% (پایین: -68 پیکسل؛ سمت چپ: -32 پیکسل؛) 70٪ (پایین: -72 پیکسل؛ سمت چپ: -34 پیکسل؛) 100٪ (پایین: -69 پیکسل؛ سمت چپ: -30 پیکسل؛) )

نتیجه گیری

در این درس چندین مفهوم کلیدی را یاد گرفتیم:

1. عناصر وارث انیمیشن های والدین خود را علاوه بر انیمیشن های خود دریافت می کنند.
2. هنگام ایجاد یک بنر، باید سعی کنید از یک شناسه منحصر به فرد استفاده کنید تا از همپوشانی کد با یک پروژه CSS موجود جلوگیری کنید.
3. موقعیت و سبک عناصر باید طوری انتخاب شود که انگار انیمیشن در دسترس نیست تا از سازگاری با عقب اطمینان حاصل شود.
4. در صورت امکان، باید از یک انیمیشن برای چندین عنصر استفاده کنید.

امروز قصد داریم یک بنر با استفاده از انیمیشن CSS3 ایجاد کنیم.

در حال حاضر فقط مرورگرهای فایرفاکس و WebKit از انیمیشن های CSS پشتیبانی می کنند، اما ما به دنبال این خواهیم بود که چگونه می توانیم این بنرها را در مرورگرهای دیگر (که من آن ها را مرورگرهای قرن هجدهم می نامم) کار کنند. با این حال، هنگام آزمایش با فناوری‌های مدرن CSS، نباید انتظار پشتیبانی عالی در همه مرورگرها (به ویژه IE 7 و پایین‌تر) داشته باشید.

پس بیایید بنرهای متحرک بسازیم!

لطفا توجه داشته باشید: برای صرفه جویی در فضا، تمام پیشوندهای مرورگر حذف شده اند. سانتی متر فایل های منبعبرای دیدن همه کدهای CSS اگر با انیمیشن های CSS آشنایی ندارید، به شدت توصیه می کنماول از همهاین را بخوانید

نشانه گذاری HTML

ابتدا ساختار بنر را با استفاده از HTML ایجاد می کنیم. در این مرحله ما باید در مورد نحوه عملکرد انیمیشن خود فکر کنیم - چگونه بر عناصر کودک و والدین در ساختار نشانه گذاری ما تأثیر می گذارد (این را در زیر توضیح خواهم داد):