HTML *

Стандартный язык разметки web-страниц

СтатьиПостыНовостиАвторыКомпании

max_mara 10 фев 2013 в 04:55

Облака на CSS3 3D Transformations

6 мин

27K

CSS * HTML * JavaScript *

Туториал

Перевод

Пример, как нарисовать красивые 3D облака используя CSS 3D Transformations

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

Для нетерпеливых: То, что получится в итоге

Вступление

В этой статье, автор попытаеся рассказать и показать как создать красивые 3D облака используя CSS3 Transformations. Автор так-же считает, что иметь базовое понятие о том, как работают эти самые CSS 3 Transformations не будет лишним. Ссылка на туториал здесь

Данный туториал разбит на несколько простых шагов. Каждый шаг основан на коде из предыдущего и содержит ссылки на примеры.

Сделай сам!

Создаем мир и камеру
Добавляем объекты в мир
Добавляем спрайты к облакам
Магия
Пролог

Поооеехааали!

Читать дальше →

+42

NORD75 8 фев 2013 в 10:31

Groundwork — интересный CSS/HTML5 UI фреймворк

1 мин

25K

CSS * HTML *

Бороздя просторы «бескрайнего», наткнулся на интересный CSS/HTML5 UI фреймворк – Groundwork. Как утверждают его разработчики, он имеет один из самых продвинутых responsive шаблонов в мире. Благодаря невероятной гибкости фреймворка можно получать сайты удовлетворяющие самым современным требованиям.

Читать дальше →

+31

shimapa23 7 фев 2013 в 17:39

Интерактивная инфографика с анимациями CSS и SVG

7 мин

47K

CSS * HTML * Веб-разработка *

Туториал

Перевод

Одной из наименее обсуждаемых функций, все чаще появляющейся в последних браузерах, является поддержка файлов формата SVG. Этот формат характеризуется абсолютной свободой в отображении: легко изменяется в размере, может быть отображен в любом разрешении без потери качества. Во многих случаях SVG весят гораздо меньше, чем, например, PNG или JPG.

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

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

Читать дальше →

+45

vnDeveloper 3 фев 2013 в 15:13

BonBon — Sweet CSS3 Buttons

3 мин

21K

HTML * CSS *

Туториал

Привет, всем!

:before

Пытливость ума (да и не только) заставляет искать новые и лучшее решения в том или ином направлении. Это и привело меня на страницы блога некого @simurai. Возможно, кто-то уже знаком с наработками товарища «Самурая», с остальными же хочу просто поделиться интересными идеями псевдо-японского гуру. В этой статье хочу рассмотреть один из его проектов: BonBon — Sweet CSS3 Buttons (по желанию читателей, другие работы автора будут преданы вниманию в последующих статьях). Начальная цель: создание CSS-кнопок, которые приятно смотрятся, имеют гибкую настройку, и в это же время будут иметь максимально простую разметку.

Читать дальше →

+36

maxmert 1 фев 2013 в 14:33

В поисках идеального css-фреймворка. Maxmertkit widget manager

2 мин

16K

CSS * HTML * Node.JS *

Предыдущий пост с описанием фреймворка maxmertkit получил большой отклик. Фреймворк особенно понравился, почему-то, японцам, но наилучшую конструктивную критику и помощь я получил от хабрасообщества. Теперь к делу.
Нынешние фреймворки, включая мой, имеют модульную структуру. Но все эти модули в некоторой степени являются зависимыми друг от друга. Это плохо. Именно эту проблему я и хочу решить.

Читать дальше →

+32

VladVR 31 янв 2013 в 12:45

Игровые технологии — в жизнь

1 мин

13K

HTML * JavaScript *

