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

mrtoxas

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

Войти

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

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

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

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

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

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

Показов 17233 Комментарии 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 acid activex ai ai-agent aiohttp algorithms android angular anthropic apache api gateway apple architecture arduino asm asp.net asp.net core asp.net mvc async async/await asyncio audio auth aws azure azure service bus backpressure batch big data blazor blender builder c c# c++ c++20 c++23 c++26 c++ qt cache canvas chat chatbot chromeos ci/cd circuit breaker claude clean architecture clojure cloud com com-порт command concurrency context coroutine cors cpu cpython cqrs crud cryptography csrf css dapper data science db ddd ddos debug delphi devops di docker docker compose dockerfile docker swarm dto dynamodb e2e e2ee ef core elasticsearch electronics elk encryption entity framework etl event-driven event loop event sourcing eventual consistency express.js factory method fastapi gamedev gif gil github actions gitlab ci glsl go godot gpt gpu graceful degradation grafana graphql grpc hash helm heroku hexagonal highload html http identity in-memory in-memory db injection interview ios iot istio jaeger java javascript jdk json jvm jwt k8s kafka keycloak kotlin kubernetes langchain libuv linq linux lisp llm logging machine learning masstransit math maven mcp mediator mediatr memory microcontroller microservices middleware ml.net mobile mobiledev mock mongodb mqtt multitenant multithreading mysql neo4j network new year next.js nginx node.js nosql ntp oauth oauth2 observer onnx oop openai openai api openapi opengl openid opentelemetry opentk oracle orm outbox parallel pascal pascalabc.net patterns php pinecone poetry polly postgresql powershell prisma prometheus pub/sub purgecss pydantic pytest python pytorch q# qaoa qiskit qt quantum quantum computing quarkus rabbitmq race condition rag range rate limiting rbac react redis reflection refresh token repository rest api retry rust s3 saga saml security serialport serilog serverless service mesh sfinae signalr simd smart-agent socket.io solid sound spa span spring spring boot sql sqlalchemy sql injection sqlite sql server sse ssl sso state machine stl stm32 strangler strategy streaming svelte swagger swift swiftui tailwindcss task telegram threadpool three.js tkinter tls typescript uart unit-test unit of work unity vb vb.net vb 6.0 visual studio vite vs code vue wasm web web api webassembly webflux webgl webrtc websocket windows windows 7 winforms xss zero-trust ии математика нейросеть ооп си

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

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

Наверх

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

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