Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
0 просмотренных постов скрыто
6

Готовая textarea с использованием emoji без подключения библиотек⁠⁠

Привет, это мой первый пост, поэтому не судите строго.

Не думал сначала, что вообще буду что то публиковать, но потом подумал, что может быть кому то будет это полезно.

Итак начнем, для начала создаем файл с названием index.html, открываем через любой доступный вам редактор и делаем ctrl+c -> ctrl+v в него следующее содержимое:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Стена с эмоджи</title>

<link rel="stylesheet" href="css/style.css"/>

</head>

<body>

<div class="container" style="height: 500px">

<div id="emojiHistory"></div> <!-- Контейнер для истории смайлов -->

<div class="wallcontainer">

<div class="emoji-container">

<button id="emojiButton">😊</button>

<div class="emoji-menu" id="emojiMenu" style="overflow-y: auto; height: 200px; width: 450px;">

<div class="emoji">Эмоции</div><br/>

<div class="emoji">😀</div>

<div class="emoji">😁</div>

<div class="emoji">😂</div>

<div class="emoji">🤣</div>

<div class="emoji">😃</div>

<div class="emoji">😄</div>

<div class="emoji">😅</div>

<div class="emoji">😆</div>

<div class="emoji">😉</div>

<div class="emoji">😊</div>

<div class="emoji">😇</div>

<div class="emoji">🥰</div>

<div class="emoji">😍</div>

<div class="emoji">🤩</div>

<div class="emoji">😘</div>

<div class="emoji">😗</div>

<div class="emoji">😙</div>

<div class="emoji">😚</div>

<div class="emoji">😋</div>

<div class="emoji">😜</div>

<div class="emoji">😝</div>

<div class="emoji">😛</div>

<div class="emoji">🧐</div>

<div class="emoji">🤓</div>

<div class="emoji">😎</div>

<div class="emoji">🥸</div>

<div class="emoji">🤔</div>

<div class="emoji">😳</div>

<div class="emoji">😬</div>

<div class="emoji">😱</div>

<div class="emoji">😨</div>

<div class="emoji">😰</div>

<div class="emoji">😢</div>

<div class="emoji">😭</div>

<div class="emoji">😩</div>

<div class="emoji">😫</div>

<div class="emoji">😵</div>

<div class="emoji">😳</div>

<div class="emoji">🤯</div>

<div class="emoji">😶</div>

<div class="emoji">😐</div>

<div class="emoji">😑</div>

<div class="emoji">🙄</div>

<div class="emoji">😬</div>

<div class="emoji">😏</div>

<div class="emoji">😒</div>

<div class="emoji">😤</div>

<div class="emoji">😮</div>

<div class="emoji">❤️</div>

<div class="emoji">🧡</div>

<div class="emoji">💛</div>

<div class="emoji">💚</div>

<div class="emoji">💙</div>

<div class="emoji">💜</div>

<div class="emoji">🤎</div>

<div class="emoji">🖤</div>

<div class="emoji">💖</div>

<div class="emoji">💗</div>

<div class="emoji">💓</div>

<div class="emoji">💞</div>

<div class="emoji">💕</div>

<div class="emoji">💟</div>

<div class="emoji">❣️</div>

<div class="emoji">💔</div>

<div class="emoji">😘</div>

<div class="emoji">😗</div>

<div class="emoji">😙</div>

<div class="emoji">😚</div>

<div class="emoji">💋</div>

<br/><div class="emoji">Руки</div><br/>

<div class="emoji">👋</div>

<div class="emoji">🤚</div>

<div class="emoji">✋</div>

<div class="emoji">🖐️</div>

<div class="emoji">👌</div>

<div class="emoji">✌️</div>

<div class="emoji">🤞</div>

<div class="emoji">🤟</div>

<div class="emoji">✊</div>

<div class="emoji">👊</div>

<div class="emoji">🤛</div>

<div class="emoji">🤜</div>

<div class="emoji">🙌</div>

<div class="emoji">👏</div>

<div class="emoji">🤝</div> <!-- Рукопожатие -->

<div class="emoji">🙏</div> <!-- Молитва (скрещенные руки) -->

<div class="emoji">👐</div> <!-- Открытые руки -->

<div class="emoji">🤲</div> <!-- Руки с открытыми ладонями (помощь) -->

<div class="emoji">🤹‍♂️</div> <!-- Жонглер (человек) -->

<div class="emoji">🤹‍♀️</div> <!-- Жонглер (женщина) -->

<div class="emoji">🖖</div> <!-- Жест вулканца (Спок) -->

<div class="emoji">✋</div> <!-- Рука с поднятым пальцем -->

<div class="emoji">👈</div> <!-- Указатель рукой влево -->

<div class="emoji">👉</div> <!-- Указатель рукой вправо -->

<div class="emoji">👆</div> <!-- Указатель вверх -->

<div class="emoji">👇</div> <!-- Указатель вниз -->

<div class="emoji">🖐️</div> <!-- Рука с открытой ладонью -->

<div class="emoji">👋</div> <!-- Помахать рукой -->

<div class="emoji">👐</div> <!-- Открытые руки -->

<div class="emoji">✊</div> <!-- Сжатый кулак -->

<div class="emoji">🙌</div> <!-- Поднятые руки (радость) -->

<div class="emoji">👍</div> <!-- Пальцы вверх (поддержка) -->

<div class="emoji">👎</div> <!-- Пальцы вниз (неодобрение) -->

<br/><div class="emoji">Еда</div><br/>

<div class="emoji">🍏</div> <!-- Яблоко -->

<div class="emoji">🍎</div> <!-- Красное яблоко -->

<div class="emoji">🍐</div> <!-- Груша -->

<div class="emoji">🍊</div> <!-- Апельсин -->

<div class="emoji">🍋</div> <!-- Лимон -->

<div class="emoji">🍌</div> <!-- Банан -->

<div class="emoji">🍉</div> <!-- Арбуз -->

<div class="emoji">🍇</div> <!-- Виноград -->

<div class="emoji">🍓</div> <!-- Клубника -->

<div class="emoji">🍈</div> <!-- Дыня -->

<div class="emoji">🍒</div> <!-- Вишня -->

<div class="emoji">🥭</div> <!-- Манго -->

<div class="emoji">🍍</div> <!-- Ананас -->

<div class="emoji">🥥</div> <!-- Кокос -->

<div class="emoji">🥑</div> <!-- Авокадо -->

<div class="emoji">🍅</div> <!-- Томат -->

<div class="emoji">🥕</div> <!-- Морковь -->

<div class="emoji">🥔</div> <!-- Картофель -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥬</div> <!-- Листовая зелень -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥯</div> <!-- Бейгл -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍔</div> <!-- Гамбургер -->

<div class="emoji">🍟</div> <!-- Картошка фри -->

<div class="emoji">🌭</div> <!-- Хот-дог -->

<div class="emoji">🍿</div> <!-- Попкорн -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🍱</div> <!-- Бенто -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🍜</div> <!-- Рамен -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍛</div> <!-- Карри -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥮</div> <!-- Лунный торт -->

<div class="emoji">🍺</div> <!-- Пиво -->

<div class="emoji">🍷</div> <!-- Вино -->

<div class="emoji">🥂</div> <!-- Тост -->

<div class="emoji">🍸</div> <!-- Коктейль -->

<div class="emoji">🍹</div> <!-- Коктейль с зонтиком -->

<div class="emoji">🥛</div> <!-- Молоко -->

<div class="emoji">🥛</div> <!-- Сыворотка -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🍜</div> <!-- Рамен -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍛</div> <!-- Карри -->

<div class="emoji">🥮</div> <!-- Лунный торт -->

<div class="emoji">🍺</div> <!-- Пиво -->

<div class="emoji">🍷</div> <!-- Вино -->

<div class="emoji">🥂</div> <!-- Тост -->

<div class="emoji">🍸</div> <!-- Коктейль -->

<div class="emoji">🍹</div> <!-- Коктейль с зонтиком -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🍆</div> <!-- Баклажан -->

