22 декабря 2015
7 октября 2011
22

Обзор онлайн «песочниц» (sandboxes) для совместного тестирования кода
Всем привет!
Сегодня мы рассмотрим несколько так называемых онлайн «песочниц» — специальных инструментов, представляющих собой изолированные окружения, в которых разработчики могут создавать, тестировать и отлаживать свои программные продукты и части кода совместно с другими людьми.
Такие инструменты могут быть полезны, когда простого совета от друзей или коллег недостаточно. Согласитесь, что не всегда можно «на пальцах» объяснить возникшую при разработке проблему, а пустить стороннего человека в код проекта можно себе позволить далеко не всегда.
Итак, в статье мы рассмотрим 10 бесплатных онлайн «песочниц» (или sandboxes), которые могут однажды помочь вам решить ту или иную задачи или проблему с помощью третьих лиц.
11 февраля 2011
37

Красивые градиентные кнопки без картинок для всех браузеров
Всем привет!
Сегодня мы посмотрим как с помощью CSS3 без картинок сделать вот такие отличные кнопки. Для этого мы будет использовать следующие свойства: RGBA цвета, box-shadow, text-shadow и border-radius. Разметка и стили сделаны с использованием принципа graceful degradation, так что пользователи, браузеры которых не поддерживают указанные технологии, увидят кнопки в нормальном, но не таком хорошем качестве.
Рассматриваемые кнопки имеют три состояния (обычное, наведение и нажатие), их можно масштабировать и изменять пропорции.
Данная статья — перевод статьи «Cross-browser CSS gradient buttons».
28 октября 2010
36

Организация, оптимизация и кеширование CSS и JS файлов
Всем привет!
В последний год я участвовал в разработке нескольких достаточно крупных (с точки зрения верстки и клиентских скриптов) проектов и сейчас я хочу поделить с вами своим опытом и программными наработками.
Этого вопроса в той или иной мере мы уже касались в некоторых наших статьях, но сегодня акцент будет не на внутренней организации файлов (кода), а на внешней (самих файлов). В конце статьи будет приведен скрипт для удобного автоматического сжатия и кеширования CSS и JS.
8 сентября 2010
36

Сброс CSS-стилей
Клавиша F5 и Refresh в браузере - это, наверное, самые затертые кнопки у всякого верстальщика. Жаль что в браузере этого не видно :)
Большая часть работы верстальщика заключается во внесении изменений в стили и проверки их отображения в браузерах. С опытом приходит понимание принципов работы HTML+CSS и количество рефрешей уменьшается. А совсем опытные видят матрицу и браузеров вообще не открывают.
Сегодня у нас обзор методов ручного и автоматического обновления CSS без полной перезагрузки страницы.
23 июля 2010
63

Кросс-браузерный @font-face
Всем привет!
Сейчас все больше разработчиков начинают внедрять собственные шрифты в дизайн сайтов. Весной я написал статью о том, как с помощью различных библиотек (JS, Flash) можно использовать сторонние шрифты на сайтах.
Сегодня же я хочу рассказать о свойстве CSS @font-face, с помощью которого легче и удобнее всего использовать произвольный шрифт на сайте. Но есть одно «но», которое предстоит решить — разные браузеры требуют разные форматы шрифтовых файлов.
28 мая 2010
40

Оптимизация CSS для ускорения обработки браузерами
Всем привет.
Сегодня хочу поговорить о том, как браузеры обрабатывают правила CSS и как писать эти самые правила так, чтобы страница рендерилась быстрее.
Наверное, самый яркий пример тормозов, которые может вызвать CSS, это когда страница «дергается» при прокрутке в Ослике — это обычно связано с использованием :hover не у элементов <a>.
23 апреля 2010
16

@-правила в CSS
Привет,
Сегодня у нас небольшая заметка (основанная на статье «Demystifying CSS At-Rules»), в которой речь пойдет о применении в CSS правил, содержащих в себе символ «@».
В статье будут рассмотрены правила @import, @media, @charset и популярный сейчас @font-face, который позволяет использовать собственные шрифты на страницах сайта (про сторонние шрифты у нас уже была статья «Как использовать любой шрифт на сайте»).
16 апреля 2010
25

Всегда используйте :hover вместе с :focus
Мне очень понравилась Пашина статья о псевдоклассах. =) Специально по такому случаю в закромах была недавняя заметка с 456bereastreet.
В ней рассказывается о том, что может повлечь за собой игнорирование псевдокласса :focus.
Мы рассмотрим типы проблем и в итоге узнаем что делать, чтобы избежать их.
Качественная разработка сайта любой сложности.
Компания ltd-studio.
9 апреля 2010
41

Псевдоклассы в CSS
Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active.
Такие конструкции в CSS, как правило, можно встретить в каждом файле стилей, но их использование ограничивается лишь описанием состояния ссылок и не более того.
В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить ;-)
24 февраля 2010
62

Делаем более понятные и удобные файлы стилей
Привет,
Сегодня мы поговорим об организации файлов стилей. Мы рассмотрим как лучше всего организовывать файлы и форматировать код внутри них, чтобы через какое-то время вы не хватались за голову от того, что стилей стало больше, а порядка и понимания что где находиться — меньше.
Итак, поехали!