Клавиатура на CSS3

[Softlink]

Всем привет!

Надо сказать, что до сегодняшнего дня, я слабо разбирался как работают всякие CSS'ные штуки(из CSS 3). Но когда-то же надо это понять, правильно?

Вот сегодня засел за разбор. Решил не тратить время в пустую и не пробовать по отдельности, а свести некоторые возможности воедино в одном примере.

В общем, вдохновившись одним из субботников Яндекса, сел за дело.

На все про все ушло 5 часов. Использовал:

box-shadow
background: -webkit-gradient с color-stop
border-radius

псевдоэлементы и выборку по child'ам, перевод которой, любезно выложил buddah

В примере нет ни одной картинки.

Корректно работает только в вебкитах (Chrome, Safari). В Опере и ФФ валятся ряды. Но я пока и не ставил цель все в них поправить. Как появится время, наверное, доделаю.

Кое-где есть разница в 1-2пк, она мало заметна, но я пока не нашел решения, как с ней бороться. Как я понял, эти модные атрибуты ставят свои отступы и т.д.

Все это конечно хардкод и вряд ли кто-то будет делать такое в реальном проекте, но опыта ради и забавы для решил сделать. Тем более время было свободное.

У самого нет Мака, так что картинку откопал в Яндексе. Вот сам макет, а вот его верстка.

Посмотрите, может что подскажете дельного.

Спасибо за внимание

[ctpz]

Верстка неудачная, посмотите в опере.

[Softlink]

Верстка неудачная, посмотите в опере.

внимательней бы читал)

[Great Rash]

Непонятно что сложного может быть в верстке этой клавы, но у вас получилось максимально усложнить все, что только можно. Половина элементов просто не нужна.

UPD: Ну и результат не соответствует макету

[Softlink]

Непонятно что сложного может быть в верстке этой клавы, но у вас получилось максимально усложнить все, что только можно. Половина элементов просто не нужна.

А я и не спорю. Можно куда-нибудь тыкнуть носом и сказать что не так?

UPD Ну я его облагородил немного) А то так совсем не интересно бы было. Все плоское))

Edited July 18, 2011 by Softlink

[Great Rash]

Ну самое простое - зачем оборачивать <ul> в <div>?

[Softlink]

Ну самое простое - зачем оборачивать <ul> в <div>?

Да это вообще моя болезнь. Всегда все оборачиваю. Боюсь чего-то)) Сейчас убрал.

Great Rash, подскажи пожалуйста, что еще не так. Я первый раз верстаю со всеми этими штуками. До этого только бордер-радиус пользовал и все.

Не нашел решения, как избавиться от <br>.

Edited July 18, 2011 by Softlink

[Great Rash]

Там еще много чего лишнего, например зачем несколько <ul>? Почему не запихнуть все в один, ведь они не несут визуальной нагрузки? И зачем вообще <ul>? Чтобы мучиться и обнулять list-style?

Зачем прописывать дивам width: 100%; - они и так 100% по ширине...

Зачем дополнительные блоки для верхнего и нижнего градиента? Насколько я знаю color-stop можно добавлять сколько угодно раз. Значит можно для фона использовать всего 1 элемент вместо 3.

[Softlink]

Спасибо, кое-чего поправил. По поводу градиента думал еще сразу, но так и не додумался, как его сделать одним блоком.

А что можно вместо списков? Спаны или что? Как ими строить линии, если им нужна эмуляция ячеек таблицы для выравнивания по всем сторонам?

Мне показалось это самым легковесным.

[sigma77]

Softlink,

li - почему inline-table, а не например inline-block + vertical-align-top + margin? Это бы решило проблему в FF и Opera

Зачем классы у рядов. Если уж CSS3, то есть же :nth-child().

Заданная высота у самой клавы (подложки) не нужна. Максимум - min-width.

Для верхнего "перелива" также не нужен отдельный блок с градиентом. CSS3 позволяет задавать несколько точек старта и окончания.

Почему-то для вебкитов градиент есть, а для остальных нету.

[Softlink]

Softlink,

li - почему inline-table, а не например inline-block + vertical-align-top + margin? Это бы решило проблему в FF и Opera

Резонный вопрос. Тоже думал об этом. Изначально так и было, т.е. когда я только начал верстать макет. Потом мне не понравилось все с маржинами, и этот inline-table все решил Над замечанием обещаю еще подумать и наверное перевести в инлайн-блоки.

