Преди около 2 седмици (средата на август 2011) водих във Варна няколко лекции, свързани с уеб технологиите. Лекциите водихме с моя колега Дончо на ученици от единадесетата лятна изследователска школа по математика и информатика (ЛИШ‘11). Разгледахме детайлно HTML, CSS, JavaScript, jQuery, HTML5 и CSS3. Именно последната лекция ми се стори достатъчно интересна, за да я споделя в блога. Лекцията можете да гледате директно от сайта. Качил съм също демотата и презентацията. Приятно гледане!

Видео лекция

Съдържание на лекцията

Най-общо в лекцията за CSS3 се разглеждат новите селектори, новите пропъртита свързани с текстовете, новите цветови модели, новите неща свързани с бекграундите, новия box model, анимациите, 2D и 3D трнсформациите на елементите и новите пропъртита свързани с бордерите. Има демота за почти всички неща, разгледани в презентацията. Тъй като стандарта CSS3 още се разработва, информацията в лекцията може вече да не е актуална (особено информацията, свързана с това кое къде се поддържа). Въпреки това лекцията дава цялостна представа за това колко мощен е CSS3 и колко мъки може да ви спести при рязането на дизайни. Ето и малко по-детайлно съдържание на лекцията и презентацията:

• What is CSS 3?
• Selectors
  • Attribute Selectors
    • E[foo^="bar"]
    • E[foo$="bar"]
    • E[foo*="bar"]
  • Structural Selectors
    • :root
    • E:nth-child(n)
    • E:nth-last-child(n)
    • E:nth-of-type(n)
    • E:nth-last-of-type(n)
    • E:last-child
    • E:first-of-type
    • E:last-of-type
    • E:only-child
    • E:only-of-type
    • E:empty
  • UI Selectors
    • E:enabled
    • E:disabled
    • E:checked
  • Other CSS 3 Selectors
    • E:target
    • E:not(s)
    • E ~ F
• Fonts
  • Font Embeds
  • Text Shadow
  • Text Overflow
  • Word Wrapping
• Colors
  • Opacity
  • RGBA Colors
  • HSL Colors
  • HSLA Colors
• Backgrounds
  • Gradient Backgrounds
  • Multiple Backgrounds
• Borders
  • Border color
  • Border image
  • Border radius
  • Box shadow
• Box Model
  • CSS3 box-sizing
  • CSS 3 Flexible Box Model
  • CSS 3 Box Model Properties
  • CSS 3 flex-direction
• Animations
  • 2D Animations
  • Transitions
  • 2D Transformations
  • 3D Transformations
• Exercises

Материали