<div class="emoji">🥬</div> <!-- Листовая зелень -->

<div class="emoji">🥕</div> <!-- Морковь -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🥘</div> <!-- Паэлья -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍊</div> <!-- Апельсин -->

<div class="emoji">🍋</div> <!-- Лимон -->

<div class="emoji">🍌</div> <!-- Банан -->

<div class="emoji">🥭</div> <!-- Манго -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения (торт) -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🎂</div> <!-- День рождения -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🍴</div> <!-- Посуда -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍔</div> <!-- Гамбургер -->

<div class="emoji">🍟</div> <!-- Картошка фри -->

<div class="emoji">🍿</div> <!-- Попкорн -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍄</div> <!-- Гриб -->

<div class="emoji">🌰</div> <!-- Орех -->

<div class="emoji">🍞</div> <!-- Хлеб -->

<div class="emoji">🥖</div> <!-- Багет -->

<div class="emoji">🥐</div> <!-- Круассан -->

<div class="emoji">🍩</div> <!-- Пончик -->

<div class="emoji">🍪</div> <!-- Печенье -->

<div class="emoji">🍰</div> <!-- Торт -->

<div class="emoji">🎂</div> <!-- День рождения -->

<div class="emoji">🍫</div> <!-- Шоколад -->

<div class="emoji">🍬</div> <!-- Конфета -->

<div class="emoji">🍭</div> <!-- Сосарная сладость -->

<div class="emoji">🍮</div> <!-- Птичье молоко -->

<div class="emoji">🍯</div> <!-- Воск -->

<div class="emoji">🥤</div> <!-- Напиток -->

<div class="emoji">🍵</div> <!-- Гречка -->

<div class="emoji">🌯</div> <!-- Сальса -->

<div class="emoji">🥗</div> <!-- Салат -->

<div class="emoji">🥑</div> <!-- Торговля -->

<div class="emoji">🍆</div> <!-- Баклажан -->

<div class="emoji">🥦</div> <!-- Брокколи -->

<div class="emoji">🌽</div> <!-- Кукуруза -->

<div class="emoji">🌮</div> <!-- Тортугас -->

<div class="emoji">🍲</div> <!-- Горячее блюдо -->

<div class="emoji">🍕</div> <!-- Пицца -->

<div class="emoji">🍣</div> <!-- Суши -->

<div class="emoji">🌭</div> <!-- Хот-дог -->

<div class="emoji">🍴</div> <!-- Посуда -->

</div>

</div>

<textarea id="emojiTextarea" rows="3" style="min-height: 350px" placeholder="О чем вы хотите написать?"></textarea>

</div>

</div>

<script src="js/script.js"></script>

</body>

</html>

Далее нам понадобиться создать 2 папки с названиями css и js.

Открываем папку css и создаем файл style.css со следующим содержим:

body {

font-family: Arial, sans-serif;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background-color: #f2f2f2;

}

.container {

display: grid;

grid-template-rows: auto 1fr;

gap: 10px;

width: 600px;

}

.wallcontainer {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background-color: white;

padding: 10px;

border: 1px solid #ccc;

border-radius: 10px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

h1 {

margin: 0;

font-size: 24px;

}

.emoji-container {

position: relative;

width: 100%;

}

#emojiButton {

font-size: 16px;

background-color: #eaeaea;

border: 1px solid #2c2c2c;

border-radius: 3px;

padding: 3px;

cursor: pointer;

transition: border-color 0.2s;

text-align: center;

}

#emojiButton:focus {

outline: none;

border-color: #000;

}

.emoji-menu {

display: none;

position: absolute;

top: calc(100% + 5px);

left: 0;

background-color: white;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

z-index: 1000;

transition: opacity 0.3s ease;

opacity: 0;

pointer-events: none;

}

.emoji-menu.show {

display: block;

opacity: 1;

pointer-events: auto;

}

.emoji {

font-size: 16px;

cursor: pointer;

margin: 2px;

display: inline-block;

}

#emojiHistory {

display: flex;

flex-wrap: wrap;

max-height: 30px;

