Suche senden
Hochladen
Oleg Mohov
•
0 gefällt mir
•
376 views
yaevents
Folgen
Операция CSS3
Weniger lesen
Mehr lesen
Melden
Teilen
Melden
Teilen
1 von 62
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Flowchart
Flowchart
Mrirfan
Ppt rufia1
Ppt rufia1
Ferran Patau
Pertemuan 04 Software Testing Techniques 2
Pertemuan 04 Software Testing Techniques 2
Mrirfan
Cabling Installation and Maintenance Outside Plant (Hubbell Power Systems - C...
Cabling Installation and Maintenance Outside Plant (Hubbell Power Systems - C...
Hubbell Power Systems
5 Installing Premises Cabling System
5 Installing Premises Cabling System
Mrirfan
Samendeskundiger 6 Oktober Uitslagen
Samendeskundiger 6 Oktober Uitslagen
Kennisnet
Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
yaevents
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
yaevents
Empfohlen
Flowchart
Flowchart
Mrirfan
Ppt rufia1
Ppt rufia1
Ferran Patau
Pertemuan 04 Software Testing Techniques 2
Pertemuan 04 Software Testing Techniques 2
Mrirfan
Cabling Installation and Maintenance Outside Plant (Hubbell Power Systems - C...
Cabling Installation and Maintenance Outside Plant (Hubbell Power Systems - C...
Hubbell Power Systems
5 Installing Premises Cabling System
5 Installing Premises Cabling System
Mrirfan
Samendeskundiger 6 Oktober Uitslagen
Samendeskundiger 6 Oktober Uitslagen
Kennisnet
Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
Как научить роботов тестировать веб-интерфейсы. Артем Ерошенко, Илья Кацев, Я...
yaevents
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
Тема для WordPress в БЭМ. Владимир Гриненко, Яндекс
yaevents
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
yaevents
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
yaevents
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
yaevents
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
yaevents
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
yaevents
Мониторинг со всех сторон. Алексей Симаков, Яндекс
Мониторинг со всех сторон. Алексей Симаков, Яндекс
yaevents
Истории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндекс
yaevents
Разработка приложений для Android на С++. Юрий Береза, Shturmann
Разработка приложений для Android на С++. Юрий Береза, Shturmann
yaevents
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
yaevents
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
yaevents
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
yaevents
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
yaevents
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
yaevents
Юнит-тестирование и Google Mock. Влад Лосев, Google
Юнит-тестирование и Google Mock. Влад Лосев, Google
yaevents
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
yaevents
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
yaevents
В поисках математики. Михаил Денисенко, Нигма
В поисках математики. Михаил Денисенко, Нигма
yaevents
Using classifiers to compute similarities between face images. Prof. Lior Wol...
Using classifiers to compute similarities between face images. Prof. Lior Wol...
yaevents
Поисковая технология "Спектр". Андрей Плахов, Яндекс
Поисковая технология "Спектр". Андрей Плахов, Яндекс
yaevents
Julia Stoyanovich - Making interval-based clustering rank-aware
Julia Stoyanovich - Making interval-based clustering rank-aware
yaevents
Weitere ähnliche Inhalte
Mehr von yaevents
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
yaevents
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
yaevents
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
yaevents
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
yaevents
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
yaevents
Мониторинг со всех сторон. Алексей Симаков, Яндекс
Мониторинг со всех сторон. Алексей Симаков, Яндекс
yaevents
Истории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндекс
yaevents
Разработка приложений для Android на С++. Юрий Береза, Shturmann
Разработка приложений для Android на С++. Юрий Береза, Shturmann
yaevents
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
yaevents
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
yaevents
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
yaevents
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
yaevents
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
yaevents
Юнит-тестирование и Google Mock. Влад Лосев, Google
Юнит-тестирование и Google Mock. Влад Лосев, Google
yaevents
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
yaevents
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
yaevents
В поисках математики. Михаил Денисенко, Нигма
В поисках математики. Михаил Денисенко, Нигма
yaevents
Using classifiers to compute similarities between face images. Prof. Lior Wol...
Using classifiers to compute similarities between face images. Prof. Lior Wol...
yaevents
Поисковая технология "Спектр". Андрей Плахов, Яндекс
Поисковая технология "Спектр". Андрей Плахов, Яндекс
yaevents
Julia Stoyanovich - Making interval-based clustering rank-aware
Julia Stoyanovich - Making interval-based clustering rank-aware
yaevents
Mehr von yaevents
(20)
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
Построение сложносоставных блоков в шаблонизаторе bemhtml. Сергей Бережной, Я...
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
i-bem.js: JavaScript в БЭМ-терминах. Елена Глухова, Варвара Степанова, Яндекс
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
Дом из готовых кирпичей. Библиотека блоков, тюнинг, инструменты. Елена Глухов...
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
Модели в профессиональной инженерии и тестировании программ. Александр Петрен...
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
Администрирование небольших сервисов или один за всех и 100 на одного. Роман ...
Мониторинг со всех сторон. Алексей Симаков, Яндекс
Мониторинг со всех сторон. Алексей Симаков, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндекс
Истории про разработку сайтов. Сергей Бережной, Яндекс
Разработка приложений для Android на С++. Юрий Береза, Shturmann
Разработка приложений для Android на С++. Юрий Береза, Shturmann
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
Кросс-платформенная разработка под мобильные устройства. Дмитрий Жестилевский...
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
Сложнейшие техники, применяемые буткитами и полиморфными вирусами. Вячеслав З...
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
Сканирование уязвимостей со вкусом Яндекса. Тарас Иващенко, Яндекс
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
Масштабируемость Hadoop в Facebook. Дмитрий Мольков, Facebook
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
Контроль зверей: инструменты для управления и мониторинга распределенных сист...
Юнит-тестирование и Google Mock. Влад Лосев, Google
Юнит-тестирование и Google Mock. Влад Лосев, Google
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
C++11 (formerly known as C++0x) is the new C++ language standard. Dave Abraha...
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
Зачем обычному программисту знать языки, на которых почти никто не пишет. Але...
В поисках математики. Михаил Денисенко, Нигма
В поисках математики. Михаил Денисенко, Нигма
Using classifiers to compute similarities between face images. Prof. Lior Wol...
Using classifiers to compute similarities between face images. Prof. Lior Wol...
Поисковая технология "Спектр". Андрей Плахов, Яндекс
Поисковая технология "Спектр". Андрей Плахов, Яндекс
Julia Stoyanovich - Making interval-based clustering rank-aware
Julia Stoyanovich - Making interval-based clustering rank-aware
Oleg Mohov
1.
2.
CSS3
Олег Мохов Я.Субботник, Киев, 28 мая 2011 года
3.
Начните использовать CSS3
уже сейчас! 3
4.
Огласите весь список!
4
5.
text-shadow
:after border-radius :focus box-shadow :before background: gradient border-image content 5
6.
background-origin
column-rule overflow-x word-wrap text-shadow overflow-y :after border-radius counter-reset text-overflow opacity :focus background-clip text-align-last box-shadow box-sizing :before column-count background: gradient column-width background-size column-gap resize border-image content counter-increment writing-mode 6
7.
background-origin
:empty :only-child :first-line column-rule :read-write ::selection word-wrap :enabled overflow-x text-shadow overflow-y :disabled :after border-radius :nth-of-type :first-letter counter-reset :required text-overflow :only-of-type opacity :root :focus :nth-child background-clip text-align-last :checked box-shadow :optional box-sizing :nth-last-child :not :default :before :last-child column-count background: gradient :read-only column-width :indeterminate :target background-size column-gap resize border-image :invalid content :valid :first-of-type counter-increment :last-of-type writing-mode 7
8.
background-origin
:empty :only-child :first-line column-rule :read-write ::selection word-wrap :enabled overflow-x text-shadow overflow-y :disabled :after border-radius :nth-of-type :first-letter counter-reset :required text-overflow :only-of-type opacity :root :focus :nth-child background-clip text-align-last :checked box-shadow :optional box-sizing :nth-last-child :not :default :before :last-child column-count background: gradient :read-only column-width :indeterminate :target background-size column-gap resize border-image :invalid content :valid :first-of-type counter-increment :last-of-type writing-mode 8
9.
С какого начать?
9
10.
10
11.
data:uri для иконок .example-icon {
background: url(b-icon.png); } 11
12.
data:uri для иконок .example-icon {
background: url(b-icon.png); background: url(data:image/png;base64,iVBO…); } 12
13.
data:uri для иконок .example-icon {
background: url(b-icon.png); } .example-icon:not(b) { background: url(data:image/png;base64,iVBO…); } 13
14.
data:uri для курсоров .b-grab { cursor:
move; } .b-grab:not(b) { cursor:url(data:image/ gif;base64,R0lGODlhEAAQAJECAP///wAAAAAAAAAA) 8 8,move; } 14
15.
Плавные движения
15
16.
Транзишены .b-transition {
-moz-transition: linear 1s margin; -webkit-transition: linear 1s margin; -o-transition: linear 1s margin; transition: linear 1s margin; } 16
17.
Проблемы
17
18.
Конфликт «одинаковых» свойств
18
19.
19
20.
.example-round {
-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; } 20
21.
Safari, Chrome
21
22.
Firefox 3.6, Opera
11/Next 22
23.
Firefox 4/5b
23
24.
Много кода
24
25.
.example-gradient {
background: -moz-linear-gradient(90deg,…); background: -o-linear-gradient(90deg,…); background: -webkit-gradient(linear,…); background: -webkit-linear-gradient(90deg,…); background: linear-gradient(90deg,…); filter:progid:DXImageTransform.Microsoft.gradient…; -ms-filter:”progid:DXImageTransform.Microsoft.gradient…”; } 25
26.
.example-gradient {
background: linear-gradient(90deg,…); } 26
27.
Несовершенство стандартов
27
28.
Дай дизайнеру в
руки CSS3... 28
29.
29
30.
30
31.
31
32.
32
33.
33
34.
34
35.
.example-shadow {
position: relative; } 35
36.
.example-shadow {
position: relative; } .example-shadow:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”; } 36
37.
.example-shadow {
position: relative; } .example-shadow:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; } 37
38.
.example-shadow {
position: relative; } .example-shadow:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; box-shadow: 0 0 14px #fff; 38 }
39.
39
40.
40
41.
41
42.
42
43.
43
44.
.example-border-image {
position: relative; } 44
45.
.example-border-image {
position: relative; } .example-border-image:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block; content: “”; } 45
46.
.example-border-image {
position: relative; } .example-border-image:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; } 46
47.
.example-border-image {
position: relative; } .example-border-image:before { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; display: block; content: “”; border-image: ...; 47 }
48.
– А где
бабуля? – Я за неё
49.
border-image " -o-border-image
49
50.
border-image " -o-border-image
50
51.
А компот?
51
52.
52
53.
Photoshop
Browser 53
54.
54
55.
Browser
Photoshop Photoshop smoothness 100% smoothness 0% 55
56.
И главное
56
57.
Начните использовать CSS3
уже сейчас! 57
58.
Не бойтесь
58
59.
пробовать
59
60.
разное
60
61.
и вы всегда
будете на шаг впереди 61
62.
А теперь вопросы
Олег Мохов mokhov@yandex-team.ru
Jetzt herunterladen