background preloader

WEB

Facebook Twitter

CSS Diner. Can I use... Support tables for HTML5, CSS3, etc. CSS3 поддержка в браузерах. 5 октября 2012 в 16:27 Хотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Связано это в первую очередь с тем, что нет чёткого понимания в поведении браузера при обработке этих свойств. Под катом собрана таблица в которой сравниваются поддерживаемые CSS3 свойства во всех основных браузерах. Кроме этого указывается версия браузера и префикс для кодирования. Шпаргалка в форме изображения, поэтому её удобно скачать к себе на компьютер или мобильное устройство для дальнейшего использования. Шпаргалка Расшифровка обозначений UPD: grokru рекомендует Caniuse.com На сайте можно найти недостающую и свежую информацию. Только зарегистрированные пользователи могут оставлять комментарии.

Bear CSS - Helping you build a solid stylesheet foundation based on your markup. Lea Verou | Life at the bleeding edge (of web standards) Design For Masters. Impressive Webs, Toronto | Web Design Articles & Tutorials. Веб-стандарты. PHP Best Practices: a short, practical guide for common and confusing PHP tasks. Маниакальный веблог.

Настало время после долгой нудной теории верстки CSS'ом наконец уже что-нибудь осмысленное сверстать. В этой статье я покажу от начала до конца один из вариантов верстки трехколоночной страницы. Пример опирается на предыдущие статьи "Учебника", и если в этой статье будут какие-то неясности, ответы надо искать в них. И хотя пример может быть полезен и сам по себе, как просто готовый шаблон, главная его цель — показать в действии все механизмы CSS, о которых я писал раньше, дать их почувствовать, чтобы вы могли их свободно применять так, как это нужно вам.

С места в карьер — вот то, что получится в результате: Сразу должен оговориться по поводу графического дизайна. Содержимое Создание страницы начинается с определения структуры ее содержимого. Шапка с названием компанииОсновное содержимое страницы: Собственно текстНавигация Меню разделовПоискНовостная колонка Мета-информация о странице: всякая мелочь вроде копирайтов и контактных email'ов. Теперь превратим все это в HTML. <! Валидация Верстка. Доступно про float: left и как равномерно разместить блоки div на CSS. Все элементы, которые встречаются на HTML-странице есть не что иное, как прямоугольники. И в основном только двух типов:блочные (blok), которые занимают всю ширину, где находятся, и отделены от того, что над и под ними. Например, это теги DIV, P, H.встроенные (inline). Например, SPAN, STRONG, EM, A и IMG. Ранее разметка страниц осуществлялась с помощью таблиц. <div><p>Ранее разметка страниц осуществлялась с помощью <strong>таблиц</strong>.

С помощью свойства display: block; или display: inline; мы преобразуем один тип прямоугольника в другой. При использовании свойства float прямоугольник является блочным, но с характерной особенностью: его ширина не будет распространяться на всё содержимое. Это HEADER h3 Если ему задать свойство display: inline;, то мы увидим, что изменилась не только ширина, но и расстояние над и под элементом: Но если я хочу разместить элемент справа и добавлю на этот раз text-align:right;, то мы получим: И совсем иначе, если float: right;.

Блок 1 Блок 2 Блок 3 Блок 4. Статистика сайта "Сайты Рунета" ShoeBox. Support tables for HTML5, CSS3. Creative Bloq | Your daily dose of design tips and inspiration | Creative Bloq. Smashing Magazine — For Professional Web Designers and Developers. Видеоуроки по созданию сайта для бизнеса. Бесплатные видеоуроки. Статьи, новости, разработка, дизайн - онлайн-журнал для дизайнеров и веб-разработчиков CoolWebmasters.Com. Bootstrap по русски. Fancybox - Fancy jQuery lightbox alternative.

Edit fiddle. JSFiddle. CSS: Articoli, Guide ed Approfondimenti. CSS-Tricks. Псевдоэлемент before для маркера списка | маркер спецсимволом. Подготовил: Александр Головко Дата публикации: 21.02.2010 Последнее обновление: 26.05.2010 На большинстве веб-страниц присутствуют разного рода списки: меню, перечни товаров и прочее.

При создании HTML эти списки превращаются в теги <ol> и <ul> (нумерованный и маркированный списки, соответственно). Маркированные списки применяются гораздо чаще, но их проблема в том, что браузеры отображают одни и те же маркеры неодинаково. Вот например как выглядят маркеры list-style:circle; Это послужило одной из причин появления в грамотно сделанных CSS в составе сброса стилей, примерно таких записей: То есть мы сознательно отказываемся от использования стандартных маркеров (ну еще бы — ведь, у каждого браузера стандарт свой собственный!). Маркеры-картинки Естественно, просто отказаться мало — нужно найти какое-то решение задачи. Таким методом можно реализовать любую фантазию дизайнера: Плюс метода Кроссбраузерность — в любом браузере маркер будет именно таким, как мы нарисовали.

