CSS3 Video first frameПреди около 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

Материали

Video icon

Свалете видеото
с лекцията (mp4)

PowerPoint presentation icon

Свалете PowerPoint презентацията

Demo Icon

Свалете
демотата


View Comments