WebReference.ru

[afdw]

Предлагаю такой дизайн хлебных крошек, выглядит гораздо привлекательнее.

Edited January 22, 2015 by afdw

[Vlad]

Предлагаю такой дизайн хлебных крошек, выглядит гораздо привлекательнее.

Согласен.

[Vlad]

Завершил основную работу над справочником CSS. Примеры выложил сюда, их можно править и смотреть, что особенно актуально для анимации.

http://jsfiddle.net/user/webref/fiddles/

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

[Vlad]

Сделал ещё небольшую оптимизацию кода, теперь HTML выводится в сжатом виде, стили и скрипты обфусцированы. Посмотрите, субъективно быстрее стало загружаться или нет?

[Vessel]

Влад, а вы уже закрыли на http://htmlbook.ru/ доступ к справочникам? Или ссылки случайно сломались?

Edited February 6, 2015 by Vessel

[Vlad]

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

[afdw]

.move-left .exit-off-canvas {    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);    border-right: 2px solid #DEE0E2;}

Тень ярковата сейчас.

http://jsfiddle.net/dw3ka6b5/

Интересное решение использовать тени для иконки гамбургера. Обычно использовал это решение.

[Vlad]

Внёс небольшие изменения в дизайн главной страницы. Посмотрите как сейчас выглядит под планшеты и мобильники. Никаких замечаний не возникает?

[afdw]

.easy-breadcrumb_segment-separator {    transform: scale(0.99999);    border-left: 30px solid #D6D8DB;}

В Firefox вообще нет сглаживания, вообще никакого. Только острые пиксели. Вот выглядит нормально. Да и цвет слишком яркий.

Edited February 13, 2015 by afdw

[psywalker]

Внёс небольшие изменения в дизайн главной страницы. Посмотрите как сейчас выглядит под планшеты и мобильники. Никаких замечаний не возникает?

1. Влад, а почему в пункте "Вёрстка" значок браузера IE?)

2. На счёт мобильных: захожу на телефоне, всё вроде ок, единственное подвал себя плохо ведёт, а точнее там получается три колонки и вторая сливается с третьей. Вот это бы нужно поправить.

[afdw]

При нажатии на кнопку открытия меню было бы хорошо, если бы она подсвечивалась.

[Vlad]

1. Влад, а почему в пункте "Вёрстка" значок браузера IE?)

2. На счёт мобильных: захожу на телефоне, всё вроде ок, единственное подвал себя плохо ведёт, а точнее там получается три колонки и вторая сливается с третьей. Вот это бы нужно поправить.

1. IE самый узнаваемый значок имеет. Я так щетаю!

2. Скинь мне скриншот, если сможешь, гляну что не так.

При нажатии на кнопку открытия меню было бы хорошо, если бы она подсвечивалась.

Добавил радикальный красный цвет.

В Firefox вообще нет сглаживания, вообще никакого. Только острые пиксели. Вот выглядит нормально. Да и цвет слишком яркий.

Спасибо, добавил твой код.

[psywalker]

 

1. Влад, а почему в пункте "Вёрстка" значок браузера IE?)

2. На счёт мобильных: захожу на телефоне, всё вроде ок, единственное подвал себя плохо ведёт, а точнее там получается три колонки и вторая сливается с третьей. Вот это бы нужно поправить.

1. IE самый узнаваемый значок имеет. Я так щетаю!

2. Скинь мне скриншот, если сможешь, гляну что не так

1. Я понял. Просто я к тому, что у меня этот значок ассоциируется с браузером, а не с вёрсткой.

2. Оказывается с подвалом траблы не только на мобильных.

 

Скриншот:

 

Вот на такой ширине было бы здорово делать две колонки, а не три. Ибо, если бы в первой колонке был пункт "О сайте", во второй всё остальное, что сейчас находится в двух последних, то колонки бы и по высоте совпадали +-, потом не было бы сливания двух последних, и читабельность повысилась.

 

3. Кстати, ещё вот заметил кое что:

Хотелось бы, чтобы при наведении на эти пункты они как-то выделялись или хотя бы появлялось подчёркивание что ли. Сейчас при наведении просто меняется курсор.

[Vlad]

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

[Vlad]

Исправил подвал.

[Vlad]

Сделал подсветку верхнего меню.

http://webref.ru/layout

Осталось ещё сделать, чтобы меню компактно было для мобильных экранов и всё.

[psywalker]

Влад, ещё кое что не очень приятное в плане читабельности. При маленькой ширине в браузере мы видим след. картину:

 

 

А было бы здоровое, если бы картинка (в данном случае фиолетовый квадратик с птичкой))) находилась бы поверх текста, тогда текст было бы удобно читать намного.

[Vlad]

Да, это полезное замечание, приму к сведению.

[Vlad]

Переделал под маленькую ширину, заодно заменил все картинки. Увы, но выяснилось что Друпал наотрез отказывается понимать SVG и каких-то готовых решений ещё нет.

[afdw]

Пора уже обновить иконки браузеров.

#ac-html, #ac-css {    margin-top: 5px;}

Тень сверху обрезается.

[Vlad]

А что не так с иконками?

[afdw]

Вот более современные.

[afdw]

Они же в архиве. И цвет фона: #f2f2f2.

Иконка для "Справочник CSS"

"5 техник резиновой вёрстки"

[afdw]

• Справочники
• Вёрстка
• Программирование
• Мобильные приложения

Это меню надо убирать и поиск в првое меню на телефонах, иначе котнент начинается только после свайпа вверх.

Зачем на телефонах скрывать разделители хлебных крошек?

[Vlad]

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