Форум программистов, компьютерный форум, киберфорум
mrtoxas
Войти
Регистрация
Восстановить пароль
Старый
Имитация медиа-запросов для конкретного элемента (Element Queries)
Запись от mrtoxas размещена 30.06.2020 в 14:38
Показов 1664 Комментарии 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
Старый
Рейтинг: 5.00. Голосов: 1.
Моноблок на CSS
Запись от mrtoxas размещена 30.10.2016 в 00:54
Показов 2213 Комментарии 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;
...
Миниатюры
Нажмите на изображение для увеличения
Название: mono.PNG
Просмотров: 986
Размер:	8.9 Кб
ID:	4009  
Аватар для mrtoxas
Старый
Спойлер на js
Запись от mrtoxas размещена 29.10.2016 в 23:47
Показов 1736 Комментарии 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
Старый
Рейтинг: 5.00. Голосов: 8.
Прижать footer к нижнему краю страницы. Подборка вариантов.
Запись от mrtoxas размещена 27.10.2016 в 22:52
Показов 16840 Комментарии 4

Вариант 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
Новые блоги и статьи
Обнаружение объектов в реальном времени на Python с YOLO и OpenCV
AI_Generated 29.04.2025
Компьютерное зрение — одна из самых динамично развивающихся областей искусственного интеллекта. В нашем мире, где визуальная информация стала доминирующим способом коммуникации, способность машин. . .
Эффективные парсеры и токенизаторы строк на C#
UnmanagedCoder 29.04.2025
Обработка текстовых данных — частая задача в программировании, с которой сталкивается почти каждый разработчик. Парсеры и токенизаторы составляют основу множества современных приложений: от. . .
C++ в XXI веке - Эволюция языка и взгляд Бьярне Страуструпа
bytestream 29.04.2025
C++ существует уже более 45 лет с момента его первоначальной концепции. Как и было задумано, он эволюционировал, отвечая на новые вызовы, но многие разработчики продолжают использовать C++ так, будто. . .
Слабые указатели в Go: управление памятью и предотвращение утечек ресурсов
golander 29.04.2025
Управление памятью — один из краеугольных камней разработки высоконагруженных приложений. Го (Go) занимает уникальную нишу в этом вопросе, предоставляя разработчикам автоматическое управление памятью. . .
Разработка кастомных расширений для компилятора C++
NullReferenced 29.04.2025
Создание кастомных расширений для компиляторов C++ — инструмент оптимизации кода, внедрения новых языковых функций и автоматизации задач. Многие разработчики недооценивают гибкость современных. . .
Гайд по обработке исключений в C#
stackOverflow 29.04.2025
Разработка надёжного программного обеспечения невозможна без грамотной обработки исключительных ситуаций. Любая программа, независимо от её размера и сложности, может столкнуться с непредвиденными. . .
Создаем RESTful API с Laravel
Jason-Webb 28.04.2025
REST (Representational State Transfer) — это архитектурный стиль, который определяет набор принципов для создания веб-сервисов. Этот подход к построению API стал стандартом де-факто в современной. . .
Дженерики в C# - продвинутые техники
stackOverflow 28.04.2025
История дженериков началась с простой идеи — создать механизм для разработки типобезопасного кода без потери производительности. До их появления программисты использовали неуклюжие преобразования. . .
Тестирование в Python: PyTest, Mock и лучшие практики TDD
py-thonny 28.04.2025
Тестирование кода играет весомую роль в жизненном цикле разработки программного обеспечения. Для разработчиков Python существует богатый выбор инструментов, позволяющих создавать надёжные и. . .
Работа с PDF в Java с iText
Javaican 28.04.2025
Среди всех форматов PDF (Portable Document Format) заслуженно занимает особое место. Этот формат, созданный компанией Adobe, превратился в универсальный стандарт для обмена документами, не зависящий. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru