Как сделать полоски по бокам сайта

Обновлено: 07.07.2024

На форуме Na`Vi пользователи могут найти полезную информацию, касающуюся игровых дисциплин, в которые играют профессиональные игроки нашей команды. Почерпнуть для себя полезные советы и уроки из статей, написанных специально для того, чтобы каждый мог найти ответы на интересующие его вопросы. Также пользователи имеют возможность поделиться полезными сведениями и личным опытом, помочь друг другу и просто пообщаться на интересные темы.

Natus Vincere
Counter-Strike: Global Offensive
Dota 2
Hearthstone
World of Tanks
Heroes of the Storm
Разное

Вы замечали наверное часто, что многие профессиональные игроки играют с черными полосами по бокам, то есть 4:3. Давайте разберемся, почему же они это делают и научимся как установить черные полоски по бокам в CS:GO.

Если вы смотрели стримы, где играют популярные команды, такие как NaVi, Fnatic, NiP, Virtus Pro, то скорее всего видели, что они играют не как все. Они устанавливают такие настройки, потому что привыкли к квадратному монитору. Со времен Counter-Strike 1.6 не было широкоформатных мониторов. Но не все пользуются такой причиной. Чтобы сделать черные полоски, нужно поменять разрешение экрана на маленькое. Что это дает? Это дает нам больше FPS в игре, меньше лагов в CS:GO, но и без минусов здесь не обойтись. С черными квадратами у нас уменьшается поле зрения, но зато мы акцентируем внимание на экран нашего прицела и глаза не теряются.

Итак, давайте разберемся, как сделать черные полоски в CS:GO по пунктам:
1) Поменяйте разрешение на маленькое, например на 1028х768 (с таким играет ScreaM).
2) Если у вас видеокарта GeForce, тогда кликните по рабочему столу и выберите "Панель управления NVIDIA". Заходим в раздел Дисплей > Регулировка размера и положение рабочего стола. Вот здесь вам нужно выбрать точку "Формат изображения". Выполнить масштабирование на ГП. И ставим галочку где написано "Замещение режима масштабирования". Устанавливаем разрешение 1024х768 и нажимаем на применить!
3) Должно заработать! А если у вас не появляются черные полоски, то скорее всего у вас квадратный монитор и вам менять ничего не нужно.

Не забудьте выставить в кс разрешение 1024х768! Но опять же, не всем удобно бегать с маленьким разрешением, потому что модельки слишком тонкие и попасть по игрокам не так то и просто как вам кажется. На самом деле вы привыкнете со временем. Так что бегайте как ScreaM и стреляйте по пулечке, хороших вам фрагов и убийств:)

Игроки делятся на два типа, это видеокарты Nvidia и AMD. В этой статье описано все про черные полосы по бокам в игре CS:GO для пользователей этих видеокарт.
Для видеокарты NVIDIA:
1. Для начала, чтобы у нас появились черные полоски по бокам, выставляем разрешения в CS:GO на 4:3.
2. После этого, на рабочем столе кликаем правой кнопкой мышки и нажимаем на "Панель управления NVIDIA" -> "Регулировка размера и положения рабочего стола". В пункте "Масштабирование" нажимаем "Формат изображения", во вкладе "Выполнять масштабирование на:" выбираем ГП, далее ставим галочку над "Замещение режима масштабирования, заданного для игр и программ"
3. Разрешение ставим до 1280x1024
Для видеокарты AMD:
1. Для начала правой кнопкой мыши кликаем и нажимаем на "AMD Catalyst Control Center" после чего находим пункт "Управление рабочим столом" -> "Свойства рабочего стола". Здесь мы ставим разрешение, которое стоит в игре до 1280x1024.
2. После применения настроек заходим в "Мои (VGA-экран)" -> "Масштабирование изображения (VGA-экрана)" и ставим галочку около "Включить масштабирование в GPU", далее применяем, после чего нажимаем галочку над против "Сохранить соотношение сторон".
3. Далее снова переходим в "Управление рабочим столом" -> "Свойства рабочего стола" и ставим то разрешение, которое было до этого, и нажимаем применить.

Полоски всех размеров, цветов и углов так же, если не больше, распространены в веб-дизайне, как и в любых других видах визуального дизайна, от журналов до обоев. Однако процесс реализации такого дизайна далек от идеала.

Обычно мы создаем отдельное растровое изображение и каждый раз, когда возникает необходимость внести изменения, прибегаем к помощи графического редактора. Некоторые вместо этого используют файлы SVG, но это особый формат, синтаксис которого далек от дружественного. Правда, было бы здорово, если бы мы могли создавать полоски прямо в CSS? Вас это может удивить, но это возможно!

Решение

Теперь попробуем немного приблизить друг к другу границы перехода цвета

Если в одной и той же позиции определено несколько границ перехода цвета, то они образуют бесконечно малый переход от цвета, указанного в правиле первым, к цвету, указанному последним. Фактически в этой позиции вместо гладкого перетекания происходит просто резкая смена цвета.

Как вы видите никакого градиента больше нет, только два участка сплошного цвета, каждый из которых занимает по половине нашего back ground-image . По сути, мы создали две большие горизонтальные полосы. Так как градиенты — это всего лишь сгенерированные фоновые изображения, то с ними можно обходиться так же, как с любыми другими фоновыми изображениями, например, корректировать их размер с помощью background-size.

Мы уменьшили высоту наших двух полосок до 15px каждая. Так как наш фон повторяется, теперь весь контейнер заполнен горизонтальными полосами.

Схожим образом можно создавать полосы неравной ширины, просто корректируя позиции границ перехода цвета:

Для того чтобы избежать необходимости корректировать два значения каждый раз, когда нам нужно изменить ширину полосок, воспользуемся преимуществом, которое дает нам спецификация:
Если для границы перехода цвета задана позиция, меньшая чем позиция любой другой границы перехода цвета перед ней в списке, то следует установить ее позицию равной наибольшей позиции среди всех предшествующих границ перехода цвета.

Это означает, что если для второго цвета мы зададим позицию на уровне 0 , то браузер скорректирует ее, увеличив до позиции предыдущей границы перехода цвета, — как раз то, что нам требуется. Следовательно, следующий фрагмент кода создает точно такой же градиент, который мы уже видели, и при этом лучше соответствует принципам DRY:

Создавать полоски с большим количеством цветов ничуть не сложнее. Например, следующий фрагмент кода определяет горизонтальные полосы трех разных цветов:

Вертикальные полосы

Код, создающий вертикальные полосы, очень похож на предыдущий. Главное отличие — дополнительный первый аргумент, указывающий направление градиента. Мы могли бы указать его и при определении горизонтальных полос, но тогда нам было бы достаточно значения по умолчанию ( to bottom ). Помимо этого, в данном случае нам, очевидно, необходимо указать другие значения background-size :

Наши вертикальные полосы. Вверху: заполнение вертикальными полосами без повторения. Внизу: повторяющиеся полосы

Диагональные полосы

После горизонтальных и вертикальных полос кажется логичным попытаться создать диагональные полосы (с углом наклона 45°), еще раз изменив значение background-size и направление градиента, например, так:

Однако, этот способ не работает. Причина в том, что мы всего лишь повернули градиент внутри каждой плитки на 45°, а не определили повторяющуюся фоновую картинку. Вспомните растровые изображения, которые мы обычно используем для создания диагональных полос.

Они включают четыре полосы, а не две, поэтому стыки между плитками совершенно не заметны. Именно такой рисунок нам необходимо создать с помощью CSS-кода, поэтому добавим еще парочку границ перехода цвета:

Наши полосы под углом 45°; пунктирными линиями обозначена повторяющаяся плитка рисунка

Как вы видите, нам удалось создать диагональные полосы, но они кажутся тоньше, чем горизонтальные и вертикальные из предыдущих примеров. Для того чтобы понять, почему так произошло, нам необходимо снова вспомнить теорему Пифагора из школьного курса, которая позволяет вычислять длины сторон прямоугольных треугольников. Согласно теореме, длина гипотенузы (самой длинной, диагональной стороны треугольника) равна

где a и b — длины катетов. Для равностороннего прямоугольного треугольника с углами 45° формула принимает вид
В случае с нашими диагональными полосами размер фона определяет длину гипотенузы, но ширина полосы в действительности равна длине катета. Схема, объясняющая эти расчеты, показана на рисунке.

Это означает, что для того, чтобы получить полосы шириной 15px , как в предыдущих примерах, в качестве размера фона необходимо указать значение
пиксела:

Но если только на вас не наставили дуло пистолета и не заставляют под страхом смерти создавать диагональные полосы шириной ровно 15 пикселов (кстати,гибель все равно неизбежна, потому что 2 — нерациональное число, так что даже указанное нами значение приблизительное, хотя и с высокой степенью точности), я настоятельно рекомендую округлять это тяжеловесное число до чего-нибудь вроде 42.4px или даже 42px .

Готовые полосы под наклоном 45°; обратите внимание, что ширина полос такая же, как в предыдущих примерах

Еще лучшие диагональные полосы

Метод, продемонстрированный в предыдущем разделе, не обеспечивает особой гибкости. А что, если мы захотим создать полосы под углом 60°, а не 45°? Или 30°? Или 3,1415926535°? Если мы попытаемся изменить угол градиента, результат будет просто ужасным.

К счастью, существует гораздо лучший способ рисования диагональных полос. Этот факт не слишком известен, но linear-gradient() и radial-gradient() также предлагают версии с повторением: repeating-linear-gradient() и repeating-radial-gradient(). Они работают совершенно так же, с одним только отличием: границы перехода цвета повторяются бесконечно, пока не заполнят все изображение. Так, например, следующий повторяющийся градиент:

Настоящие полосы под углом 60°.

Потребовалось всего лишь изменить угол! Обратите внимание, что с этим методом нам требуются четыре границы перехода цвета для двух цветных полос, независимо от угла наклона полос. Это означает, что для создания горизонтальных и вертикальных полос лучше все же использовать первый метод, а к этому прибегать для определения диагональных полос. Если же мы имеем дело с полосами под углом 45°, то эти два метода можно даже объединить, по сути, воспользовавшись повторяющимися линейными градиентами для упрощения кода, который создает нашу повторяющуюся плитку:

Гибкие нежные полосы

Чаще всего нам требуется, чтобы полосы были не совершенно разных цветов, а представляли собой мягкие вариации яркости одного и того же цвета. Например, взгляните на такие полосы:

БУДУЩЕЕ. ГРАНИЦЫ ПЕРЕХОДА ЦВЕТА С ДВУМЯ ПОЗИЦИЯМИ
Скоро у нас появится возможность указывать две позиции для одной и той же границы перехода цвета и это одно из базовых запланированных дополнений в CSS Image Values Level 4 Это задумано как сокращение, позволяющее задать две последовательные границы перехода цвета с одним и тем же цветом, но разными позициями и очень востребованная функциональность при создании градиентных узоров. Например, код для диагональных полос выглядел бы так:

Это не только намного более емкий код, но и намного более соответствующий принципам DRY: цвета больше не дублируются, поэтому для изменения цвета достаточно одной правки. К сожалению, на сегодня данная функциональность не поддерживается ни одним браузером. Но надеюсь в будущем будет. К счастью, существует лучший способ: вместо того чтобы задавать собственный цвет для каждой полосы, мы можем сделать наш самый темный цвет цветом фона, который будет просвечивать сквозь полосы полупрозрачного белого цвета:

Результат выглядит точно такой же, но теперь для изменения цвета нам требуется внести правку только в одном месте. Также мы получаем дополнительное преимущество в том смысле, что наш базовый цвет будет служить резервным цветом в браузерах, не поддерживающих градиенты CSS. Помимо этого, как мы узнаем из следующего секрета, накладывая друг на друга градиентные узоры с полупрозрачными областями, можно создавать очень сложные рисунки.

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/subtle-stripes

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте также: