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

Консольные команды для форматирования исходного кода на C++, JavaScript, HTML и CSS. Сортировка пакетов на Python

Запись от 8Observer8 размещена 18.02.2024 в 16:35 / Блог 8Observer8

Показов 1805 Комментарии 1

Метки c, c++, css, html, javascript, python, си

Содержание блога

Здесь представлены ссылки на утилиты и команды для автоматического форматирования отступов из консоли. Если использовать Far Manager, то консольные команды будут сохранены в подсказчике. Far Manager похож на Total Commander, но можно показывать и скрывать консоль сочетанием клавиш Ctrl+O. Например, достаточно будет ввести команду...

8Observer8

Css рамки

Запись от FuToma размещена 06.10.2023 в 15:38

Показов 863 Комментарии 1

Метки border, css, рамки

Есть ли возможность нарисовать рамку вокруг первых 3 строк, а остальные не трогать?
Если же в рамку попадает меньше 3 строк, то она бы подстраивалась под другие автоматом

FuToma

варианты фиксированного заголовка

Запись от mr_dramm размещена 02.04.2023 в 15:38

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

Метки css, html

Использовал эти варианты в этой теме и решил закрепить в блоге. Может еще вариантов позже допишу.

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

Использование sticky codepen

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

PHP/HTML
1
2
3
4
5
6
7
<!-- https://codepen.io/den4ik_rus/pen/JjaQQyQ -->
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,

...

mr_dramm

молодой

smooth scroll

Запись от mr_dramm размещена 14.03.2023 в 12:14

Показов 2354 Комментарии 15

Метки css, html, javascript

Несложный smooth scroll

css анимация лучше работает чем js

Пример на css transform

горизонтальный codepen

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

PHP/HTML
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <style>
    * {

...

mr_dramm

молодой

Схлопывания полей в CSS

Запись от DanLo размещена 27.07.2021 в 19:10 / DanLo BLOG

Показов 3354 Комментарии 2

Метки css, margin

Все сталкивались со схлопывание полей при верстке сайтов или отдельных компонентов, но не все понимают как это работает и зачем это было придумано. К сожалению сводка на MDN c описанием этой проблемы может запутать при чтении и напоминает головоломку или ребус. На www.w3.org все описано вкратце, сухо и без каких-либо примеров. По крайней мере так показалось мне.

Разметка которая будет использована в примерах:

HTML5
1
<div class="external-block">external-block</div>

...

DanLo

Краткое пособие по простой установке/использовании sass (css-препроцессор)

Запись от pavel666228 размещена 13.12.2018 в 22:49 / Приветсвие!

Показов 2513 Комментарии 2

Метки css, sass

Препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который вы сможете использовать.

1) Для начала вам нужно скачать Ruby: https://rubyinstaller.org/downloads/
2) Установить Ruby на свой компьютер.
3) Заходим в CMD ( WIN+R -> cmd ) и пишем gem install sass.
4) Sass установлен на ваш компьютер.

Подключение sass к вашим проектам:

1) Снова заходим в cmd.
2) Вводим путь к scss...

pavel666228

<h1>Hello world</h1>

Моноблок на CSS

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

Показов 2219 Комментарии 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
Просмотров: 1001
Размер: 8.9 Кб
ID: 4009

mrtoxas

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

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

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

Слайдер на чистом css с "кнопками"!

Запись от kisk размещена 19.05.2015 в 13:34

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

Метки css, html, input, label, slider

Привет ленивым и не ленивым! Недавно лазил по разделу html/css и там нашел тему про фотоальбом: https://www.cyberforum.ru/html... ost7635550
Который был написал на JavaScript. Автор спросил, как меняется текст под фотографиями? Конечно просто! Но я сделал именно слайдер с текстом, потратив 2 часа своего времени, которые могли бы сейчас уйти на учебу, на которой меня, собственно, не было

Пример: http://output.jsbin.com/dewahe

С обычными...

kisk

Обработка события click на CSS

Запись от kisk размещена 17.05.2015 в 14:49

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

Метки click, css, focus, html

Нажатие на элементе переключает :focus на него, если ему будет присвоено tabindex="n".
В результате элементы с классом .orange или .green покажутся.
Нажатие в другой области экрана приведет к сбросу фокуса с элемента и восстановит состояние по умолчанию для элементов с классом .orange и .green
В данном случае стиль display я убрал, т.к. анимация с ним не работает.
Оставляйте комментарии, если...

kisk

Как прилепить подвал?

Запись от and_y87 размещена 10.12.2014 в 13:59

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

Метки css, front-end, html, вёрстка, подвал

