mrtoxas - Форум программистов и сисадминов Киберфорум

mrtoxas

Форум программистов и сисадминов Киберфорум

Войти

Регистрация
Восстановить пароль

Блоги

Сообщество

Поиск

Имитация медиа-запросов для конкретного элемента (Element Queries)

Запись от mrtoxas размещена 30.06.2020 в 14:38

Показов 2064 Комментарии 0

Метки html, js, resizeobserver

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

HTML5
1
2
3
<div class="wrapper" id="wrap" data-mq="">
  <div class="block"></div>
</div>

JavaScript
1
2
3
4
5
6
7
const mq = {
  sm: 200,
  md: 400,
  lg: 600
};
 
const element = document.getElementById("wrap");

...

mrtoxas

Моноблок на CSS

Запись от mrtoxas размещена 30.10.2016 в 00:54

Показов 2514 Комментарии 0

Метки css, design, html, perversion

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
  background: #b6b4b7;
  padding: 10px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
}
.monoblock {
  width: 475px;
  margin: 0 auto;
}
.monitor {
  height: 345px;
  background: -webkit-linear-gradient(top, #255f6b 0%, #255f6b 83%, #ffffff 83%, #ffffff 100%);
  background: linear-gradient(to bottom, #255f6b 0%, #255f6b 83%, #ffffff 83%, #ffffff 100%);
  border-radius: 15px;

...

mrtoxas

Спойлер на js

Запись от mrtoxas размещена 29.10.2016 в 23:47

Показов 2012 Комментарии 0

Метки js, spoiler

CSS
1
2
3
4
.spoiler {display: inline-block; vertical-align: top;}
.block {width: 40px; height: 30px; background: tomato; margin: 5px;}
.spoiler__split {display: block; text-align: center; cursor: default; }
.spoiler__drop {padding: 1px 0;background-color: green;}

HTML5
1
2
3
4
<div class="spoiler">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>

...

mrtoxas

Прижать footer к нижнему краю страницы. Подборка вариантов.

Запись от mrtoxas размещена 27.10.2016 в 22:52

Показов 17703 Комментарии 4

Метки css, footer, html, прижать футер

Вариант 1. Псевдоэлементы.

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <title>Sticky Footer</title>
  <style>
    html, body {
      height: 100%;
      margin:0;
    }
    .wrapper {
      min-height: 100%;
      /* margin-bottom = высота футера */
      margin-bottom: -50px;

...

mrtoxas

Регистрация 12.07.2015
Адрес Украина
Сообщений 6,672
Записей в блоге 4

Новые блоги и статьи Все статьи Все блоги /
Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .	У нас сейчас поговорку "Опять 25" нужно переделать на "Опять +35". kumehtar 04.08.2026 С ностальгией вспоминаю времена моего детства, когда у нас и правда +25 - была максимальная температура летом. Раньше +25 °C реально казались вершиной жары, когда можно было весь день пропадать на. . .	Как ИИ начал спорить и врать (возможно почуяв опасность для себя от индустрии - уход от электроники). Hrethgir 04.08.2026 Недельный диалог, на фоне событий с НПЗ. Да, из спирта можно получать бензин, и это не сложно. Но потом в схеме я решил избавиться от насоса, при этом полностью сделав контроль подачи спирта в. . .	Термопринтер QR701 Argus19 03.08.2026 Термопринтер QR701 Купил два термопринтера QR701. На сэлф-тесте написано: Language: PC936 (GB18030). Что означает, что принтеры могут печатать только латиницу и китайские иероглифы. Так же. . .
Создание формы заимствованного документа Maks 03.08.2026 Задача: Необходимо создать собственную форму заимствованного документа. На форме должен быть реквизит "Покупатель", а также табличная часть со следующими реквизитами: - Расчетный счет покупателя. . .	Задача предоставления скидок покупателям Maks 03.08.2026 Задача: В документе "Продажи" необходимо реализовать функционал предоставления скидок покупателям. Скидка должна автоматически рассчитываться и подставляться в соответствующее поле при выборе. . .	Почему SEO не начинается с ключевых слов: что проверить до написания текстов Neotwalker 01.08.2026 Когда владельцу сайта предлагают заняться SEO, первым шагом часто становится сбор запросов и написание текстов. Логика кажется понятной: 1. Находим ключевые слова. 2. Добавляем их на. . .	Знание — сила: Доктрина интенциональности знаний, углубление в формулу Hrethgir 01.08.2026 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11957&stc=1&d=1785567302 Знаменитый афоризм Фрэнсиса Бэкона «Знание — сила» (Scientia potentia est) в массовой культуре принято понимать. . .

Наверх

Сообщение форума

Отменить изменения