CSS3

774 views
659 views

Published on

Синглтон ХХК-ны дизайнер

Published in: Education
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
774
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

CSS3

  1. 1. CSS3 Дизайнер
  2. 2. • Тэмдэглэгээт хэлэн дээр бичигдсэн (Markup Language) файлын формат болон харагдах байдалд гол нөлөөтэй CSS хэл нь HTML, XHTML, XML, SVG, XUL дээр бичигдсэн вэб хуудсыг загварчилдаг.• CSS3 modules гэж нэрлэгдсэн хэд хэдэн документэд хуваагддаг. Аль ч модуль нь CSS2 дээр бичигдсэн бүх зүйлийг өргөтгөх эсвэл шинээр нэмэх, хийх боломжтой зүйлүүдийг оруулж болдог.• CSS-ийн 3 дахь түвшний хувилбарыг CSS2 гарахад эхэлж байсан бөгөөд анхны драфт нь 1999 оны 6 сард гарч байжээ.• 2011 оны 11 сарын байдлаар CSS-ийн 50 модулийг гаргасан гэнэ. Тэдгээрээс 2011 онд W3C-гээс санал болгож байгаа нь Selectors, Namespaces, Color юм байна.
  3. 3. • Нэр дэвшүүлж байгаа модулиудын хувьд Backgrounds and Colors, Media Quieries, Multi-Column Layout орж байгаа бөгөөд энэ түвшинд цаашид улам сайжруулъя гэвэл vendor prefix-үүдийг багасгах хэрэгтэй гэж зөвлөж байгаа юм.• CSS3 одоогоор бүх браузераар дэмжигдэхгүй ч JavaScript болон CSS3 дээр ижил эффектийг ашиглан нэг ижил имэйжин дээр ажилласан үр дүнг харьцуулахад CSS3 дээр ажилласан нь арай дэвшилттэй үр дүнг гаргасан байна.• CSS-ын нэг дутагдалтай тал нь өөр өөр браузер ашиглаж байгаа тохиолдолд дэлгэцэн дээр юуны хэрхэн харагдахыг өөрчлөх филтерийг сайжруулах хэрэгцээ, шаардлага байгаа гэж үзэж байна.
  4. 4. • CSS Firefox болон Chrome дээр төдий л сайн дэмжигдэхгүй байгаа юм.• CSS3 нь вэб сайтын харагдах байдлыг, өнгө үзэмжийг нилээдгүй сайжруулахуйц шинэ шинэ элементүүдийг оруулснаараа давуу болж байна.• Вэб сайтын бүтцэд хамгийн чухал үзүүлэлт биш ч хэрэглэгчид хялбархан ашигладаг шигээ өнгө үзэмжийг илүүтэй чухалчлах болсон өнөө үед CSS-ийн ахисан 3 дахь хувилбар нь оновчтой сонголт болох юм.
  5. 5. • CSS3-ийг сонгосноор вэб сайтын бүтэц хийгээд үзэмж аль аль нилээд боловсронгуй болох юм.• Сабменюнүүд дүүжлэгдэж унжих, менюгээ хөндлөнгөөш байрлуулах, дугуйрсан өнцөгтэй менюнүүд гээд вэб сайтад байх цомхон хэмжээний донжыг нь олсон чимэгнүүдийг CSS3 ашиглан хийх боломжтой.
  6. 6. • CSS3 дээр ажиллахад илүү хялбар, цэгцтэй болсныг дараах харьцуулсан жишээгээр үзүүлье!CSS2 <div class=”foo”> <div class=”inner”> <div class=”inner2”>• Нэмэлтээр 3 элемент ашиглах <div class=”inner3”></div>• 4 background зураг, булан бүрт </div> </div>нэгийг, эсвэл нэг том зураг </div> .foo { background: url(img/corner_tr.png) top right no-repeat; } .foo .inner { background: url(img/corner_br.png) bottom right no-repeat; } .foo .inner2 { background: url(img/corner_t1.png) top left no-repeat; } .foo .inner3 { background: url(img/corner_tr.png) bottom left no-repeat; }
  7. 7. CSS3• 20рх - бүх булангийн радиусын хэмжээ • 40рх - хөндлөнгөөш байх булангийн радиусны хэмжээ • 20 рх: босоогоорх радиусны хэмжээBorder-radius: 20px Border-radius: 40px / 20px
  8. 8. CSS3• 40px - зүүн дээд, баруун доод булан • 40рх – зүүн дээд булан• 10px - баруун дээд, зүүн доод булан • 50% - баруун дээд, зүүн доод булан • 0 – баруун доод буланBorder-radius: 40px 10px Border-radius: 40px 50% 0
  9. 9.  CSS3 дээр сүүдэр оруулах өөрчлөлтүүдийг дэмжих браузер
  10. 10. • Сүүдэр оруулахCSS2 <div class="wrap1"><div class="wrap2"> <div class="wrap3"><img src="object.gif" alt="The object casting a shadow"/></div> </div></div> .wrap, .wrap2, wrap3 { display:inline-table; /**/ display:block;/**/ } .wrap { float:left; background:url(shadow.gif) right bottom no-repeat; } .wrap2 { background:url(corner_b1.gif) left bottom no-repeat; } .wrap3 { padding: 0 4px 4px 0; background:url(corner_tr.gif) right top no-repeat; }
  11. 11. CSS3• 10px - Хөндлөнгөөш оффсет • 10px - Хөндлөнгөөш оффсет• 5px - Босоо оффсет • 5px - Босоо оффсет• 15px - Бүдгэрүүлэлтийн радиус • 15px - Бүдгэрүүлэлтийн радиус• rgba - Сүүдэрлэх өнгө • inset - Дотогшоогоо сүүдэрлэхbox-shadow: 10px 5px 15px rgba (0,0,0,.5) box-shadow: 10px 5px 15px black inset
  12. 12. CSS3• 20px - Хөндлөнгөөш оффсет• 20px - Босоо оффсет• 15px - Бүдгэрүүлэлтийн радиус• -15px - Сүүдэрлэж харагдах зай• rgba - Сүүдэрлэх өнгөbox-shadow: 20px 20px 15px -15px #f09
  13. 13.  Уусгалт оруулахCSS2 CSS3Нэг axis-т давхацсан 1 рх х N рх график #f09 - Эхний өнгө black – Дараачийн өнгөbackground: #f09 url(linear-gradient.png) top repeat-x; background: linear-gradient (#f09, black)Өндөр өргөнийг дурын хэмжээгээр өгөхbackground: #f09 url(radial-gradient.png) top left no repeat;
  14. 14. CSS3-45 deg – Өнцөгний хэм white- Эхний өнгө#f09 - Эхний өнгө #f09 – Голын өнгөblack – Дараачийн өнгө black – Дараачийн өнгөlinear-gradient: (-45 deg, #f09, black) linear-gradient: (white, #f09, black)
  15. 15. CSS3white – Эхний өнгө #f09 – Эхний өнгө#f09 20% - 20% дээр #f09 өнгө байрлана transparent – Дараачийн өнгөblack – Дараачийн өнгөlinear-gradient (white, #f09 20%, black) radial-gradient (#f09, transparent)
  16. 16.  CSS3 дээр уусгалт оруулах өөрчлөлтүүдийг дэмжих браузер
  17. 17.  Эргүүлэг болон налалт хийх хуучирсан аргаCSS2<img src="rotated-with-text.png" alt=""/>.foo{background:: url(rotated-box.png) no-repeat;width: 200px;height:200px;padding:20px;overflow:auto;}
  18. 18. CSS3 Rotate – шилжүүлэг өөрчлөлт хийх хэлбэр /Rotate – шилжүүлэг өөрчлөлт хийх хэлбэр / эргүүлэхэргүүлэх 30 deg – Хөндлөнгөөр налуулах-30 deg – эргүүлэх өнцөгний хэмжээ -10 deg – Босоогоор налуулахtransform: rotate (-30deg) transform: skew (30deg, -10deg)
  19. 19.  CSS3 хийж болох бусад өөрчлөлтүүдЭргүүлж бас налуулахаас гадна• Матриц• Орчуулга• Хэмжилтзэргийг хийж болно. CSS3 дээр 2D-ээр хийж болох бусад өөрчлөлтүүдийн дэмжих браузер
  20. 20.  CSS Selectors (Сонголтууд)
  21. 21.  Webfonts
  22. 22.  Text wrapping
  23. 23.  Columns (Баганад хуваах)
  24. 24.  Text stroke
  25. 25.  Opacity
  26. 26.  Hue / Saturation / Luminance colorHue Өнгөний дэвсгэр, нүүрний өнгөSaturation НэвтрэлтLuminance Гэрэлтэх байдал зэргийн өнгийг өгөх, сонгох
  27. 27.  Rounded corners (Буланг дугуйруулах)
  28. 28.  Gradiants (Уусгалт)
  29. 29.  Background enhancements (Background нэмэх сайжруулах)
  30. 30.  Border image (Зурган хүрээ)
  31. 31.  Flexible Box Model (Хайрцаглах загвар)

×