Крис Тейлор, известный миру игрохитами Total Annihilation и Supreme Commander, явил миру свою новую разработку, пока что носящую рабочее имя Project Mercury. Игровая технология, которая легла в основу — strategic zoom. Впервые подобная технология была, если не ошибаюсь, применена в игре M.A.X. 2, вышедшей в 1998м году. Крис же выжал из нее все возможное и, благодаря ему, теперь «классические» RTS игры вызывают ощущение клаустрофобии, запертости в «маленьком экране».
И теперь Крис предлагает использовать эту технологию на «рабочем столе», называя его Infinite Desktop. О проекте лучше всего расскажет его автор:

Подробности

SLY_G 30 янв 2013 в 15:16

Как превратить браузер в notepad за 1 секунду

1 мин

138K

HTML *

Открыть новую закладку, скопировать в адресную строку

data:text/html, <html contenteditable>

и нажать Enter.

Вуаля.

При клике на белом поле появляется курсор, и можно писать мысли, заметки, наблюдения. Романы, стихи…

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

+281

154

humblegenius 30 янв 2013 в 12:51

Оптимизация knockoutjs при динамическом добавлении и удалении темплейтов

5 мин

5.4K

HTML * JavaScript *

Сразу предупреждаю, что статья рассчитана только для тех кто использует либо собирается использовать knockoutjs. Предполагается, что читатель уже знает что это такое и для чего он нужен.

В одном своем проекте я решил использовать knockout.js. Все было хорошо и даже замечательно, пока данных было мало и вызовы computed методов были не ресурсоемки. Но потом данных становилось все больше и появились вычисления, которые занимали заметное для глаза время. Пытаясь решить эту проблему, я разделил страницу на вкладки. Переходя на отдельную вкладку я менял темплейт и таким образом логично ожидал что уменьшится число вычислений computed значений при изменении какого-либо observable значения. Но не тут-то было. Оказалось, что особенность фреймворка такова, что перерасчет значений происходит даже тогда, когда темплейт полностью удаляется из дом модели.

Хочу посмотреть пример и решение проблемы

kangax 28 янв 2013 в 11:50

Знакомимся с Fabric.js. Часть 2-я

13 мин

26K

JavaScript * HTML * Canvas *

Это вторая часть серии статей об открытой Javascript canvas библиотеке Fabric.js.

В первой части этой серии, мы ознакомились с самыми базовыми аспектами canvas библиотеки Fabric.js. Мы узнали чем может быть полезна Fabric, рассмотрели её объектную модель и иерархию объектов; увидели что существуют как простые фигуры (прямоугольник, треугольник, круг), так и сложные (SVG). Научились выполнять простые операции над этими объектами.

Ну вот, разобрались с азами, давайте приступать к более интересным вещам!

Читать дальше →

+25

Defff 25 янв 2013 в 23:13

Cпойлер средствами css…

3 мин

108K

CSS * HTML * Веб-разработка *

Туториал

В предпраздничные дни выдалась минутка, захотелось отвлечься — окунуться в мир занятных идей, отстранясь от забот праздника. В итоге, — идея: не ожидая пришествия html5, — смастерить спойлер «по клику» посредством css и HTML.

Подробности

+18

oka_volga 23 янв 2013 в 14:55

Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript

6 мин

102K

HTML * JavaScript * Веб-разработка *

Из песочницы

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

Первым делом начал собирать информацию, ее довольно много, есть правда и устаревшая. Например, Twitter поменял уже ссылку, старая twitter.com/share, а новая twitter.com/intent/tweet, у Google ссылка «www.google.com/buzz/post», уже давно не работает, вместо нее plus.google.com/share. Конечно, это общеизвестные факты, но, похоже, все-таки не все об этом знают и предлагают «шарить» на старые ссылки.

В общем, ознакомившись с темой, решил взять кнопки в первоисточнике:

Читать дальше →

+15

Defff 20 янв 2013 в 00:37

Отслеживаем «onresize» на элементе

2 мин

73K

HTML * JavaScript *

Туториал

Достаточно древняя задача отслеживания события изменения размеров произвольного элемента на странице. Актуально при создании модульно-независимой структуры для корректировки размеров и иных сss-атрибутов нужного элемента на странице, в частности блоков с периодической Аякс-подгрузкой (например: новостных). Типично решается через таймирование и периодический опрос размеров элемента. Новый вариант, — не использующий таймирующий опрос.

