Метка «css» - 31

В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.

Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.

Например, для сохранения уникального номера блока часто пишут так:

<div class="items">
  <div class="item1">...</div>
  <div class="item3">...</div>
  <div class="item6">...</div>
  <div class="item1">...</div>
  ...
Читать полностью »

HTML5 / Игра Survivor (Commodore 64) на html, css и javascriptДовольно качественная эмуляция игры на HTML + CSS + JavaScript, для рисования используются именно html блоки, а не canvas.

Представьте, что на дворе сейчас 1982 год и вы играете в аркаду. Это было любимое времяпрепровождение у подростков того времени. Ваша задача — уничтожить все, что можно :) Для управления используйте стрелки, для стрельбы — shift или ctrl, для мин — пробел. Цель игры — уничтожить базу, при этом не попасться противникам и не убиться об стенки.

Игра Survivor изначально была написана для Atari 2600 в 1982 году и была портирована на Commodore 64 годом позднее. ДаннуюЧитать полностью »

Многие веб-мастера для придания оформления ссылкам, используют css селекторы вида [href^=”http://samedomen”], чтобы ссылки на определенный адрес по разному оформлялись не используя классы.
В одной админке использовал такой селектор, для придания иконки ссылке в зависимости от url. Однако у себя на Google Chrome 17 столкнулся с багом, что иконки у всех ссылок одинаковые. Во всех остальных браузерах(В том числе и в IE8 и Safari 5), все нормально. Ниже скриншот с простейшим примером.

Каскадные Таблицы Стилей / Необычный баг в Chrome с CSS селектором

Для простоты примера, я убрал из кода все лишнее.

<!DOCTYPE html> <html> <head> <metaЧитать полностью »

Каскадные Таблицы Стилей / Кроссбраузерные проблемы псевдокласса :active

С появлением множества нововведений в технологиях вёрстки веб страниц, у разработчиков появилась возможность отчасти заменить JavaScript, применяя HTML/CSS для большей производительности и расширяемости интерфейса своих порталов.
Помимо проблем с кроссбраузерностью и разной реализаций новых свойств CSS, часто приходится встречаться с другими проблемами в местах, где казалось бы, давно всё устаканилось и везде работает одинаково. Именно с такой проблемой мне пришлось столкнутся, применяя CSS transitions вместе с псевдоклассом :active. Видимо из-за того, что в документации отсутствует описание поведенияЧитать полностью »

Проблема и решение.
Privat1024 не от ПриватБанка
Оказалось, что web-интерфейс сервиса Приват24 не влазит в 1024px по ширине. И получается, что корзина с подготовленными платежами оказывается за экраном и человек вынужден скролить.

Пришлось написать юзер-стиль. Может кому тоже облегчит жизнь.

http://userstyles.org/styles/61370/privat1024
— ни один элемент интерфейса не убран, только уменьшены в размере
— правая колонка сужена
— рекламные блоки отображаются полупрозрачными, чтобы не отвлекали


<a rel="nofollow"Читать полностью »

Проблема и решение.
Privat1024 не от ПриватБанка
Оказалось, что web-интерфейс сервиса Приват24 не влазит в 1024px по ширине. И получается, что корзина с подготовленными платежами оказывается за экраном и человек вынужден скролить.

Пришлось написать юзер-стиль. Может кому тоже облегчит жизнь.

http://userstyles.org/styles/61370/privat1024
— ни один элемент интерфейса не убран, только уменьшены в размере
— правая колонка сужена
— рекламные блоки отображаются полупрозрачными, чтобы не отвлекали

Вид при 1024px
<a rel="nofollow"Читать полностью »

Небольшой рассказ о том, как корректно генерировать font для рунета. В центре внимания известный уже на Хабре буржуйский сервис fontsquirrel.

Если красота должна спасти мир, то дизайнеры web интерфейсов — это армия зла. Ни поймите меня не верно, сам считаю себе web дизайнером, и не могу перенести криворуких верстальщиков, приходится верстать свои же psd-изыскания, такими же кривыми руками. И тут начинается самое интересно…

Как все на практике:

1. Первым делом все упирается в выбор нужного шрифтового стека для рунета, и если бы не <a rel="nofollow"Читать полностью »

Ближе к двум часам ночи в голову в месте с мыслями о вечном приходят не менее вечные вопросы — «в чём смысл жизни ?», «зачем вообще человеку спать ?» или «Какого чёрта эта #%^$ не работает ?» и чем ближе утро, тем сильнее начинает волновать именно этот самый последний вопрос.
Чуть ниже я расскажу о том какого чёрта сss селекторы иногда не ведут себя так, как нам кажется правильным, и о том как они на самом деле должны себя вести.
Глава один – идём направо!

Селекторы взвешивают, чтобы узнать какой из стилей будет примененен, когда несколько селекторов так или иначе указывают на один и тот же элемент, и пытаютсяЧитать полностью »

Каскадные Таблицы Стилей / Равномерное выравнивание блоков по ширине
Продолжая свои «css-раскопки» возникла новая идея, разобрать по косточкам ещё одну актуальную тему, которая касается равномерного выравнивания блоков по ширине. В принципе мои доскональные исследования я уже запостил у себя в блоге, но так как прошлая моя работа очень понравились Хабра-сообществу, то я решил сделать здесь небольшой краткий обзорчик этой статьи, чтобы ни одна хабра-душа не пропустили её наверняка. Так что, как говорил Гагарин: «Поехали».
В общем в задачах вёрстки периодически возникают моменты, когда появляется необходимость выровнять какой-нибудь список по ширине экрана. При этом пункты этого списка должныЧитать полностью »

Веб-стандарты / В продолжение темы защиты котят
Итак, неподражаемая Лиа Виру с ее блистательным призывом не позволить браузерной отсебятине причинить вред беззащитным пушистым созданиям, была услышана и на Хабре (если кто-то пропустил — срочно ознакомьтесь c переводом lahmatiy чуть ниже или моим переводом на css-live.ru — не пропадать же труду). Мы уже наслышаны о панике последней недели из-за намерения браузеров поддерживать чужие префиксы. Кто-то, возможно, успел подписать петицию против этого безобразия (как я). Кто-то, напротив, прислушивается к доводам Тантека Челика (между прочим, создателя микроформатов) и других экспертов, убеждающих, что не так всё страшно и еще немного бардакаЧитать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js