overflow-y: auto;

height: 30px;

background: none;

border: none;

padding: 0;

}

#emojiHistory p {

margin: 0;

padding: 5px 0 0 5px;

font-size: 16px;

}

.history-emoji {

font-size: 20px;

transition: margin-left 0.1s;

margin-left: 6px;

cursor: pointer;

}

#emojiTextarea {

width: 100%;

border: 1px solid #ccc;

border-radius: 5px;

padding: 5px;

margin-top: 10px;

resize: none;

box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);

outline: none;

}

#emojiTextarea:focus {

border-color: #007BFF;

}

#emojiMenu {

width: 100%;

height: 300px;

overflow-y: auto;

border: 1px solid #ccc;

padding: 10px;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

}

Сохраняем и закрываем, далее идем в папку js и создаем файл script.js со следующим содержимым:

const emojiButton = document.getElementById('emojiButton');

const emojiMenu = document.getElementById('emojiMenu');

const emojiTextarea = document.getElementById('emojiTextarea');

const emojiHistory = document.getElementById('emojiHistory');

const maxHistorySize = 15; // Максимальный размер истории

let emojiHistoryArray = JSON.parse(localStorage.getItem('emojiHistory')) || []; // Загружаем историю из Local Storage

function saveEmojiHistory() {

localStorage.setItem('emojiHistory', JSON.stringify(emojiHistoryArray)); // Сохраняем историю в Local Storage

}

function updateEmojiHistory() {

emojiHistory.innerHTML = ''; // Очищаем историю смайлов

if (emojiHistoryArray.length === 0) {

const historyText = document.createElement('p');

historyText.innerText = 'История пуста';

emojiHistory.appendChild(historyText);

} else {

emojiHistoryArray.forEach((emoji) => {

const span = document.createElement('span');

span.innerText = emoji;

span.className = 'history-emoji';

span.addEventListener('click', (event) => {

const clickedEmoji = event.target.innerText;

// Записываем смайл в текстовую область

emojiTextarea.value += clickedEmoji + ' ';

// Перемещаем смайл в начало истории

emojiHistoryArray = emojiHistoryArray.filter(e => e !== clickedEmoji);

emojiHistoryArray.unshift(clickedEmoji);

updateEmojiHistory();

saveEmojiHistory(); // Обновляем хранилище

});

emojiHistory.appendChild(span); // Добавляем смайлы в историю

});

}

}

emojiButton.addEventListener('click', (event) => {

emojiMenu.classList.toggle('show');

event.stopPropagation();

});

document.querySelectorAll('.emoji').forEach(emojiElement => {

emojiElement.addEventListener('click', (event) => {

const selectedEmoji = event.target.innerText;

// Изменение смайла на кнопке

emojiButton.innerText = selectedEmoji;

// Добавление в текстовое поле

emojiTextarea.value += selectedEmoji + ' ';

// Добавление в историю эмоджи

emojiHistoryArray.unshift(selectedEmoji);

if (emojiHistoryArray.length > maxHistorySize) {

emojiHistoryArray.pop();

}

updateEmojiHistory();

saveEmojiHistory(); // Сохраняем обновленную историю

emojiMenu.classList.remove('show');

});

});

// Загружаем историю смайлов при загрузке страницы

updateEmojiHistory();

// Закрыть меню при клике вне

window.addEventListener('click', (event) => {

if (!emojiButton.contains(event.target) && !emojiMenu.contains(event.target)) {

emojiMenu.classList.remove('show');

}

});

Сохраняем и открываем index.html через браузер должно получиться следующее:

Готовая textarea с использованием emoji без подключения библиотек Гайд, Html 5, Css3, Javascript, Длиннопост

Итоговый вариант

Также при использовании emoji они будут записываться с помощью скрипта в память с помощью local storage, поэтому при обновлении страницы, история использований emoji будет запоминаться вот так:

Готовая textarea с использованием emoji без подключения библиотек Гайд, Html 5, Css3, Javascript, Длиннопост

Надеюсь это будет кому то полезно, камни не кидайте все таки первый раз пишу статейку))
Всех благ!

