Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Динамичный карточный батлер с PVE и PVP-боями онлайн! Собери коллекцию карточных героев, построй свою боевую колоду и вступай в бой с другими игроками.

Cards out!

Карточные, Ролевые, Стратегии

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

CSS + Frontend

С этим тегом используют

HTML Программирование Верстка Javascript IT Web IT юмор Веб-разработка Программист Все
100 постов сначала свежее
1
Chuba41
1 год назад

Изучаю Frontend, нужна помощь опытных верстальщиков⁠⁠

Приветствую всех, прохожу курс по HTML/CSS на Coursera, не получается выполнить задание связанное с версткой с помощью флексбокс. Суть в том что не получается сделать так, что бы картинки масштабировались под размер контейнера. Они либо больше получаются чем надо и обрезаются, либо меньше. Можно конечно картинки подредактировать в PS, что бы они имели нужный мне размер, но одно из условий задания сделать простое добавление нового объекта. Буду рад если кто-то поможет стать на путь истинный и быть может объяснит что я делаю не так. Прошу сильно не ругать мой код, я новичок, только учусь, но готов прислушаться к вашим советам, заранее всем спасибо.

Макет задания приведен на картинке

Изучаю Frontend, нужна помощь опытных верстальщиков Frontend, HTML, CSS, IT, Программирование, Длиннопост

Ссылка на GitHab, чтобы посмотреть код

https://github.com/Chuba41/Cat.git

Показать полностью 1
[моё] Frontend HTML CSS IT Программирование Длиннопост
7
249
Codeman
Codeman
1 год назад
IT-юмор

Современный frontend⁠⁠

Современный frontend
[моё] Frontend Юмор IQ Картинка с текстом CSS Javascript
136
61
Romabooy
Romabooy
2 года назад
Типичный программист

Кодер показал уровень владения CSS и запилил на нем картину⁠⁠

Ссылка на CSS код: https://codepen.io/AsyrafHussin/pen/KKooZZJ

CSS Кодеры Программист Frontend Программирование Код Видео
18
shaitan.vladimir
shaitan.vladimir
2 года назад
Web-технологии

PADDING | MARGIN | BORDER | BOX-SIZING [Урок 7] - Отступы в CSS⁠⁠

В этом уроке разберем абсолютно все нюансы по работает с отступами в #CSS и #HTML.

Изучим: работу CSS свойств: padding, margin, border и box-sizing и полностью разберем все нюансы работы с шириной элементов и взаимодействию отступов с ними.

Домашнее задание к этому уроку ищи здесь - https://t.me/VS_FRONTEND/803

https://youtu.be/sAlpKnFGrDs

[моё] Программирование Программист IT CSS Css3 HTML Основы HTML Htmlbook Html 5 Браузер Frontend Разработчики Web Веб-разработка Pikaweb Видео YouTube
16
62
cherkalexander
cherkalexander
2 года назад
Web-технологии

Как браузер рендерит веб-страницу⁠⁠

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

Как браузер рендерит веб-страницу Javascript, Браузер, CSS, HTML, Производительность, Frontend

Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:

  • Дока - Как браузер рисует страницы

  • Reflow, Repaint, Composite — что это и как это работает?

  • Понимание критического пути рендеринга

Затем, чтобы погрузиться в детали — можно прочитать статью:

  • How the browser renders a web page? — DOM, CSSOM, and Rendering

