Анимированный баннер на CSS3

Развивая проект Грузопоиск часто приходиться прибегать к нестандартным решениям и придумывать что-нибудь сложное и одновременно с этим интересное. В этот раз встала задача — сделать анимированный баннер для странички расширений extension.gruzopoisk.ru. Т.к. расширения у нас сделаны для «правильных» браузеров, то есть смысл показывать баннер только для них, для остальных можно чуток модифицировать код и перенаправлять […]

Простая верстка адаптивного чата

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

Блик света на картинке

Ребята, я не помню как называется этот эффект правильно, знаю, что уже кто-то делал такую штуку на CSS3, но мне было интереснее и проще сделать это на CSS3 самому. Итак, задача: Сделать галерею картинок с бликами, размеры картинок произвольные с максимальным ограничением, с центрированием по обеим осям. Фотки позаимствую на Яндекс.Фотках, надеюсь со временем не […]

ЭЛЕКТРОНИКА ИМ 02 на CSS3

Новогодние праздники дали возможность отдохнуть от компа, от работы, уделить больше времени семье… но к концу выходных руки уже зачесались, захотелось чего-нибудь эдакого, чего раньше не делал. Решил поэкспериментировать с CSS3, давно собирался, да как-то ни до того было. Захотелось что-то изобразить в коде без применения графики, выбор пал на игровой девайс школьных лет — […]

Новый mikro clearfix huck

Часто ли Вы используете Clearfix? Я думаю, что в тои или ином виде — часто. На просторах всемирной сети я нашел новый метод реализации этого хака с минимальным использованием CSS. Demo: Micro clearfix hack

Меняю шкурку блога. HTML5/CSS3/μ

Решил в Новом году изменить шкурку блога, так как предыдущая тема была была красивой, но тяжелой, некоторые вещи мне там совсем не нравились. В прошлом году я увлёкся современными подходами к верстке: HTML5, CSS3, HTML microdata, микроформаты, WCAG-2.0, верстка под мобильные и всякие разные платформы. Посему было решено использовать всё что успел изучить и изучу […]

Расширение набора макросов для Netbeans

По ходу работы с Netbeans записывались новые макросы, что-то менялось. Первый пост про макросы был написан почти сразу после перехода с Notepad++ на Netbeans (в котором я сразу же стал искать способы ускорения верстки) и был несколько сыроват. На хабре мне тогда посоветовали использовать шаблоны кода, но мне не понравилась ни их функциональность для CSS, […]

CSS-макросы для NetBeans

На хабре несколько раз публиковалась информация о Zen Coding, который может подключаться ко многим редакторам кода с целью ускорения верстки HTML и CSS кода. Одним из таких редакторов является NetBeans, который, правда, не работает с ZEN CSS. Не желая мириться с таким положением дел, я, как и в случае с Notepad++, написал макросы для самых […]

Просто о @media и @import

При верстке нового сайта я руководствуюсь принципом — каждому девайсу свой вариант отображения странички. Имея один html-код мы можем совершенно по разному представить страницу на различныйх устройствах. В различных учебниках традиционно перечисляют типы устройств: all — Все типы. Это значение используется по умолчанию. aural — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, […]

CSS Naked Day

Сегодняшний день, 9 апреля 2010 года, известен многим web-разработчикам как CSS Naked Day. В этот день принято отключать CSS в своих сайтах, чтобы показать, насколько он важен. Вот и у меня сегодня не будет никакого лоска, наслаждайтесь HTML-версией сайта 🙂

Закругленные уголки HTML+CSS+jQuery

В некоторых последних проектах я использовал закругленные уголки у блоков без использования изображений, но с использованием jQuery Подробнее Вы можете ознакомиться непосредственно на страничке с закруглёнными уголками 🙂

Ускорение верстки — да поможет Notepad++

Я уже довольно-таки давно верстаю в Notepad++, пробовал и другие редакторы — не срослось. Основная причина, по которой мне нравился раньше этот редактор — подсветка кода. Видел. что есть много каких-то настроек, но небыло необходимости в них разбираться — ведь и так всё работает прекрасно. Ситуация изменилась, когда объем работы вырос, и я физически не […]

HTML-book & CSS-book — книги, учебники и справочники. Рекомендации верстальщика.

Для начинающего верстальщика всегда стоит наиважнейшая задача — впитать в себя как можно больше информации, не нахватавшись при этом «воды». Очень помогают в этом блоги и специализированные сайты, но не всегда постер описывает всё подробно, не разжовывает для новичка. Поэтому в начале советую почитать простые бумажные такие книжки, они еще продаются 🙂 Я тут прошелся […]

CSS-хаки, трюки и жестокие обманы валидатора

Обманывать не хорошо, так в детстве мама говорила, но иногда без этого никак… В web-верстке тоже самое — нужен хак, и заказчик требует валидность, а еще и в портфолио потом работу выкладывать. Вот и приходится хитрить, хотя, по сути, верстка страничка всё равно невалидна, просто обманутый валидатор этого не замечает (да и не хочет он […]

Стандартные шрифты для сайта

К сожалению, в стиле сайта нельзя назначить любой шрифт для текста (всякие хитроумные приемы и флеш в расчет не беру).  Браузеры используют ограниченное количество стандартных шрифтов, постараюсь показать то что есть… Стандартные шрифты: 1. Arial 2. Verdana 3. Times 4. Times New Roman 5. Georgia 6. Trebuchet MS 7. Sans 8. Sans 9. Comic Sans […]

Текст в 2 колонки

Опытным верстальщикам наверняка будет известна подобная хитрость, но для начинающих веб-дизайнеров эта статья может оказаться полезной. К сожалению, CSS2 не поддерживает верстку колонками, а CSS3 только на подходе и еще точно не известно, как в нем будет организована эта функция. Да еще должно будет пройти некоторое время, прежде чем браузеры полноценно научатся обрабатывать CSS3. Поэтому […]