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

1. CSS3
Дизайнер

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. • Нэр дэвшүүлж байгаа модулиудын хувьд Backgrounds and
Colors, Media Quieries, Multi-Column Layout орж байгаа
бөгөөд энэ түвшинд цаашид улам сайжруулъя гэвэл
vendor prefix-үүдийг багасгах хэрэгтэй гэж зөвлөж байгаа
юм.
• CSS3 одоогоор бүх браузераар дэмжигдэхгүй ч JavaScript
болон CSS3 дээр ижил эффектийг ашиглан нэг ижил
имэйжин дээр ажилласан үр дүнг харьцуулахад CSS3
дээр ажилласан нь арай дэвшилттэй үр дүнг гаргасан
байна.
• CSS-ын нэг дутагдалтай тал нь өөр өөр браузер ашиглаж
байгаа тохиолдолд дэлгэцэн дээр юуны хэрхэн харагдахыг
өөрчлөх филтерийг сайжруулах хэрэгцээ, шаардлага
байгаа гэж үзэж байна.

4. • CSS Firefox болон Chrome дээр төдий л сайн
дэмжигдэхгүй байгаа юм.
• CSS3 нь вэб сайтын харагдах байдлыг, өнгө үзэмжийг
нилээдгүй сайжруулахуйц шинэ шинэ элементүүдийг
оруулснаараа давуу болж байна.
• Вэб сайтын бүтцэд хамгийн чухал үзүүлэлт биш ч
хэрэглэгчид хялбархан ашигладаг шигээ өнгө үзэмжийг
илүүтэй чухалчлах болсон өнөө үед CSS-ийн ахисан 3
дахь хувилбар нь оновчтой сонголт болох юм.

5. • CSS3-ийг сонгосноор вэб сайтын бүтэц хийгээд үзэмж
аль аль нилээд боловсронгуй болох юм.
• Сабменюнүүд дүүжлэгдэж унжих, менюгээ
хөндлөнгөөш байрлуулах, дугуйрсан өнцөгтэй
менюнүүд гээд вэб сайтад байх цомхон хэмжээний
донжыг нь олсон чимэгнүүдийг CSS3 ашиглан хийх
боломжтой.

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. CSS3
• 20рх - бүх булангийн радиусын хэмжээ • 40рх - хөндлөнгөөш байх булангийн
радиусны хэмжээ
• 20 рх: босоогоорх радиусны хэмжээ
Border-radius: 20px Border-radius: 40px / 20px

8. CSS3
• 40px - зүүн дээд, баруун доод булан • 40рх – зүүн дээд булан
• 10px - баруун дээд, зүүн доод булан • 50% - баруун дээд, зүүн доод булан
• 0 – баруун доод булан
Border-radius: 40px 10px Border-radius: 40px 50% 0

9.  CSS3 дээр сүүдэр оруулах өөрчлөлтүүдийг дэмжих браузер

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. 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. CSS3
• 20px - Хөндлөнгөөш оффсет
• 20px - Босоо оффсет
• 15px - Бүдгэрүүлэлтийн радиус
• -15px - Сүүдэрлэж харагдах зай
• rgba - Сүүдэрлэх өнгө
box-shadow: 20px 20px 15px -15px #f09

14.  Уусгалт оруулах
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;

15. CSS3
-45 deg – Өнцөгний хэм white- Эхний өнгө
#f09 - Эхний өнгө #f09 – Голын өнгө
black – Дараачийн өнгө black – Дараачийн өнгө
linear-gradient: (-45 deg, #f09, black) linear-gradient: (white, #f09, black)

16. CSS3
white – Эхний өнгө #f09 – Эхний өнгө
#f09 20% - 20% дээр #f09 өнгө байрлана transparent – Дараачийн өнгө
black – Дараачийн өнгө
linear-gradient (white, #f09 20%, black) radial-gradient (#f09, transparent)

17.  CSS3 дээр уусгалт оруулах өөрчлөлтүүдийг дэмжих браузер

18.  Эргүүлэг болон налалт хийх хуучирсан арга
CSS2
<img src="rotated-with-text.png" alt=""/>
.foo{
background:: url(rotated-box.png) no-repeat;
width: 200px;
height:200px;
padding:20px;
overflow:auto;
}

19. CSS3
Rotate – шилжүүлэг өөрчлөлт хийх хэлбэр /
Rotate – шилжүүлэг өөрчлөлт хийх хэлбэр /
эргүүлэх
эргүүлэх
30 deg – Хөндлөнгөөр налуулах
-30 deg – эргүүлэх өнцөгний хэмжээ
-10 deg – Босоогоор налуулах
transform: rotate (-30deg) transform: skew (30deg, -10deg)

20.  CSS3 хийж болох бусад өөрчлөлтүүд
Эргүүлж бас налуулахаас гадна
• Матриц
• Орчуулга
• Хэмжилт
зэргийг хийж болно.
 CSS3 дээр 2D-ээр хийж болох бусад
өөрчлөлтүүдийн дэмжих браузер

21.  CSS Selectors (Сонголтууд)

22.  Webfonts

23.  Text wrapping

24.  Columns (Баганад хуваах)

25.  Text stroke

26.  Opacity

27.  Hue / Saturation / Luminance color
Hue Өнгөний дэвсгэр, нүүрний өнгө
Saturation Нэвтрэлт
Luminance Гэрэлтэх байдал зэргийн өнгийг өгөх, сонгох

28.  Rounded corners (Буланг дугуйруулах)

29.  Gradiants (Уусгалт)

30.  Background enhancements (Background
нэмэх сайжруулах)

31.  Border image (Зурган хүрээ)

32.  Flexible Box Model (Хайрцаглах загвар)