что бы было.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            min-height: 100% !important;
        }
 
        #wrap {
            min-height: 100% !important;
        }
 
        #footer {
            position: relative;
            top: -50px; /** в некоторых случаях + высота border & padding & margin (top/bottom)

...

and_y87

Develo0per

производительность CSS: селекторы, раздутые и тяжелые стили.

Запись от and_y87 размещена 17.11.2014 в 09:55

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

Метки css, front-end, html, оптимизация сайтов

Что такое быстрый CSS? Какие у него слабые места? Работают ли всё ещё правила быстрых и медленных селекторов? Являются ли используемые нами свойства более важными, чем селекторы?

Появился перевод интересной статьи отвечающий на ряд этих вопросов.

Акцентируя внимание на главном:

большинство методов выбора теперь работает так быстро, что на это не стоит тратить время. Более того,

...

Миниатюры

Нажмите на изображение для увеличения
Название: slide6.jpg
Просмотров: 1223
Размер: 381.1 Кб
ID: 2861

and_y87

Develo0per

Новый опыт брендирования.

Запись от and_y87 размещена 23.09.2014 в 21:00

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

Метки css, html, livejournal, брендирование

Хочу похвастаться

Недавно на меня вышли ребята из интернет селлинговое агентство RG Media в Беларуси.
Интересно то что, цитирую отрывок:

Ваш контакт мне предоставила Алена Стогова, один из самых популярных блогеров Беларуси. Мне известно, что у вас ранее был совместный опыт размещения (брендирования) блога STOGOVA в Livejournal рекламными материалами СВЯЗНОЙ.

Хихихи... Популярный блогер меня "продал"...
А ведь и...

Миниатюры

Нажмите на изображение для увеличения
Название: lj_7.jpg
Просмотров: 865
Размер: 219.0 Кб
ID: 2725

and_y87

Develo0per

CSS3 анимация (спрайт, покадровая)

Запись от and_y87 размещена 22.09.2014 в 15:33

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

Метки css, анимация

Себе на заметку.

Источник: http://habrahabr.ru/post/161157/

Пример кода для спрайтовой анимации из 10 кадров:

CSS
1
2
3
4
5
6
7
div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

and_y87

Develo0per

WebAsyst Shop-Script: собственные звезды в оценке товара

Запись от xZooYx размещена 07.01.2013 в 21:12

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

Метки css, webasyst shop-script, примеры кода

Например у нас есть две собственные картинки звезд для рейтинга товара:

/images/redstar.gif - активная звезда
/images/blackstar.gif - неактивная звезда

Размер звезды - 12х12 px.

Стиль стандартных системных звезд рейтинга определен в файле /published/SC/html/scripts/css/general.css.
Для того, чтобы не менять этот файл, можно просто переопределить стили, указав нужные нам файлы со звездами и размеры.

CSS
1
.unit-rating { background-image: url(/images/hairpro/blackstar.gif)!important;

...

xZooYx

Всего блогов	1,204
Всего записей	6,574
Записи за последние сутки	4

Новые блоги и статьи Все статьи Все блоги /
Рисование коллайдеров физического движка Box2D-WASM v3 на Three.js 8Observer8 04.06.2025 Erin Catto (автор Box2D) переписал с нуля Box2D v2 с С++ на Си и появилась версия Box2D v3. Birch-san собрал Box2D v3 в WASM, чтобы можно было использовать Box2D v3 на JavaScript. В этом примере я. . .	Worker Threads и многопоточность в Node.js Reangularity 03.06.2025 Если вы когда-нибудь посещали собеседования на позицию Node. js разработчика, почти наверняка слышали заезженную фразу: "Node. js - однопоточная платформа". Звучит как неоспоримый факт, который. . .	Event-Driven CQRS на C# с паттерном Outbox stackOverflow 03.06.2025 В традиционной модели происходит примерно следующее: вы получаете команду, обрабатываете ее, сохраняете результат в базу данных и затем пытаетесь опубликовать событие в брокер сообщений. Но что если. . .	OwenLogic: перенос сетевых переменных в панель Weintek (EasyBuilder Pro) ФедосеевПавел 03.06.2025 ВВЕДЕНИЕ ПЕРЕД ЭКСПЕРИМЕНТАМИ - СОЗДАЙТЕ РЕЗЕРВНЫЕ КОПИИ ПРОЕКТОВ На момент написания статьи (02 июня 2025 г. ) самыми актуальными версиями ПО являются: OwenLogic v. 2. 10. 366 EasyBuilder Pro. . .	Dev-c++5.11 Покорение вершины russiannick 02.06.2025 С утра преследовала одна мысль - вот бы выучить С++. Сказано-сделано. Окончив смену, скачал в интернете бестселлер Дэвиса Dev-C++ для чайников. Книга оказалась интересной и я скачал среду, на примере. . .
Тестирование Pull Request в Kubernetes с GitHub Actions и GKE Mr. Docker 02.06.2025 Мы все знаем, что тестирование на локальной машине или в изолированном CI-окружении — это не совсем то же самое, что тестирование в реальном кластере Kubernetes. Контекстно-зависимые ошибки, проблемы. . .	Оптимизация CMake для ускорения сборки bytestream 02.06.2025 Вы когда-нибудь ловили себя на мысле, что пока ваш проект компилируется, можно успеть сварить кофе, прочитать главу книги или даже сбегать в соседний офис? Если да, то добро пожаловать в клуб. . .	JS String.prototype.localeCompare() mr_dramm 02.06.2025 скопировано из этой темы чтобы не потерялось. localeCompare без указания локали для сравнения строк под капотом использует Intl. Collator , который работает согласно Unicode Collation Algorithm. . .	Облако проектов russiannick 01.06.2025 Слава Джа, написал прогу для компиляции. Значит написал компилятор? Обьем кода 300+ строк. Язык-яву. Вводим данные, заполняем поля, тычем радиобаттоны. И по итогу в поле результат получам листинг. . .	Rust и квантовые вычисления: интеграция с Q# и Qiskit golander 01.06.2025 Мир квантовых вычислений традиционно оставался закрытым клубом для высокоуровневых языков типа Python и специализированных DSL вроде Q#. Однако в последние годы Rust начал тихую революцию в этой. . .

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

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

Архив
< Июнь 2025
Вс	Пн	Вт	Ср	Чт	Пт	Сб
25	26	27	28	29	30	31
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5