Статья достаточно большая, поэтому лучше её читать постепенно и не один раз. Я читал раза 3 с перерывами и выписал для себя основные моменты:

  1. Браузер отправляет запрос на сервер и получает в ответ текстовый HTML файл с заголовком Content-Type: text/html; charset=UTF-8

  2. Браузер парсит полученный файл и создаёт DOM (Document Object Model)

  3. Браузер считывает CSS из всех ресурсов и строит CSSOM (CSS Object Model)

    1. CSSOM не содержит не визуальные элементы: script, meta, title, …

    2. Для построения CSSOM используются: стандартные стили браузера, авторские стили (которые и пишут разработчики), стандартные стили описанные в W3C CSS и правила каскадного наследования CSS

  4. DOM Tree + CSSOM Tree = Render Tree

    1. Содержит лишь видимые на экране элементы

    2. Именно это дерево использует бразуер для отображения контента, который мы видим в браузере

  5. Процесс отрисовки страницы

    1. Элементы на странице могут перекрывать друг друга (z-index). Поэтому браузер располагает элементы на различных слоях.

    2. Каждый слой может рендериться в отдельном потоке.

  6. Композиция слоёв

    1. Происходит объединение упомянутых выше слоёв

    2. Слои разделены на тайлы, так как композиция слоёв будет происходить при изменении стилей или размеров окна браузера

  7. Все перечисленные выше операции представляют собой Critical Rendering Path (CRP) — последовательность операций, которые необходимо произвести браузеру для отображения страницы пользователю

  8. Парсинг и сторонние ресурсы

    1. Браузер парсит HTML по мере скачивания (не ждёт скачивания всего документа)

    2. Парсинг HTML происходит в основном потоке исполнения JavaScript

  9. Parser Blocking Scripts

    1. Это скрипты, которые приостанавливают парсинг HTML

    2. Если парсер натыкается на тэг script — парсинг приостанавливается и происходит выполнение скрипта

    3. Если скрипт находится в отдельном файле, браузер приостанавливает парсинг, скачивает файл, выполняет его (в главном потоке) и лишь потом продолжает построение DOM дерева

    4. Браузер приостанавливает парсинг, так как мы можем изменять DOM с помощью JavaScript. Иначе мы бы столкнулись с race condition между JavaScript и парсером, ведь JavaScript может модифицировать DOM дерево

    5. Можно использовать async атрибут тэга script, чтобы не блокировать парсер при скачивании js-файла, файл будет выполенен, как только загрузится.

    6. Также можно использовать тэг defer, который работает также как async, но выполнение скрипта произойдёт только когда завершится парсинг

  10. Render Blocking CSS

    1. Построение CSSOM происходит в главном потоке

    2. Построение CSSOM не происходит по мере скачивания (в отличии от построения DOM). CSSOM обновится, когда сторонний файл со стилями будет загружен целиком. Пока стили не загружены, Render Tree не будет обновлено. Поэтому CSS - render blocking ресурс.

      1. В то же время, построение DOM дерева продолжается.

      2. Если парсер натыкается на тэг script, то он будет скачан, но не будет выполнен до тех пор, пока не завершится загрузка файла со стилями. Это важно, так как мы можем манипулировать CSS свойствами через JavaScript. Такой CSS называется script-blocking.

    3. Так как построение Render Tree приостановлено, следовательно и Critical Render Path застопорился, и контент не обновляется.

    4. Чтобы не блокировать рендеринг, необходимо загружать стили как можно раньше, желательно в секции head

Какие статьи помогли вам понять, как браузер рендерит страницу?

https://t.me/cherkashindev/74

Показать полностью
[моё] Javascript Браузер CSS HTML Производительность Frontend
11
Expromtom
2 года назад

Внезапный Новый год⁠⁠

Вот уж никогда в голову не приходило, что нг-выходные могут быть добровольно потрачены на учебу. Даже во времена сессий такое в голову не приходило =)

Буду оттачивать CSS, пока не перестанут быть для меня просто пиксель-тетрисом.

Внезапный Новый год CSS, Frontend, HTML, Rtfm, Обучение, Программирование, Программист

картинка ©tproger.ru

CSS Frontend HTML Rtfm Обучение Программирование Программист
1
SiKey2006
2 года назад

Frontend⁠⁠

все, что браузер может читать, выводить на экран и / или запускать. То есть это HTML, CSS и JavaScript.


HTML (HyperTextMarkupLanguage) — язык разметки документов, на котором создают структуру страницы: заголовки, абзацы, списки и так далее.