Хотя этот inline-table вроде тоже как CSS3, и Опера должна его поддерживать. По крайней мере так написано на htmlbook.

Зачем классы у рядов. Если уж CSS3, то есть же :nth-child().

Согласен, поправлю. Там просто еще обертки были, которые убрал. Завтра, наверное, реализую все на :nth

Заданная высота у самой клавы (подложки) не нужна. Максимум - min-width.

Лишнее, согласен. Уберу.

Для верхнего "перелива" также не нужен отдельный блок с градиентом. CSS3 позволяет задавать несколько точек старта и окончания.

Почему-то для вебкитов градиент есть, а для остальных нету.

Да вот с этим я сегодня парился. Первый раз использовал градиент, да еще со стопом. Не могу сказать, что до конца разобрался. Поэтому навесил еще блок.

Для Оперы и ФФ я вообще еще не оптимизировал ничего. Нет никаких ни префиксов, ничего. Как будет время, под них подгоню все.

p.s. Оксан, вот Great Rash, сделал замечание, по поводу списков. А как иначе тут решить дело? И еще он сказал, что в один ul все затолкать. Но там дело в том, что в разных рядах, разные кнопки. А эти тени дают свой отступ, который я не понял, как считается. Поэтому завернул каждый ряд в отдельный ul, чтобы проще править было. Что скажешь по этому поводу? Я не понял, как можно сделать иначе

p.p.s.Спасибо за рецензию

Edited July 18, 2011 by Softlink

[sigma77]

Да вот с этим я сегодня парился. Первый раз использовал градиент, да еще со стопом. Не могу сказать, что до конца разобрался. Поэтому навесил еще блок.

Для Оперы и ФФ я вообще еще не оптимизировал ничего. Нет никаких ни префиксов, ничего. Как будет время, под них подгоню все.

Вот - http://www.colorzilla.com/gradient-editor/ поиграйся немного. Должно стать всё понятно с синтаксисом.

p.s. Оксан, вот Great Rash, сделал замечание, по поводу списков. А как иначе тут решить дело? И еще он сказал, что в один ul все затолкать. Но там дело в том, что в разных рядах, разные кнопки. А эти тени дают свой отступ, который я не понял, как считается. Поэтому завернул каждый ряд в отдельный ul, чтобы проще править было. Что скажешь по этому поводу? Я не понял, как можно сделать иначе

В принципе можно попробовать и в один затолкать. Кнопки то разные, но ширина ряда одинаковая и расстояние между кнопками тоже. Перескакивать на другие ряды не должны. Тени свой отступ не дают, они вообще в размерах не учитываются, если это не фильтр ИЕ.

[Softlink]

Спасибо за ссылку, поди разберусь что к чему наконец-то)

Хех, точно не перескакивают. Но надо теперь размерчики все поправить. Наверное, завтра все исправлю.

Послушай, а ты не знаешь как решить проблему с <br>? А то слишком много его там. Я не нашел решения, как это исправить.

ыыыы)) Посмотрел в ИЕ-тестере, как выглядит все в 6-ке - сказка просто

Edited July 18, 2011 by Softlink

[sigma77]

Послушай, а ты не знаешь как решить проблему с <br>? А то слишком много его там. Я не нашел решения, как это исправить.

Попробуй white-space: pre

http://htmlbook.ru/css/white-space

<span style="white-space: pre;">~
`</span>

[Softlink]

Послушай, а ты не знаешь как решить проблему с <br>? А то слишком много его там. Я не нашел решения, как это исправить.

Попробуй white-space: pre

http://htmlbook.ru/css/white-space

<span style="white-space: pre;">~
`</span>

я уже пробовал этот маневр, но как-то не получилось. То ли сам не понял, то ли правда не подходит. Там дело в том, что этот "пре" просто растягивает ячейку. А если ему пробелы не ставить, то вообще ничего не меняется. Т.е. как идут в коде два символа один за другим, так они и показываются.

Пробовал еще комбинацию с

word-wrap:break-word;

результат тот же. В общем подумаю еще. Сейчас спать пора, поздно уже у меня. Спасибо за подсказки

[sigma77]

А если ему пробелы не ставить, то вообще ничего не меняется.

А просто второй символ на вторую строку перенести энтером и не делать никаких отбивок?