Читать дальше →

denysd 14 янв 2013 в 16:08

Создание простых всплывающих подсказок на HTML5, CSS и jQuery

3 мин

106K

CSS * HTML * jQuery *

Туториал

Из песочницы

Recovery Mode

Гуру верстки вряд ли найдут в этом посте что-то новое для себя. Этот пост скорее для начинающих верстальщиков у которых, как и у меня, были проблемы с созданием и стилизацией универсальных всплывающих подсказок.

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

Читать дальше →

-1

maxmert 14 янв 2013 в 14:47

В поисках идеального css-фреймворка. Требования, реализация, maxmertkit

14 мин

70K

CSS * JavaScript * HTML *

Я обожаю twitter bootstrap. Прост, местами логичен, достаточно красив, подходит для быстрого прототипирования веб-интерфейсов. Но этого оказалось недостаточно. Взяв twitter bootstrap в большой проект, мне пришлось целиком его разобрать и переосмыслить css-фреймворки как боевые единицы в веб-проектах. В результате переосмысления родились требования к любому css-фреймворку, удобному как верстальщику, так и frontent-разработчику.

Требования и реализация

+190

135

spmbt 8 янв 2013 в 17:21

Парсинг HTML в браузерах для смены вёрстки блоков

20 мин

13K

Веб-разработка * JavaScript * HTML *

Рассмотрим задачу парсинга HTML на клиенте (Javascript) с последующим оформлением полученных данных стилями и вёрсткой и выводом их в нужные места страницы просмотра. Применение такой подгрузчик страниц и блоков нашёл в юзерскриптах — когда разработчики подгрузчика никак не связаны с разработчиками сайта. Но есть основания использовать подход и для обычных сайтов для полного отделения View от Model.

Статья получилась теоретической, потому что из-за её объёма я не стал перегружать её практическими результатами. Да и трудно пока представить некие шаги, по которым каждый мог бы подхватить идеи и начать строить подобное. Вначале надо посеять идеи, но пока попытки посева (здесь, на Хабре) не давали всходов, хотя я и не особо старался в этом направлении. Подход развивался последние полгода и был даже анонсирован на Хабре примерно в апреле-мае. В статье рассказано, «как это сделать», и перечислены преимущества подхода. Он требует глубокого и специфического программирования на JS. По результатам работы, скорее всего, имеет смысл выделить библиотеку для аналогичных задач.

Читать дальше →

-3

devote 3 янв 2013 в 04:14

Простейший способ делать закругленные углы любого типа в Internet Explorer 6,7,8 без JavaScript

13 мин

36K

HTML * Internet ExplorerВеб-разработка *

Очередной проект который мне приходится делать, требует этих самых круглых углов. Поговорив с заказчиком и дизайнером пришли к выводу что в Internet Explorer 8 нужны эти самые круглые углы. Что собственно и привело меня к тому что бы реализовать простейший и более быстрый способ организации таких рамочек, кнопочек и прочих фишечек на сайте. Без использования картинок и скриптов. При реализации данного метода, пришлось столкнутся с некоторыми подводными камнями и искать обходные пути. Что из себя представляет мой метод реализации и с чем мне пришлось столкнутся, читайте ниже.

Читать дальше →

+47

seriyPS 26 дек 2012 в 09:25

Бенчмарк HTML парсеров

10 мин

83K

Программирование * Высоконагруженные системы * HTML *

Переписывал в островке кусок одного сервиса с Python на Erlang. Сам сервис занимается тем, что скачивает по HTTP значительное количество однотипных HTML страниц и извлекает из них некоторую информацию. Основная CPU нагрузка сервиса приходится на парсинг HTML в DOM дерево.