CSS (Cascading Style Sheets) — язык для описания и стилизации внешнего вида документа. Благодаря CSS-коду браузер понимает, как именно отображать элементы. Например, CSS задаёт цвета и параметры шрифтов, определяет, как будут располагаться разные блоки сайта. Ещё он позволяет воспроизводить документ в разных видах: для печати (обычной или шрифтом Брайля), вывода на экран или для чтения скринридером.


JavaScript — это язык, который оживляет веб-страницы. Его задача — реагировать на действия пользователя, обрабатывать клики мышки, перемещения курсора, нажатия клавиш. Ещё он посылает запросы на сервер и загружает данные без перезагрузки страницы, позволяет вводить сообщения и многое другое.


Источник - https://t.me/sikey_itpython_selfdevelopment/7

[моё] IT Frontend HTML CSS Javascript Текст
4
Партнёрский материал Реклама
specials
specials

Как бросить курить и не сорваться: инструкция от тех, кто смог⁠⁠

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

Как бросить курить и не сорваться: инструкция от тех, кто смог Курение, Борьба с курением, Зависимость, Telegram (ссылка), ВКонтакте (ссылка), Длиннопост

История 1 — отражение

@ holoroad

Маленькая дочка почти научилась ходить и всюду телепалась за мной. Я не курил при ней. Ходил на балкон, а она, прильнув к стеклу, смотрела на меня и ждала, когда я докурю и выйду к ней. И в какой-то момент она начала повторять за мной вот эти движения. Маленький человечек, ей было года полтора или два, прикладывала воображаемую сигарету к губам, а потом делала вид, что выпускает дым. И весело так на меня смотрела, сквозь стекло балконной двери. Ей нравилось все, что со мной связано, и она подражала всем моим действиям. Я курил уже двадцать лет и, конечно, делал множество попыток бросить до этого. Но в этот раз у меня в первый раз появилась по-настоящему важная причина бросить. Это важно для человека, который безгранично мне доверяет. С тех пор прошло почти десять лет, в течение которых я не сделал ни одной затяжки.

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

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

История 2 — список

@ maxneb

Беременность жены, рождение ребенка, здоровье, деньги — ничего не было веским поводом бросить окончательно. Постоянно срывался. Помогло составить список, что теряю и что получаю от сигарет, и понимание, что хотя бы одна затяжка — и все насмарку: пару месяцев буду курить. Только список и его осознание. Для каждого он свой. И постоянное обращение к нему. После составления списка курил еще. Но он как заноза висел в голове с вопросом «зачем?»... Так, что-то щелкнуло и сейчас не тянет. Иногда тянет физически, но осознание бесполезности курения сразу глушит позывы. Полгода, полет нормальный...

Бросать на авось — идея, которая подойдет не всем. Нужно понимать, что делать в трудные моменты:

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

  • Замените привычки. Сигарету в руках можно заменить орешками, палочками морковки, жвачкой или даже кубиком льда.

  • Займите время. Вспомните, чем вы любили заниматься: спорт, хобби, прогулки.

  • Планируйте, что делать при тяге. Она длится всего 3–5 минут. Дыхательные практики или звонок другу помогут пережить сильное желание закурить.

  • Откажитесь от «наградных сигарет». Одна затяжка и вы откатитесь назад.

Можно бросить резко, «с понедельника», или постепенно, снижая количество сигарет до нуля. Главное — определиться и не отступать.

История 3 — переключение

@ Spaka