Показать полностью 2
[моё] Гайд Html 5 Css3 Javascript Длиннопост
3
10

Cssformalize v2⁠⁠

Это продолжение этого поста: Кастомные формы Html
Не прошло и двух лет как я смог найти время для продолжения работы над проектом.


Но сейчас изменения на много глобальнее:

  1. Проект обзавелся сайтом: cssformalize.com

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

  3. Есть поддержка тем

В общем теперь можно самому создавать дизайн форм прямо в генераторе на сайте и использовать их. Есть удобная установка через npm или CDN

P.S. Напомню что это только кастомизация нативных html форм без применения js. только css

Всегда рад критике и советам.
Пока что нет адаптивности для самого сайта. Это в планах.
CSS писал я, js ChatGPT

[моё] HTML Html 5 CSS Css3 Текст
19

Личный сайт Кота Тихомира⁠⁠

Тихомир

Вот сайт. На нем я и тренируюсь. Самому смешно, но когда я начинал, я не понимал разницу между CSS и HTML. Сейчас разницу я понимаю, но , как уже ясно, что никаких курсов я не заканчивал. Т. к. работать в этой сфере я не собираюсь из-за низкого уровня :).

Уровень JS у меня такой же, как в начале CSS :)

Как ни странно это будет звучать, но с высоты своего уровня (и этого сайта), я считаю, что изучать эти языки (многие называют HTML, CSS и JS -- языками начального уровня !!! 8) ) надо именно так -- брать чужие коды, лезть в первую строку Google и разбирать каждую строку.

А не идти на курсы, где вам за ваши деньги полгода будут лить в уши про основы: биты, байты , кодировки, сайты, сервера. А через полгода у вас портфолио из 1 сайта, где вы не понимаете половину.

Что по сайту? Кто в теме видит, что сайт размещен на Б/П хостинге от MS (а может от Google). Да, там вроде бы не положен PHP, но Коту Тихомиру он не нужен :).

После многодневных поисков программы адекватной синхронизации по FTP, я случайно наткнулся на возможность хостинга от MS (а может от Google), и забыл этот FTP, как страшный сон. Синхронизация по webdaw гораздо проще и быстрее.

Если разметку я еще могу разобрать, cвойства CSS понятны, почти. То JS , разумеется, все чужое, из открытых источников, большая часть из CODEPEN. Если я там нахожу что-то прикольное, я выбираю, что попроще, и приклеиваю на сайт. У меня уже места свободного там нет.

Моя гордость -- падающее меню, много мне поело нервов. Там @Keyframe от CSS и animation на чужой JS-библиотеке. Сдуру решил сделать случайное число оборотом. Наверное, 2 месяца приклеивал это случайное к CSS. Хотя эта случайность и не заметна вообще. Хотя теперь все кажется простым.

Приятно, что мой пост первый, в этом сообществе "Сайт - руками блудим".

Показать полностью
[моё] Сайт Css3 Html 5 Javascript Текст
2

Узнать про «Много призов»

Перейти
Партнёрский материал

Как вы играете в настолки? Отвечают пикабушники⁠⁠

Настолки — это способ интересно провести вечер или разругаться из-за правил? Спросили пикабушников, в какие настольные игры они играют, о чем спорят и какие традиции создают.

Как вы играете в настолки? Отвечают пикабушники Игры, Настольные игры, Пицца, Длиннопост

Настолки — это… спорить и биться до победного

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

@YaFreijA

Когда играем в «Манчкин» и если спорим, то последнее слово в споре у супруга: моя колода, мои правила! Бесит.

@smolakovi350

Играем спокойно, но когда игра требует хоть малейшего внимания или логики, то начинается битва трехсот спартанцев.

@EvilMatha

Мы в семье обожаем настолки! Есть кооперативные, где мы вместе разгадываем загадки или распутываем вымышленные преступления. Иногда такие игры проходят не без ругани, особенно со стороны папы :) Он погружается в сюжет и начинает нервничать, если мы совершаем ошибки. Но это все равно весело)))

