WebMentor | Вебментор

nav rebuilt Эффект переворачивания блоков при наведении на элементы меню. Реализовано с помощью CSS.

✏️ Открыть CodePen

#codepen #scss

simple card animation Карточка с плавно всплывающей информацией при наведении на нее. Реализовано с помощью CSS.

✏️ Открыть CodePen

#codepen #scss

Step Indicator Индикатор шагов. Реализовано с помощью CSS и JavaScript.

✏️ Открыть CodePen

#codepen #css #js

Header Menu Необычное превращение бургер-кнопки в меню. Реализовано с помощью SCSS.

✏️ Открыть CodePen

#codepen #css

Button Hover Styles Подборка эффектов для кнопок при наведении курсора. Реализовано с помощью SCSS.

✏️ Открыть CodePen

#codepen #css

Icon Social Menu Animation Иконки соцсетей, которые сменяют свой фон при наведении на них курсора мыши. Реализовано с помощью CSS.

✏️ Открыть CodePen

#codepen #css

Code Motel Logo Окрашивание логотипа в яркие цвета при наведении на него курсора мыши. Реализовано с помощью CSS.

✏️ Открыть CodePen

#codepen #css

Animated Vertical Navigation Menu Вкладка анимированного вертикального навигационного меню. Реализовано на HTML, CSS и JavaScript.

✏️ Открыть CodePen

#codepen #html #css #menu

Animated Login Form Вкладка анимированной логин-формы. Реализовано на HTML и CSS.

✏️ Открыть CodePen

#codepen

Random Password Generator

Вкладка генератора паролей. Реализовано на SCSS и JavaScript.

✏️Открыть CodePen

#codepen

🎮 Создание простой игры "Крестики-нолики" на веб-странице ➖ Игра "Крестики-нолики" — классическая игра, которая может быть легко реализована на веб-странице с использованием HTML, CSS и JavaScript. В этом посте мы рассмотрим простую реализацию этой игры. 📝 Мини-инструкция по созданию игры:

1. Создайте игровое поле: Используйте HTML для создания сетки, которая будет представлять собой игровое поле. 2. Добавьте логику игры с помощью JavaScript: Реализуйте функции для проверки выигрышных комбинаций, хода игрока и компьютера, а также для обновления игрового поля. 3. Стилизуйте игровое поле с помощью CSS: Добавьте стили, чтобы сделать игровое поле более привлекательным и удобным для использования.

🕹 Пример кода JavaScript:

// JavaScript
const cells = document.querySelectorAll('.cell');
let currentPlayer = 'X';

cells.forEach(cell => {
    cell.addEventListener('click', handleClick);
});

function handleClick(e) {
    const cell = e.target;
    if (cell.textContent === '') {
        cell.textContent = currentPlayer;
        if (checkWinner()) {
            alert(`${currentPlayer} wins!`);
            reset();
            return;
        }
        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
    }
}

function checkWinner() {
    const winningCombinations = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
        [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
        [0, 4, 8], [2, 4, 6] // diagonals
    ];
    return winningCombinations.some(combination => {
        const [a, b, c] = combination;
        return cells[a].textContent &&
            cells[a].textContent === cells[b].textContent &&
            cells[a].textContent === cells[c].textContent;
    });
}

👾 Таким образом, вы можете создать и насладиться игрой "Крестики-нолики" прямо в вашем браузере!

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

Полный код с поста будет в комментариях WebMentor ⚙️ Вебментор

Animated - SVG Bubbles Демонстрирует анимированные пузыри, созданные с использованием SVG и CSS

✏️ Открыть Codepen

#codepen #html #css #js

Dropdown Menu

Bыпадающее меню со списком социальных сетей. Реализовано с помощью CSS и JavaScript.

✏️ Открыть CodePen

#codepen

Character Showcase Gallery Анимация увеличение масштаба карточки при наведении. Реализовано с помощью CSS.

Открыть CodePen

#codepen

Wrong place to be - 404 Этой странице точно перебежала дорогу черная кошка. Реализовано с помощью CSS.

Открыть CodePen

#codepen

Neon Clock (CSS) Неоновые часы с эффектом перемещения. Реализовано с помощью SCSS и JavaScript.

Открыть CodePen

#codepen

Preloader Залипательная анимация загрузки страницы. Реализовано с помощью CSS.

Открыть CodePen

#codepen

Social Card Hover Раздвижной эффект для соцсети с появлением краткой информации. Реализовано с помощью CSS.

Открыть CodePen

#codepen

Hamburger Menu Animation Простая, но прикольная анимация для бургер-кнопки. Реализовано с помощью CSS.

Открыть CodePen

#codepen

Radio Button List Флажок перескакивает на тот вариант, который вы хотите выбрать. Реализовано с помощью SCSS.

Открыть CodePen

#codepen