45 лет, стаж 30. Пытался завязать много раз, потом понял, что после каждой попытки бросить, курить начинаешь больше. Как ребенок, которому не дают вкусняшку, а она случайно попала ему в руки. Из чего мозг сделал вывод: не уверен — не бросай. Потом стал замечать, что организм уже стал сам просить перестать курить. По утрам было очень неприятно во рту, удовольствие после сигареты стало короче, а негатив, приходящий следом, ощутимее: неприятные ощущения в горле, боли миндалин, страх схватить онкодиагноз. Хотя врачи говорили, что все ок, в голове-то гоняешь мысли. Я решил попробовать обмануть сам себя. Не делать из процесса отказа какого-то события. Бросить так, как будто это и должно было произойти, но ты не знаешь когда. Про себя помолился, как сумел, и попросил помощи, хитро прищурил глаз и в момент, когда забыл купить про запас (оставалась пара штук в пачке), просто перестал курить. Мне теперь даже странно, как я раньше это делал. Так и живу почти два года. Кстати, раньше в момент завязки курящих ненавидел, дым был очень противен, до тошноты. Теперь все равно. Присоединяйтесь ;)

Есть несколько стратегий отказа от курения:

  • Резкий. Эффективный и решительный подход.

  • Постепенный. Сначала — меньше сигарет, потом — меньше затяжек. И так до нуля.

  • Психологическая замена. Каждая сигарета — это ритуал. Найдите для каждого из них «здоровую замену».

  • Медикаментозная терапия. При сильной зависимости врач может порекомендовать никотинозаместительную терапию (пластыри, таблетки, жвачки) или препараты, которые помогают справиться с синдромом отмены. Но любые лекарства принимаются только по рекомендации специалиста.

Каждый, кто хочет оставить зависимость в прошлом, может обратиться в центры здоровья, которые работают при поддержке нацпроекта «Продолжительная и активная жизнь», и получить необходимую помощь специалистов. Адреса доступны на официальном портале Минздрава России о здоровье: takzdorovo.ru. Также можно позвонить на горячую линию по отказу от зависимостей 8 800 200-0-200.

История 4 — форма

Аноним

Курила электронки 2 года как замену обычным сигаретам. Думала, что это не так дорого, не так вредно да и для девушки вроде более привлекательно: не пахнут волосы и руки. А потом решила привести свое тело в форму. Стала ходить в зал и поняла, что задыхаюсь на первом же упражнении, хотя женщины гораздо старше меня бодрячком. Было очень тяжело слезть. Друзья советовали заменять сигаретами. А потом уехала в отпуск в страну, где нельзя покупать электронки, отвлеклась, и после возвращения уже не тянуло. Даже на тусовках, где все дымят.

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

«Особую тревогу вызывает рост потребления табачных изделий и электронных сигарет. Согласно исследованию, проведенному в нашем Центре, 36,8% курильщиков потребляют одновременно и табак, и электронные сигареты. Среди молодежи в возрасте 25-39 лет этот показатель превышает 45%. Электронные никотиносодержащие и безникотиновые устройства поражают сердце, сосуды, дыхательную систему и ДНК организма не менее пагубно, чем традиционные сигареты, а в ряде случаев способны вызывать острые состояния, включая сосудистые поражения и летальные исходы» – рассказывает руководитель Центра профилактики и контроля потребления табака НМИЦ терапии и профилактической медицины Минздрава России Маринэ Гамбарян.

История 5 — пари

@ kernima

Вроде не было никаких серьезных предпосылок, чтобы бросить. Да и чтобы начать: просто все вокруг курили, думал, это сейчас тренд. А потом как-то сидели в баре и решили поспорить с некурящим другом. Он затирал, что моя жизнь из-за электронки катится ко дну, я — доказывал, что это всего лишь маленькая шалость. В общем поспорили на пять тысяч. Чтобы было легче и можно было отвлечься, начал бегать по утрам. Друг проиграл, а я возвращаться к курению не стал. Вдруг снова у еды появился вкус, я начал высыпаться и больше не устаю на втором лестничном проеме. Короче, советую!))

Сульфат никотина, один из компонентов электронных сигарет, раньше использовали как пестицид, но запретили из-за высокой токсичности. Жидкость для «электронок» содержит и опасные химикаты вроде пропиленгликоля, ацетальдегида и акролеина — промышленных веществ, способных вызывать воспаления, поражения органов и мутации клеток. Ароматизаторы, создающие иллюзию безвредности, на деле могут привести к более тяжелой интоксикации, чем при курении сигарет. А еще вейпы содержат не природный, а синтетический никотин — солевой. Он быстрее всасывается, дольше выводится и вызывает зависимость стремительнее.