@antinomia

«Сет», «Quarto», «Пентаго» или «Spot it» — неважно. В нашей семье ставки всегда высоки! Потому что выигравший получает пульт от телевизора, а проигравший моет посуду :)

@user8597021

Я родила себе напарников для игры в «Манчкин»! 👑🐉У меня две дочери, и каждый вечер у нас разворачиваются эпические баталии за звание самого хитровывернутого манчкина. Главное правило: «Ничего личного, это только игра!» Никакой жалости, только холодный расчет и предательский смех в темноте. 😈 

Всех любителей поиграть приглашаем в приложение Додо Пиццы. Теперь там можно получить моментальные подарки и выиграть «Много призов». На кону путешествия, годовые запасы пиццы и сертификаты OZON, Lamoda, M.Видео и Giftery. Заказывайте продукты с плашкой «многопризов», чтобы увеличить свои шансы на победу. Полные правила акции здесь.

Настолки — это… создавать традиции

Например, играть по определенным дням или в определенном месте, готовить любимые блюда. Впрочем, бывают и весьма необычные.

@valerius

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

И традиция раз в месяц в субботу с друзьями играть в настолку, жарить стейки))

@snakeks

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

@DemoNaoki

У нас есть традиция встречаться в баре и играть в «Место преступления». Как вы понимаете, за все годы столько глухарей накопилось...

@kypazh

С 2016 года начала образовываться наша игровая «ячейка». Традиционный день — четверг (с 18 до 23). Сначала это было 2−3 стола в антикафе, но когда перестали там помещаться, переехали в клуб настольных игры. В 2018 году увидели, как в Подмосковье проводится настольный кэмп. И нам так понравилась эта идея, что мы провели свой. Потом еще. Теперь мы проводим Кэмп 3 раза в год.

@gsamsa

У нас с друзьями есть традиция планировать собраться и поиграть (и не собираться и не играть)

Настолки — это… нарушать правила

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

@IinternetLoL

Мы 5 лет играли в «Ужас Аркхэма» 2 редакции. А потом в очередной раз заглянули в правила в спорный момент и выяснили, что играли неправильно в одном ключевом моменте игры, что распространялось в итоге на все партии. И все наши победы таким образом обнуляются :)

@user8946569

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

Как вы играете в настолки? Отвечают пикабушники Игры, Настольные игры, Пицца, Длиннопост

Настолки — это… откладывать на потом

Некоторые пикабушники признались, что совсем не играют в настолки или не могут найти напарников и время. Хорошо, что в «Много призов» можно играть одному прямо в приложении Додо Пиццы!

@user5087694

Мы купили 4 настолки, сыграли в них по разу с женой. Теперь они лежат, у нас нет времени в них играть.

@Jeelli

У меня целая коллекцию настолок, а играть не с кем. Может, завести кота? ))

@jukovod

Самая любимая «Codenames». В другие не играю. Вот только не всегда удается найти компанию.

@R3pl1k4nt

Один раз мы почти подрались, с тех пор не играем)

Настолки — это… найти свою половинку

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

@MariK38

Я познакомился с женой благодаря «Алиас». Она странно объясняла слова, совсем непонятно, но так эмоционально, что мое сердце пропустило удар. Так и живем 9 лет. Обожаю ее!

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

Реклама 12+. ООО «Додо Франчайзинг», ОГРН 1131101001844, ИНН 1101140415, 167001, Республика Коми, г. Сыктывкар, Октябрьский проспект, 16. Акция «Много призов» действует с 10.06.25 по 11.08.25. Правила акции, информация об организаторе, об условиях участия, о призах, их количестве, сроках, месте и порядке их получения — на dodopizza.ru. Организатор вправе изменить условия акции. «Путешествие на море» — сертификат на 300 000 на покупку тура у туроператора, 3 шт. «Годовой запас пиццы» — промокод на одну пиццу 25 см за 1 , действует 24 раза до 12.08.26, 100 шт.

Показать полностью 1
Игры Настольные игры Пицца Длиннопост

Начинаю пилить соцсеть⁠⁠

