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

mrtoxas

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

Войти

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

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

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

Показов 1891 Комментарии 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

Показов 2380 Комментарии 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

Показов 1897 Комментарии 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

Показов 17428 Комментарии 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

Поиск в блоге mrtoxas

Содержит текст: Искать только в заголовках

Расширенный поиск
Категории блога
Локальные категории
Последние записи
Облако меток

.net .net core acid active directory ai aiohttp algorithms android anthropic apache api gateway arc architecture async async/await asyncio auth avx512 backpressure bash benchmarkdotnet botfather box2d c c# c++ c++26 c++ arrays c++ code blocks c++ comparsions c++ conditions c++ matrix c++ qt cache callback hell cdc cgo chat chatbot cheat sheet chromadb ci/cd claude cloud cmake com command concurrency connection pool context control instructions coroutine cors cpp cpp codestyle cpp keywords cpu cqrs crud cryptography css db ddd ddos debian delphi devops di docker docker compose dockerfile e2ee echo ecmascript efk electronics elixir elk encryption envoy esb event-driven event loop event sourcing eventual consistency exactly-once express.js f# file management find rpm forth future gamedev gc gcd gil github actions go gomlx gorgonia goroutine gotch gpt gpu graceful degradation grafana graphql hardware haskell hexagonal highload hosting html http identity idp in-memory ios istio i which package jaeger java javascript jdk jit jpa json jwt kafka kde keycloak kotlin kubernetes langchain langchain4j ldap libreoffice cannott run linq linux llama llm load balancer logging machine learning math mcp microcontroller micrometer microservices middleware ml-dsa ml-kem mobiledev modbus mongodb mongodb atlas ms access ms office ms word multithreading native aot network next.js nginx nist nlp node.js nosql ntp numa oauth observer ocaml onnx oop openai openai api openmp opentelemetry opentracing outbox owenlogic package management parallel patterns pgo php pinecone pki plasmoid poetry polling post-quantum postgresql powershell prisma prometheus pub/sub purgecss pydantic pytest python pytorch qml quantum computing quoting rabbitmq race condition rag rate limiting react redis reflection refresh token regex repository rest api retry rpc rpm file rpm whatrequires; package reqs rust saga scala sdl sdl3 sdl3_image sdl3_mixer sdl3_ttf security service mesh simd soa socket.io span spring spring boot spring cloud spring security sql sqlalchemy sql injection sse ssl state machine std::execution stdio stl stm32 strategy streaming svelte swift symbol tailwindcss task telegram telegram bot tensorflow threadpool tls tsconfig.json ttf typescript unit-test valute vb vb.net vb 6.0 vector vite vue wasi wasm weather web web api webassembly webdev webgl webhook webrtc webserver websocket webview2 winapi windows windows 11 wordpad xss асу тп гриб дизайн динамическая загрузка ии математика нейросеть ооп си экранирование

Поиск по метке

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

Наверх

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

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