Факультет — новая литература нового поколения

Давно длится проект (с марта месяца 2009 года), для которого сверстал общий макет и несколько внутренних страниц. Особенностями проекта по верстке я бы назвал обилие закругленных уголков на различных, местами неоднородных, фонах. Макет тянущийся с прижатым к низу страницы футером. Да, чуть не забыл, ко всему прочему здесь еще и «кастомные контролы» присутствуют. Как ни убеждай дизанеров, что «кастомные контролы» — это зло, а клиент всегда прав.

макет главной страницы
макет главной страницы

типовая страница
типовая страница

личный кабинет
личный кабинет

книжная полка пользователя
книжная полка пользователя

Коротко о давнем

Упомяну несколько сайтов, которые можно отнести к категории «дела давно минувших дней».
Когда меня только взяли на нынешнее место работы, а это славная компания TRINET, мой опыт насчитывал 5 месяцев (1 месяц в компании ЛОЗА и 4 в широко известном ПРОДВИЖЕНИЕ). Но сразу мне досталось верстать сайт самой компании TRINET. Вот, так сказать, с корабля — на бал и началась моя первая серьезная работа в вебе. Почти сразу за этим последовали сайты larga.ru, tk-pik.ru, oslo.ru, marinsurance.ru, tkspb.ru. Да, да, это все я. И это далеко не все, что мне пришлось делать в TRINET. Далеко не всем я доволен, многое сейчас я сделал бы по-другому, но так ведь нет предела совершенству. За что мне по меньшей мере не стыдно, а кое в чем даже нравится, как сделано, это уже упомянутый сайт страхового общества «Скандинавия» и сайт консультационной компании IT Expert (Произошел редизайн на обоих проектах. Вряд ли теперь найду старую верстку). На IT Expert мне единственно не нравится «пепельница» на главной странице. По дизайну подразумевалось, что пункты выпадающего меню будут более многословными, а потому сделаны нетянущимися и такими широкими. А за некоторые страницы я даже удостоился отдельной, хотя и безличной) похвалы.

Параллельно началось мое сотрудничество с замечательным дизайнером, с которым приятно работать, хотя не все его дизайнерские ходы мне нравятся с точки зрения удобства и легкости. Иногда объем картинок для оформления зашкаливает ;) В моем портфеле много работ, выполненных по его заказу, в частности по сайту и справочной карте Геоинформационной Системы инвестора Санкт-Петербурга.

Агенство праздников Исполнители желаний

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

masterwish.ru

Апрель 2008

Как убрать обводку у input и textarea в Сафари и Хроме?

Очень просто. В таблице стилей пропишите для input и textarea следущее


                input,
                textarea {
                    outline:none;
                }
                

 

Когда это может понадобиться? Дизайнеры любят перерисовывать системные контролы под дизайн, например такой красивый input, который должен тянуться на всю предоставляемую ему ширину
input без фокуса

А теперь поместим курсор в поле ввода.

поле ввода с фокусом

Пример из сделанной недавно верстки

Выглядит немного неаккуратно, неправда ли?

Это же свойство можно использовать, если надо избавиться от рамки вокруг ссылок при фокусе на них. Чтобы, например, не портить «красоту» меню.
условное меню с фокусом на одном из пунктов пунктом
Хотя убирать outline и неправильно. При навигации по сайту с помощью только клавиатуры эта рамочка помогает понять, на каком элементе сейчас фокус.

Кликните поочередно на ссылки или используйте клавишу TAB, чтобы навести фокус на них:
обводка есть / обводка убрана