Возможно опенсорс на python/django 4.0 и фронт на обычном html/css ну и js наверно в ход пойдёт без библиотек и всего такого.Что можете предложить добавить в неё?Советы и предложения по разработке приветствуются.

[моё] Python Джанго IT Программирование Программист Сайт Разработка HTML CSS Css3 Социальные сети Опрос Текст
42

Jame высказался об исключении KaiR0N:⁠⁠

«Александр приходит в команду, с него большой спрос, ему тяжело. А в конце выясняется, что в него не верит команда и они хотят старого игрока. Это не может не обидеть. Мне тоже 24-летнему с выигранным мейджором было бы обидно.

Но для него есть плюс: с ним очень много работали, мы помогли ему комфортно чувствовать на своих ролях»

Jame высказался об исключении KaiR0N: CS:GO, Counter-strike, Css3
Показать полностью 1
[моё] CS:GO Counter-strike Css3
3

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
17

Все о datalist, fieldset и button в HTML⁠⁠

Привет, в рамках этого урока мы разберемся оставшимися тегами формы, а именно: datalist, fieldset, legend, button. Также разберемся в нюансах и частоте использования этих тегов. Текстовая версия урока в полной версии этой статьи.

Datalist

<datalist> - содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>, с атрибутом list.

Не стоит использовать его вместо тега <select>, но можно использовать как вспомогательный тег для <input>. Причина в том что его сложнее обрабатывать через JavaScript.

<form action="">
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
</form>

Fieldset

<fieldset> - существует для группировки <input> внутри тега <form>, а также помогает удобно управлять группой полей.

<form action="#">
<h3>Registration form</h3>
<fieldset>
<div>
<label for="name_input">First name:</label>
<input id="name_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_input">Surname:</label>
<input id="surname_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<div>
<label for="email_input">Email:</label>
<input id="email_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_input">Password:</label>
<input id="password_input" type="text" placeholder="Password">
</div>
</fieldset>
</form>

У <fieldset> также есть несколько атрибутов, которые помогают управлять сразу всей группой <input>.


name - задает общее имя для группы

disabled - делает группу недоступной для редактирования

form - если <fieldset> лежит вне тега <form> то этот атрибут позволит вам связать их.

<form action="" id="example_form">
<h3>Example form</h3>
<label>
<input type="text" placeholder="Some example input">
</label>
</form>
<fieldset form="example_form">
<div>
<label for="name_2_input">First name:</label>
<input id="name_2_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_2_input">Surname:</label>
<input id="surname_2_input" type="text" placeholder="Surname">
</div>
</fieldset>

Legend

<legend> - Является заголовком для группы элементов, сгруппированных через <fieldset>

<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>

Button

<button> - Парный тег, который предназначен для создания кнопки, имеет схожие атрибуты с тегом <input>. Может использовать как внутри <form> заменяя собой <input type="button">, так и просто как отдельный элемент на странице.

<form action="">
<h3>Another Example Form</h3>
<fieldset>
<legend>User info</legend>
<div>
<label for="name_3_input">First name:</label>
<input id="name_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="surname_3_input">Surname:</label>
<input id="surname_3_input" type="text" placeholder="Surname">
</div>
</fieldset>
<br>
<fieldset disabled>
<legend>User credentials</legend>
<div>
<label for="email_3_input">Email:</label>
<input id="email_3_input" type="text" placeholder="Email">
</div>
<div>
<label for="password_3_input">Password:</label>
<input id="password_3_input" type="text" placeholder="Password">
</div>
</fieldset>
<fieldset>
<legend>Form Controls</legend>
<button type="submit">Submit</button>
<button type="reset">Clear Form</button>
</fieldset>
</form>

Файлы с урока


P.S. Подпишись на мой youtube и telegram канал чтобы регулярно получать новый контент.

Показать полностью
[моё] Программист Программирование Баг IT Разработка Web Web-программирование Frontend HTML Html 5 Основы HTML CSS Css3 Верстка Верстальщик Создание сайта Видео YouTube Длиннопост
3
Посты не найдены