Сперва захотелось сравнить производительность Erlang парсера mochiweb_html с используемым из Python lxml.etree.HTML(). Провел простейший бенчмарк, нужные выводы сделал, а потом подумал что неплохо было бы добавить в бенчмарк ещё парочку-другую парсеров и платформ, оформить покрасивее, опубликовать код и написать статью.
На данный момент успел написать бенчмарки на Erlang, Python, PyPy, NodeJS и С в следующих комбинациях:

Erlang — mochiweb_html
CPython — lxml.etree.HTML
CPython — BeautifulSoup 3
CPython — BeautifulSoup 4
CPython — html5lib
PyPy — BeautifulSoup 3
PyPy — BeautifulSoup 4
PyPy — html5lib
Node.JS — cheerio
Node.JS — htmlparser
Node.JS — jsdom
C — libxml2 (скорее для справки)

В тесте сравниваются скорость обработки N итераций парсера и пиковое потребление памяти.

Интрига: кто быстрее — Python или PyPy? Как сказывается иммутабельность Erlang на скорости парсинга и потреблении памяти? Насколько быстра V8 NodeJS? И как на всё это смотрит код на чистом C.

Читать дальше →

+60

Paul_King 25 дек 2012 в 12:53

Шпаргалка по верстке для больших и маленьких

3 мин

101K

HTML * CSS *

Туториал

Из песочницы

Приветствую!

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

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

Читать дальше →

+103

103

meritt 24 дек 2012 в 11:19

Улучшаем опыт взаимодействия с формами

8 мин

44K

Веб-разработка * JavaScript * HTML *

Часто меня спрашивают студенты: «Какой элемент сайта самый важный?», на что я им отвечаю — формы. Ведь с помощью форм пользователи совершают почти все конверсионные действия. Именно с этим элементом связано больше всего проблем. В этой статье я постараюсь рассказать, что можно улучшить при взаимодействии с формами. А заодно описать новые возможности работы с ними в браузерах.

Однако, сначала я бы хотел обозначить свою позицию по разработке таких форм. По-моему мнению, правильным подходом при разработке интерфейсов является подход прогрессивного улучшения.

Читать дальше →

+83

shebanoff 20 дек 2012 в 23:14

Всем, всем, всем: время обновлять свой CSS3

6 мин

41K

CSS * HTML *

Туториал

Перевод

Если Вы используете экспериментальный CSS на своих сайтах, в демках, статьях или инструментах, то это требует определенного рода поддержки. В связи с некоторыми недавними изменениями в мире браузеров, настало время пересмотреть и обновить Ваш код. Эта статья поможет Вам понять, что же начать обновлять уже сейчас.

Читать дальше →

+69

1 2 ...

95 96

98 99 ...

107 108

HTML *

Облака на CSS3 3D Transformations

Пример, как нарисовать красивые 3D облака используя CSS 3D Transformations

Вступление

Сделай сам!

Groundwork — интересный CSS/HTML5 UI фреймворк

Интерактивная инфографика с анимациями CSS и SVG

BonBon — Sweet CSS3 Buttons

:before

В поисках идеального css-фреймворка. Maxmertkit widget manager

Игровые технологии — в жизнь

Как превратить браузер в notepad за 1 секунду

Оптимизация knockoutjs при динамическом добавлении и удалении темплейтов

Знакомимся с Fabric.js. Часть 2-я

Cпойлер средствами css…

Кнопки социальных сетей, HTML 5, атрибут data и асинхронная загрузка javascript

Отслеживаем «onresize» на элементе

Создание простых всплывающих подсказок на HTML5, CSS и jQuery

Ближайшие события

В поисках идеального css-фреймворка. Требования, реализация, maxmertkit

Парсинг HTML в браузерах для смены вёрстки блоков

Простейший способ делать закругленные углы любого типа в Internet Explorer 6,7,8 без JavaScript

Бенчмарк HTML парсеров

Шпаргалка по верстке для больших и маленьких

Улучшаем опыт взаимодействия с формами

Всем, всем, всем: время обновлять свой CSS3

Вклад авторов