[Justnewone]

Секретная разработка от эппла, знакомьтесь, экранная клава v.09 RC

Сверстано не очень, что и подтверждается отображением, например в ФФ5.

[Softlink]

А если ему пробелы не ставить, то вообще ничего не меняется.

А просто второй символ на вторую строку перенести энтером и не делать никаких отбивок?

Да, это помогает. Только код такой некрасивый становится)) Там же табами все отбито, а пре начинает учитывать пробелы. Если убрать все табы, прижать список влево и перенести строчку энтером, то все хорошо

Выход нашел в

white-space: pre-line;

, работает также с энтером, но не учитывает пробелы. Спасибо за мысль с энтером, я вообще такой вариант из виду упустил.

Секретная разработка от эппла, знакомьтесь, экранная клава v.09 RC

Сверстано не очень, что и подтверждается отображением, например в ФФ5.

Я же писал выше, что в ФФ и Опере будет работать чуть позже.

Тем более я еще многое там поправлю с учетом замечаний и предложений.

[buddah]

А мне нравится.

[Shift-Web]

Тоже понравилось. Прикольная штуковина

[Softlink]

А мне нравится.

Ой, спасибо, хоть ты меня утешил

p.s. вот эта выборка вообще крутая вещь! Много вопросов решает.

p.p.s. Доработаю ее и дальше начну играться со всякими CSS-ными штуками на базе этой клавиатуры.

[Bonzash]

На твердую четверку.

[Softlink]

Переделал верстку. Учел почти все, что мне здесь сказали.

Вся клавиатура уместилась в один див. Ушел от списков, сделал все на спанах. Нет лишних оберток.

Решена проблема с <br> (спасибо sigma77, натолкнула на мысль), правда код получился немного некрасивый.

Работает во всех новых браузерах.

Глюки:

1) в ФФ сдвинулась кнопка "вверх"

2) в Опере в этой же кнопке почему-то не центрируется символ. Решено.

3) ИЕ9 идет лесом, он неадекватен. Оставил префикс для 10 Фильтры не использовал принципиально.

Разобрался с градиентами. Чтобы получить желаемый результат, необязательно использовать синтаксис from>to. Можно все решить color-stop.

Кстати, можно накладывать один цвет несколько раз, но с разным значением, именно так я и сделал. Если не наложить один на другой, то происходит большое рассеивание либо верхних градиентов, либо нижних. Именно поэтому, до конца не разобравшись со стопами, я использовал три блока в первой версии.

Оставил на всякий случай некоторые префиксы, хотя они много где не нужны.

И еще раз повторю, что понравилась выборка по child'ам. Она сняла все вопросы с классами. Однако так и не нашел способа, чтобы выделять нужные элементы. Например с 13 по 22. Где читал про нее, везде либо четные\нечетные, либо через один, ну и с конца и с начала(это из групповых). Может подскажете, есть такой функционал у nth?

Не нашел нормального способа, как выравнивать символы по вертикали. Пришлось для них использовать еще одну обертку. Существует в CSS3 такой способ, чтобы одновременно строить линию и ровнять содержимое по вертикали(float не в счет, мне кажется он сюда не подходит)? Однако удачно для этого подходили псевдоэлементы, но я решил, что смысла от этого нет. Что в html делать обертку, что в ксс писать каждой кнопке ПЭ.

Ссылка

В общем посмотрите, может еще чего подскажете.

Спасибо.

Edited July 23, 2011 by Softlink

[Great Rash]

Полностью делать было влом, думаю некоторые идеи пригодятся

http://jsfiddle.net/uVybA/

UPD: Усовершенствованный вариант - http://jsfiddle.net/uVybA/1/

[Softlink]

Полностью делать было влом, думаю некоторые идеи пригодятся

http://jsfiddle.net/uVybA/

Ага, ты вертикальное выравнивание сделал другим способом

И еще может не доглядел или из-за того, что наспех делал, в ФФ кнопка одна съезжает на другой ряд)

И, имхо, вот это лишнее:

<span>
        <kbd class="sup">~</kbd>
        <kbd class="sub">`</kbd>
    </span>

Я наоборот ставил задачу, как можно упростить код

p.s. CSS3 вообще прикольная штука. С кроссбраузерностью нет никаких проблем(префиксы в расчет не берем), все работает вполне предсказуемо. Долой архаику!