Когда организм отвыкает от никотина, бывает нелегко: люди становятся раздражительным и нервозными, быстро устают, возникают сухость во рту, кашель, трудности с концентрацией. Важную роль в борьбе с этими симптомами играет питание. В рацион стоит включить овощи, фрукты, орехи, семечки. Клетчатка способствует очищению организма от токсинов. Важно питаться сбалансировано: с достаточным количеством белков, жиров, углеводов и витаминов. Лучше временно исключить продукты, усиливающие удовольствие от табака (например, мясо), а также отказаться от алкоголя, кофе и крепкого чая. Они могут спровоцировать желание закурить. А вот большое количество воды, травяных чаев и настоев облегчит очищение организма и поможет справиться с сухостью во рту.

История 6 — связь

Аноним

Устал курить, понял, что мне это мешает заниматься спортом и в целом комфортно себя чувствовать. Пошел через ассоциации: покурил во время головной боли, и потом через самовнушение дал себе установку, что голова болела от курения. Звучит странно, конечно, но это сработало. Никотиновую зависимость снижал постепенно через редкое курение кальяна (2-3 раза в неделю с последующим уменьшением).

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

Разберитесь, что именно тянет вас к сигарете: скука, стресс, привычка? Когда вы это осознаете, будет легче подобрать альтернативные действия — прогулку, книгу, разговор с близким. Учитесь распознавать моменты, когда особенно хочется закурить, и переключаться на что-то другое. Можно подключиться к программам или группам поддержки — это поможет не сдаваться. И главное: уберите из дома все сигареты.

История 7 — вершина

Аноним

Поднимался с сыном по Пушкинской тропе на гору Железная. Мне лет сорок пять было, идем общаемся, сын бегает туда-сюда. Ну идем короче, а сзади нас догоняет семейная пара, мирно о чем-то щебеча между собой. Догнали и обходят. И так спокойно удаляются… Все бы ничего, но им лет по шестьдесят, если не больше. Я попробовал в их темпе, но задыхаться стал. Короче, поднялся я на гору, спустился, смял пачку и выкинул в мусорную урну. Вот уже 13 лет не курю. Стаж 27 лет.

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


Каждый, кто пытался избавиться от никотиновой зависимости, знает, как это тяжело. Ломка, раздражительность, навязчивые мысли. Даже при переходе на вейпы, иллюзия «меньшего вреда» быстро развеивается: химические коктейли из ароматических смесей также бьют по легким, сосудам и всему организму.

Хорошая новость в том, что вы не одни. В сообществе «Давай бросать» (ВКонтакте и мессенджере Telegram), который работает при поддержке нацпроекта «Продолжительная и активная жизнь» знают, каково бороться с триггерами, искать замену привычке и удерживать себя от срыва. Здесь делятся историями тех, кто смог, поддерживают тех, кто только начал, и помогают разобраться в главном: как пережить отказ без мучений.

Социальная реклама. АНО «Национальные приоритеты», ИНН: 9704007633

Показать полностью
Курение Борьба с курением Зависимость Telegram (ссылка) ВКонтакте (ссылка) Длиннопост
12
Web.Study
Web.Study
2 года назад
Web-технологии

Мам, сейчас так модно. Добавляем темную тему на страницу с помощью CSS⁠⁠

В последние пять лет в интерфейсном дизайне появилось понятие тёмной темы: это когда фон делают тёмным, а текст — светлым. Это полезно в телефонах для энергосбережения и чтения с экрана ночью. Ну и просто красиво.


Сегодня мы добавим на страницу переключатель тёмной и светлой темы с помощью CSS.


Не только про CSS, но и про другие штуки из области Front-end мы рассказываем тут

Мам, сейчас так модно. Добавляем темную тему на страницу с помощью CSS Программирование, IT, Программист, CSS, Frontend, Web-программирование, Веб-дизайн, Веб-разработка, Длиннопост

