Рубрика «css» - 161

в 23:24, , рубрики: css, html-верстка, переводы, метки: , ,

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

Каскадные Таблицы Стилей / Новый метод замены текста картинкой, или избавляемся от 9999px

Немного об истории решения этого вопроса.

Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая <a rel="nofollow"Читать полностью »

в 14:25, , рубрики: css, html, html5, javascript, jquery, плюшки, метки: , , , , ,

В 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>
  ...
Читать полностью »

в 17:40, , рубрики: css, game, html 5, javascript, метки: , , ,

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

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

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

в 14:28, , рубрики: css, css selectors, Google Chrome, webkit, баги, костыль, метки: , , , , ,

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

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

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

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

в 18:57, , рубрики: css, кроссбраузерность, метки: ,

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

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

в 21:12, , рубрики: css, Privat24, stylish, userstyle, интерфейс, ПриватБанк, стиль, метки: , , , , , ,

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

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

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


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

в 21:12, , рубрики: css, Privat24, stylish, userstyle, интерфейс, ПриватБанк, стиль, метки: , , , , , ,

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

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

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

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

в 7:56, , рубрики: css, типографика, метки: ,

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

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

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

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

в 6:33, , рубрики: css, селекторы, метки: ,

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

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

в 3:53, , рубрики: css, css2.1, css3, css4, w3c, webkit, браузеры, версии, интриги, котята, модули, пиар, префиксы, расследования, скандалы, стандарты, статусы, утопия, метки: , , , , , , , , , , , , , , , , ,

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

1...1020...160161162
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js