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

Эти единицы позволяют задавать размеры объектов относительнно окна браузера. Размер считается в процентах от высоты (vh), ширины (vw) или минимального из этих двух значений (vmin). В отличие от указания размеров в процентах, vh, vw и vmin всегда привязяаны к размерам окна, а не контейнера текущего блока. До сих пор их поддерживал только Internet Explorer 9+ (впрочем, IE вместо указанной в стандарте единицы vmin использует обозначение «vm»).

Так, этот пример:

<!doctype html> <head> <style> * { margin:0; padding:0; border:0; }  #red  { 	background:red; 	height:100vh; 	width:100vw; } </style> </head> <body> 	<div id="red">Читать полностью »

Эти единицы позволяют задавать размеры объектов относительнно окна браузера. Размер считается в процентах от высоты (vh), ширины (vw) или минимального из этих двух значений (vmin). В отличие от указания размеров в процентах, vh, vw и vmin всегда привязяаны к размерам окна, а не контейнера текущего блока. До сих пор их поддерживал только Internet Explorer 9+ (впрочем, IE вместо указанной в стандарте единицы vmin использует обозначение «vm»).

Так, этот пример:

<!doctype html> <head> <style> * { margin:0; padding:0; border:0; }  #red  { 	background:red; 	height:100vh; 	width:100vw; } </style> </head> <body> 	<div id="red">Читать полностью »

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

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

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

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

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


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