Автопереключение тёмной темы



Современные браузеры умеют определять, что на телефоне или компьютере включена тёмная тема. Для этого разработчики используют такой медиазапрос:


@Media screen and (prefers-color-scheme: dark) {}


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

Мам, сейчас так модно. Добавляем темную тему на страницу с помощью CSS Программирование, IT, Программист, CSS, Frontend, Web-программирование, Веб-дизайн, Веб-разработка, Длиннопост

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


Посмотреть на автопереключение темы на странице проекта.



Ручное переключение темы


Медиазапросы — это хорошо, но иногда нужно поставить принудительный переключатель темы, чтобы не зависеть от настроек устройства. Например, если нужно отладить тёмную тему, когда у вас на компьютере работает светлая тема.


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



Настраиваем стили


Единственное, что нам нужно добавить в стили — это два класса: для светлой и тёмной темы:

Мам, сейчас так модно. Добавляем темную тему на страницу с помощью CSS Программирование, IT, Программист, CSS, Frontend, Web-программирование, Веб-дизайн, Веб-разработка, Длиннопост

Первый класс устанавливает чёрный фон и белый цвет текста, а второй, наоборот, — белый фон и чёрный текст. Цвета здесь можно указывать любые и для любых элементов, а мы для простоты остановимся на двух.


Внешне страница никак не поменяется — мы ещё не применили эти стили. Чтобы это сделать, надо поработать с остальными элементами, например добавить id к тегу <body> — по нему мы будем обращаться к содержимому всей страницы:

<body id="main">

Добавляем переключатель


Чтобы мы могли менять светлую тему на тёмную и обратно, добавим простой переключатель. Сделаем его в виде абзаца и добавим его сразу после строки поиска:

<p id="select" onclick="darkLight()" style="cursor: help;">Включить тёмную тему</p>

Вот что здесь происходит:


<p id="select» ← указываем id переключателя, чтобы потом получить доступ к нему из скрипта;


onclick="darkLight ()» ← говорим, что должно произойти при нажатии: вызываем функцию darkLight ();


style="cursor: help;»> ← меняем внешний вид курсора при наведении на переключатель;


Включить тёмную тему</p> ← текст надписи.


Переключатель появился на странице, но пока ничего не переключает. Исправим это в скрипте.

Мам, сейчас так модно. Добавляем темную тему на страницу с помощью CSS Программирование, IT, Программист, CSS, Frontend, Web-программирование, Веб-дизайн, Веб-разработка, Длиннопост

Пишем скрипт


Мы указали в свойствах переключателя, что при нажатии нужно выполнить функцию darkLight () — значит, нам нужно добавить её в рабочий скрипт.


Чтобы не зависеть от работы других скриптов и не лезть в их код, сделаем новый js-файл dark.js и положим в него такой код:

Мам, сейчас так модно. Добавляем темную тему на страницу с помощью CSS Программирование, IT, Программист, CSS, Frontend, Web-программирование, Веб-дизайн, Веб-разработка, Длиннопост

Последнее, что осталось сделать, — подключить скрипт в конце HTML-страницы:


<script type="text/javascript" src="dark.js"></script>


Теперь у нас появилась поддержка тёмной темы с моментальным переключением:

Мам, сейчас так модно. Добавляем темную тему на страницу с помощью CSS Программирование, IT, Программист, CSS, Frontend, Web-программирование, Веб-дизайн, Веб-разработка, Длиннопост

Посмотреть на работу переключателя на странице проекта.



Что дальше


Этот способ работает только на одной странице, и после перезагрузки тему нужно переключать заново. В следующий раз сделаем апгрейд — научим сайт запоминать настройки и применять их ко всему сайту. А ещё подружим автопереключение с надписью на переключателе.

Показать полностью 6
[моё] Программирование IT Программист CSS Frontend Web-программирование Веб-дизайн Веб-разработка Длиннопост
9
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии