Submit Search
Upload
CSS3
•
1 like
•
823 views
Singleton
Follow
Синглтон ХХК-ны дизайнер
Read less
Read more
Education
Report
Share
Report
Share
1 of 33
Recommended
Web design lecture 3
Web design lecture 3
Chantsaldulam Ganbadrakh
Засаг.мн - Төрийн цахим хаалга
Засаг.мн - Төрийн цахим хаалга
Singleton
NodeJS
NodeJS
Singleton
Coaching
Coaching
Singleton
HTML5
HTML5
Singleton
MySQL Э.Насанжаргал
MySQL Э.Насанжаргал
Singleton
Java script xэрэглээ
Java script xэрэглээ
Singleton
Dynamic web 13
Dynamic web 13
Usukhuu Galaa
Recommended
Web design lecture 3
Web design lecture 3
Chantsaldulam Ganbadrakh
Засаг.мн - Төрийн цахим хаалга
Засаг.мн - Төрийн цахим хаалга
Singleton
NodeJS
NodeJS
Singleton
Coaching
Coaching
Singleton
HTML5
HTML5
Singleton
MySQL Э.Насанжаргал
MySQL Э.Насанжаргал
Singleton
Java script xэрэглээ
Java script xэрэглээ
Singleton
Dynamic web 13
Dynamic web 13
Usukhuu Galaa
Better CSS with Compass/Sass
Better CSS with Compass/Sass
Johan Ronsse
CSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, Gradients
Jatin_23
Workshop Advance CSS3 animation
Workshop Advance CSS3 animation
Pitchayanida Khumwichai
Sass: Introduction
Sass: Introduction
BalaKrishna Kolliboina
Css3 animation
Css3 animation
Ted Hsu
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend development
Konstantin Kudryashov
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
chriseppstein
Sass and compass workshop
Sass and compass workshop
Shaho Toofani
database 7-8
database 7-8
Usukhuu Galaa
Day 1
Day 1
ETC
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
davejohnson
Indices 01 mar2013044134
Indices 01 mar2013044134
Investors Empowered
Leica Zeno Platform
Leica Zeno Platform
Kendall James
Комплексная веб-аналитика
Комплексная веб-аналитика
alladvertising
Peribahasa 2
Peribahasa 2
Rohaya Ishak
Ardilla osoa
Ardilla osoa
mirenarbonies
Indices 30 aug2013065636
Indices 30 aug2013065636
Investors Empowered
Indices 28 sep2012051743
Indices 28 sep2012051743
Investors Empowered
Indices 13 dec2013050238
Indices 13 dec2013050238
Investors Empowered
More Related Content
Viewers also liked
Better CSS with Compass/Sass
Better CSS with Compass/Sass
Johan Ronsse
CSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, Gradients
Jatin_23
Workshop Advance CSS3 animation
Workshop Advance CSS3 animation
Pitchayanida Khumwichai
Sass: Introduction
Sass: Introduction
BalaKrishna Kolliboina
Css3 animation
Css3 animation
Ted Hsu
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend development
Konstantin Kudryashov
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
chriseppstein
Sass and compass workshop
Sass and compass workshop
Shaho Toofani
database 7-8
database 7-8
Usukhuu Galaa
Day 1
Day 1
ETC
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
davejohnson
Indices 01 mar2013044134
Indices 01 mar2013044134
Investors Empowered
Leica Zeno Platform
Leica Zeno Platform
Kendall James
Комплексная веб-аналитика
Комплексная веб-аналитика
alladvertising
Peribahasa 2
Peribahasa 2
Rohaya Ishak
Ardilla osoa
Ardilla osoa
mirenarbonies
Indices 30 aug2013065636
Indices 30 aug2013065636
Investors Empowered
Indices 28 sep2012051743
Indices 28 sep2012051743
Investors Empowered
Indices 13 dec2013050238
Indices 13 dec2013050238
Investors Empowered
Viewers also liked
(20)
Better CSS with Compass/Sass
Better CSS with Compass/Sass
CSS3 : Animation ,Transitions, Gradients
CSS3 : Animation ,Transitions, Gradients
Workshop Advance CSS3 animation
Workshop Advance CSS3 animation
Sass: Introduction
Sass: Introduction
Css3 animation
Css3 animation
LESS, SASS, HAML: 4 буквы, изменившие frontend development
LESS, SASS, HAML: 4 буквы, изменившие frontend development
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Sass: The Future of Stylesheets
Sass: The Future of Stylesheets
Sass and compass workshop
Sass and compass workshop
database 7-8
database 7-8
Day 1
Day 1
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
Indices 01 mar2013044134
Indices 01 mar2013044134
Leica Zeno Platform
Leica Zeno Platform
Комплексная веб-аналитика
Комплексная веб-аналитика
Peribahasa 2
Peribahasa 2
Ardilla osoa
Ardilla osoa
Indices 30 aug2013065636
Indices 30 aug2013065636
Indices 28 sep2012051743
Indices 28 sep2012051743
Indices 13 dec2013050238
Indices 13 dec2013050238
CSS3
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
13.
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 (Хайрцаглах загвар)