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

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

Моноблок на 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

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

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

Показов 16840 Комментарии 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 10 1с 3d access activemq agile ai algorithm android angular antipatterns api gateway architecture arm asm asp.net asp.net core astra async async/await auth avro aws lambda azure functions bash basic batch behavior graph bff blender branch-free bulkhead c c# c# 14 c++ c++11 c++14 c++17 c++20 c++23 c++26 c++98 c++ qt chinese ci/cd circuit breaker citrix clang cli cloud cnpg com composition api concurrency cpu cqrs csrf css cypress db ddd debian delphi devops di django docker dotnet drakon einstein elasticsearch elk eng eureka event-driven event sourcing evloution excel functional gamedev gdi+ git github github actions gitlab go golang grafana graphql grpc hadoop hardware hcl hcl notes highload html http interview ios iot java javascript jest jit jpa json jupyter notebooks jwt kafka kotlin kryo kubernetes laravel lazarus linux llvm lock-free lotusscript lstm machine learning math matplotlib maven mediatr memory leak microservices middleware mingw ml mobile mobiledev mock mongodb mqtt msa ms access multitenant multithreading next.js node.js notepad++ npp oauth2 oop opengl openid openid connect openmp opentk oracle owenlogic parallel pascal patterns pdf performance php postgresql powershell problem prometheus protobuf pyenv pyqt python qt rabbitmq race condition react reflection rest api rubyrush rust saas saga script-fu sdl serilog serverless sfml shared mail folders sidecar solid spring spring boot spring data sql server std::execution std::span strangler string string_view swift swiftui tcl tdd telegram thread threadpool three.js typescript ubuntu ue uikit uml unit-test unity unity2d userscript vb vba visual studio vk vs code vue vue.js vue 3 wasm webapi webassembly webgl webview winapi windows winforms wireshark word wpf xml xpath xss yii yolo города ии информатика кумир макрос нейросеть новый год ооп праздник регистр рождество си сумматор триггер форум

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

Новые блоги и статьи Все статьи Все блоги /
Обнаружение объектов в реальном времени на 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, превратился в универсальный стандарт для обмена документами, не зависящий. . .

Наверх

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

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