Недостаток Update 1.06.10. Htmlbook.ru | Для тех, кто делает сайты. Expert Cheat Sheets & Tutorial Guides for Developers | Refcardz. Scripts Catalog: web scripts download - PHP ASP JavaScript Perl Java and others! 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. Сообщество, говорящее на языках HTML, CSS и JavaScript. W3Schools Online Web Tutorials.

Хабрахабр. Справочник фронт-энд девелопера: виды горизонтальных панелей навигации. Предисловие: работая верстальщиком, ваш покорный слуга заметил, что существует несколько типов меню; при этом для верстки каждого из них следует использовать свои приемы. Подробности — под катом. Данная статья нацелена скорее на начинающих верстальщиков, но, может быть, матерые профессионалы тоже найдут в ней что-то новое или будут обращаться к ней как к справочнику. Топик структурирован следующим образом: сначала ставится задача — описывается вид требуемого навигационного блока, затем рассматриваются приемы, позволяющие создать именно такую навигацию. Подразумевается, что написание стилей ведется под семантически корректную структуру меню, которая выглядит примерно так: <nav> <ul> <li><a href="index.html">Домой</a></li> <li><a href="shop.html">Сделать заказ</a></li> <li><a href="contacts.html">Обратная связь</a></li> </ul></nav> При верстке под doctype, отличный от html5, элемент nav опускаем или заменяем на соответствующий div.

Что ж, начнем!.. Display: inline Примечания Float: left/right. Сброс стилей с помощью CSS Reset. Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset. Зачем это нужно? Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей. Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser).

Простой пример Пример 1: отображение элемента p по умолчанию. В первом примере я поместил 3 параграфа (p) без установленных стилей внутрь элемента div, которому я выставил синий фон и оранжевую границу. По умолчанию, вы увидите, что в Firefox между верхней границей контейнера div и верхней границей первого параграфа существует промежуток. Так какой браузер всё же прав?

Данный пример, конечно, упрощён. Как всё начиналось? Применение CSS Reset. Mockingbird. Архитектура CSS — Веб-стандарты. Мерой хорошего знания CSS для многих веб-разработчиков является то, насколько идеально ты можешь воссоздать в коде данный тебе макет. Ты не используешь таблицы и гордишься собой, когда сводишь к минимуму графику. Если ты действительно хорош, то работаешь с самыми новыми и лучшими техниками — вроде медиавыражений, переходов и трансформаций. Это правда, хорошие CSS-разработчики действительно всё это умеют. Однако существует совсем другая сторона CSS, которая редко упоминается, когда речь заходит об оценке чьих-то способностей. Что интересно, обычно мы не упускаем из вида эту сторону, когда дело касается других языков. Разработчик на Rails не считается хорошим только потому, что его код работает по спецификации. Это считается базовым уровнем. Эти вопросы вполне естественны при оценке кода, и CSS здесь не должен быть исключением.

Принципы хорошей архитектуры CSS CSS-сообществу редко удаётся прийти к договорённости, что и как нужно делать. Предсказуемость Повторное использование Поддержка. Обзор бесплатных сервисов для веб-разработки. Пост является личной подборкой полезных и нужных онлайн сервисов, которые позволяют бесплатно (или условно бесплатно) создавать действительно крутые вещи и разворачивать их в Сети. Не претендую на новизну или на полноту, но буду счастлив, если кому пригодится. Всем нам иногда хочется попробовать новую идею, запилить какой-нибудь сайтик про манулов, но чтоб обязательно на node.js, хайлоад реди, с мемкешем, монго, фейловером и с претензией на мировое господство. У меня для Вас хорошие новости: благодаря щедрости проклятых западных капиталистов всё это можно получить совершенно бесплатно. Github Первое, что должен сделать каждый IT боец, вставший на путь захвата мирового господства — завести аккаунт на гитхабе. Mockingbird Пересмешник mockingbird (от mockup — набросок, макет) — онлайн инструмент для создания набросков интерфейсов.

