Псевдоэлемент before для маркера списка | маркер спецсимволом Подготовил: Александр Головко Дата публикации: 21.02.2010 Последнее обновление: 26.05.2010 На большинстве веб-страниц присутствуют разного рода списки: меню, перечни товаров и прочее. При создании HTML эти списки превращаются в теги <ol> и <ul> (нумерованный и маркированный списки, соответственно). Маркированные списки применяются гораздо чаще, но их проблема в том, что браузеры отображают одни и те же маркеры неодинаково. Это послужило одной из причин появления в грамотно сделанных CSS в составе сброса стилей, примерно таких записей: То есть мы сознательно отказываемся от использования стандартных маркеров (ну еще бы — ведь, у каждого браузера стандарт свой собственный!). Маркеры-картинки Естественно, просто отказаться мало — нужно найти какое-то решение задачи. Таким методом можно реализовать любую фантазию дизайнера: Плюс метода Кроссбраузерность — в любом браузере маркер будет именно таким, как мы нарисовали. Недостаток Дополнительная картинка — лишнее обращение к серверу. Update 1.06.10.
Прогрессор htmlbook.ru | Для тех, кто делает сайты Видеоуроки по созданию сайта для бизнеса. Бесплатные видеоуроки. Impressive Webs, Toronto | Web Design Articles & Tutorials Fancybox - Fancy jQuery lightbox alternative Design For Masters Lea Verou | Life at the bleeding edge (of web standards) Архитектура CSS — Веб-стандарты Мерой хорошего знания CSS для многих веб-разработчиков является то, насколько идеально ты можешь воссоздать в коде данный тебе макет. Ты не используешь таблицы и гордишься собой, когда сводишь к минимуму графику. Если ты действительно хорош, то работаешь с самыми новыми и лучшими техниками — вроде медиавыражений, переходов и трансформаций. Это правда, хорошие CSS-разработчики действительно всё это умеют. Что интересно, обычно мы не упускаем из вида эту сторону, когда дело касается других языков. Эти вопросы вполне естественны при оценке кода, и CSS здесь не должен быть исключением. Принципы хорошей архитектуры CSS CSS-сообществу редко удаётся прийти к договорённости, что и как нужно делать. Поэтому вместо того, чтобы разворачивать перед вами мой собственный список правил, я скажу, что нам стоит определиться с принципами. Мне кажется, что принципы хорошей архитектуры CSS не сильно отличаются от целей разработки хорошего ПО. Предсказуемость Повторное использование Поддержка Масштабируемость
Script Library Free Scripts. Download Free Scripts. Submit Scripts Free: Powershell, VBScript, PHP, Rexx, Kixtart, ASP, ASP.Net, SQL, Batch, Jscript, Perl, Python. Почему дивную верстку называют семантически правильной? "Философия CSS-дизайна". HTML-код сайта www.csszengarden.com | WEB-дизай Как просмотреть HTML-код страницы? Если вы пользуетесь браузером Internet Explorer: Вид > Просмотр HTML-кода; в браузерах Mozilla, Opera: Вид (View) > Исходный текст (Page Source). 1. В исходном коде сайта нет ни одного табличного тега (<table>, <td>, <tr>), т.е. страница структурирована без таблиц (самый распространенный вариант макетирования в Рунете). Поэтому такую верстку называют бестабличной. 2. 3. Поскольку каждый структурный элемент страницы имеет соответствующее по смыслу название, такую верстку называют семантически правильной. На примере сайта Дейва Ши мы можем учиться семантически правильной верстке. По этому поводу можно возразить: зачем нужно соблюдать какие-либо правила в HTML-коде, когда посетители и не подозревают о наличии этой стороны документа? На этот вопрос отвечу поговоркой: «Называйте вещи своими именами». Прежде всего это нужно нам самим. 4. 5. 6.
Сброс стилей с помощью CSS Reset Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset. Зачем это нужно? Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. Например, вы используете элемент a в вашем документе. Простой пример Пример 1: отображение элемента p по умолчанию. В первом примере я поместил 3 параграфа (p) без установленных стилей внутрь элемента div, которому я выставил синий фон и оранжевую границу. По умолчанию, вы увидите, что в Firefox между верхней границей контейнера div и верхней границей первого параграфа существует промежуток. Так какой браузер всё же прав? Данный пример, конечно, упрощён. Чуть ниже, мы затронем особенности работы со сбросом стилей на практике, но для начала окунёмся в историю становления этого приёма. Как всё начиналось? CSS Reset впервые был применён в далёком 2004 году (ещё динозавры по сети бродили) Эндрю Креспанисом (Andrew Krespanis). В итоге у нас получилось то, что можно увидеть в третьем примере.
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю № 86 (1 — 7 декабря 2013) / Блог компании Zfort Group 7 декабря 2013 в 23:20 Веб-разработка JavaScripts Браузеры Веб-инструменты WebFonter от FontShop — сервис для тестирования шрифтов на сайтах webprojector.org — сервис для демонстрации веб-дизайна в браузере NudgePad — окружение для разработки в вашем браузере Новости Сайты с интересным дизайном и функциональностью Дизайн Подборка бесплатных дизайнерских печенек Занимательное Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Дайджест за прошлую неделю. Только зарегистрированные пользователи могут оставлять комментарии.
Drag and drop В свое время приходилось реализовывать кучу drag and drop'ов под самым разным соусом. Эта статья представляет собой учебник-выжимку о том, как организовать drag'n'drop в javascript, начиная от основ и заканчивая готовым фреймворком. Кроме того, почти все javascript-библиотеки реализуют drag and drop так, как написано (в статье дано несколько разных вариантов, не факт что ваш фреймворк использует лучший). Drag'n'drop в свое время был замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций. Одно из самых очевидных применений drag'n'drop - переупорядочение данных. Перенос мышкой может заменить целую последовательность кликов. Организовать перенос элементов по странице - довольно просто. При обработке событий, связанных с мышью, нужен кроссбраузерный способ получения координат курсора из события в обработчике. which кнопка мыши - 1: левая, 2: средняя, 3: правая pageX/pageY Координата X: Координата Y: Для этого нам пригодится событие mousedown.