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

Css3

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

HTML CSS Html 5 Программирование IT Верстка Программист Все
66 постов сначала свежее
5

Готовая 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, Длиннопост

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

[моё] Гайд Html 5 Css3 Javascript Длиннопост
2

Пикабу Игры

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
Партнёрский материал

Поделитесь своими историями о пикниках!⁠⁠

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

Опрос Отдых Пикник на природе

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

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

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

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

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

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

Jame высказался об исключении KaiR0N: CS:GO, Counter-strike, Css3
[моё] 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
3

HTML5 и CSS3⁠⁠

Стоит изучить HTML и CSS до изучения HTML5 и CSS3 или можно сразу приступать? Будут ли сложности при изучении HTML5 и CSS3, если до этого не изучил HTML и CSS?

[моё] HTML CSS Html 5 Css3 Скрипт Вопрос Текст
15
Партнёрский материал

Знаете ли вы об органических продуктах? Пожалуйста, ответьте на вопрос⁠⁠

Organic — это красивое слово, придуманное маркетологами, или трудоемкое производство, которое включает в себя заботу о природе и здоровье потребителя? Это интересная тема, в которой редакция Пикабу непременно разберется и скоро расскажет вам. А пока ответьте, пожалуйста, на вопрос.

Еда Продукты
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
Посты не найдены