JS Fiddle JSFiddle — онлайн инструмент для экспериментов с js, css, html. SQL Fiddle Heroku Heroku — это классический PaaS хостинг приложений. Cloud9 IDE Travis CI. Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю № 86 (1 — 7 декабря 2013) / Блог компании Zfort Group. 7 декабря 2013 в 23:20 Веб-разработка JavaScripts Браузеры Веб-инструменты WebFonter от FontShop — сервис для тестирования шрифтов на сайтах webprojector.org — сервис для демонстрации веб-дизайна в браузере NudgePad — окружение для разработки в вашем браузере Новости Сайты с интересным дизайном и функциональностью Дизайн Подборка бесплатных дизайнерских печенек Занимательное Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки.

Дайджест за прошлую неделю. Только зарегистрированные пользователи могут оставлять комментарии. Создание галереи с предпросмотром миниатюр. В этом уроки я покажу вам как создать галерею на jQuery с возможностью предпросмотра миниатюр каждой фотографии. Идея заключается в том, чтобы при наведении курсора мыши на точки, появлялась миниатюра соответствующей фотографии в галерее. При нажатии на эту точку, с правой или левой стороны будет возникать оригинальная фотография.

В уроке будут использоваться фотографии geishaboy500, которые можно найти на его Flickr аккаунте. Начнём же! HTML структура будет состоять из основного контейнера где будут появляться большие фотографии, а так же навигация по миниатюрам: Просматриваемая миниатюра представляет собой элемент списка. Теперь давайте посмотрим что у нас со стилями.

В первую очередь, оформим главный контейнер. Теперь мы оформим контейнер для больших фото. Отцентрируем представление фотографий с помощью внешних отступов: Позиционируем фотографии абсолютно для возможности слайдинга: Элементы навигации будут оформлены следующим образом: Ставим значение float для списка: Со стилями покончено. Редактирование строк таблицы | jQuery - от новичка до ниндзя. Мы уже освоили встроенное редактирование единичного элемента, но что, если нам потребуется сделать редактируемой всю таблицу? Добавим к таблице функционал редактирования: напротив каждой строки приделаем кнопку «Редактировать», при нажатии на которую вся строка с ее ячейками будет помещаться в элементы input: Редактирование столбцов Ячейки, в которых содержатся данные из таблицы – прекрасная возможность сохранять информацию при манипуляциях с HTML-разметкой; эту фишку мы уже использовали в управляющих формах.

Теперь же мы испытаем, как элемент строки таблицы может группировать нашу рабочую область. Вот так будет выглядеть разметка: Выглядит вполне обычно. Начнем работу с описания метода-установщика, который будет инициализировать таблицу и добавлять в нее нужные кнопки: Наш метод TABLE.formwork берет переданный ему селектор таблицы, ищет в ней строки в thead и tbody и добавляет к каждой их них по новой ячейке «edit» . Теперь начинается самое интересное. Протестируйте то, что получилось. jQuery-tutorial-for-beginners-1.0.1. Animate - Русская документация по jQuery. Данная функция предназначена для создания пользовательской анимации. Ключевым аспектом данной функции является объект свойств стиля, который будет анимирован. Каждый ключ в рамках объекта представляет собой свойство стиля, которое также будет анимированно (например, «height», «top» или «opacity»).

Кроме того, свойства должны быть указаны с использованием camel case (т.е., например, нужно писать marginLeft вместо margin-left). Значение, связанное с ключом, показывает конец процесса анимирования свойства. Если указано число в качестве значения, тогда соответствующее свойство стиля перейдет из текущего состояния в новое. Поддерживаются только свойства, имеющие в качестве значения какие-либо числа (или же значения «hide», «show» и «toggle»). Например, backgroundColor не поддерживается. Начиная с jQuery 1.2 можно указывать значения свойств используя em и % (где есть такая возможность). Java Script. Примеры скриптов. Уроки javascript. Drag and drop. В свое время приходилось реализовывать кучу drag and drop'ов под самым разным соусом.

Эта статья представляет собой учебник-выжимку о том, как организовать drag'n'drop в javascript, начиная от основ и заканчивая готовым фреймворком. Кроме того, почти все javascript-библиотеки реализуют drag and drop так, как написано (в статье дано несколько разных вариантов, не факт что ваш фреймворк использует лучший). Зная, что и как, вы сможете поправить и адаптировать существующую библиотеку под себя.

Drag'n'drop в свое время был замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций. Одно из самых очевидных применений drag'n'drop - переупорядочение данных. Это могут быть блоки, элементы списка, и вообще - любые DOM-элементы и их наборы. Перенос мышкой может заменить целую последовательность кликов. Организовать перенос элементов по странице - довольно просто. Which кнопка мыши - 1: левая, 2: средняя, 3: правая pageX/pageY Координата X: Координата Y: Методы: JavaScript: Соответствие стилей CSS и JavaScript.