Записи

Опубликовано

Анимация переменных шрифтов с помощью CSS и Splitting JS

css animation

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

Представляем переменные шрифты

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

Читать далее «Анимация переменных шрифтов с помощью CSS и Splitting JS»
Поделится
Опубликовано

Нейролингвистический программист

Из резюме соискателя на должность программиста:

Нейролингвистический программист

Только когда я загуглил МПЛ-50, до меня наконец дошло, что этот находчивый человек так описал службу в армии!

МПЛ-50 — малая пехотная лопата (длина 50 см)

Поделится
Опубликовано

Полезные однострочники на JavaScript

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

Полезные однострочники на JavaScript

Здесь представлено 13 однострочников. Примеры подготовлены с использованием Node.js v11.x. Если вы будете использовать их в другой среде — это может повлиять на их выполнение.

Читать далее «Полезные однострочники на JavaScript»
Поделится
Опубликовано

Пример слайдера на чистом CSS3

Слайдер

Честно стырено с habr.

1. Верстаем основу

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

<div class="wrapper">
<input type="radio" name="point" id="slide1" checked>
<input type="radio" name="point" id="slide2">
<input type="radio" name="point" id="slide3">
<input type="radio" name="point" id="slide4">
<input type="radio" name="point" id="slide5">
<div class="slider">
<div class="slides slide1"></div>
<div class="slides slide2"></div>
<div class="slides slide3"></div>
<div class="slides slide4"></div>
<div class="slides slide5"></div>
</div>
<div class="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
<label for="slide5"></label>
</div>
</div>
Читать далее «Пример слайдера на чистом CSS3»
Поделится
Опубликовано

Слайдер на чистом CSS. Пример от школы разработки интерфейсов Yandex.

Слайдер сделан с помощью связки <input> и <label for=”#id”>. Вся магия происходит на уровне селектора #button-N:checked ~ .slider-inner .slider-slides. Когда мы кликаем по одному из инпутов-чекбоксов, он переходит в состояние checked. Мы можем этим воспользоваться и назначить нужный нам translate на контейнер со слайдами: transform: translate(-33%).

HTML часть

<section class="page">
    <div class="slider">
        <input class="slider__input" type="radio" id="btn-1" name="toggle" checked>
        <input class="slider__input" type="radio" id="btn-2" name="toggle">
        <input class="slider__input" type="radio" id="btn-3" name="toggle">
        <input class="slider__input" type="radio" id="btn-4" name="toggle">
        <div class="slider__controls">
            <label class="slider__label" for="btn-1"></label>
            <label class="slider__label" for="btn-2"></label>
            <label class="slider__label" for="btn-3"></label>
            <label class="slider__label" for="btn-4"></label>
        </div>
        <div class="slider__inner">
            <div class="slider__slides">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1863907/66fc05cc-e47d-4daf-ad9e-983def81b0b8/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1907868/77e32d2e-b4ed-435e-8e48-b7903a67f37b/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1627222/8efe5070-9036-4913-86b4-8241480525db/s1200">
                <img class="slider__img" src="https://avatars.mds.yandex.net/get-pdb/1858966/d70c660c-6947-4ed3-b0bf-13e985b58427/s1200">
            </div>
        </div>
    </div>
</section>
Читать далее «Слайдер на чистом CSS. Пример от школы разработки интерфейсов Yandex.»
Поделится
Опубликовано

Как писать код для «будущего себя»

Переводстатьи «Writing code for your future self».

De Lorean DMC-12
De Lorean DMC-12

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

Проблема в том, что вы пишете код для себя в настоящем. Вместо этого следует писать для себя в будущем. Обязательно задавайте себе вопрос: «Поймет ли «будущий я» предназначение этого блока кода?».

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

Читать далее «Как писать код для «будущего себя»»
Поделится
Опубликовано

Бургер-меню с выездом влево

HTML часть. Не забываем подключить jquery.

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="css/burger_menu.css">
<head>
<meta charset="UTF-8">
<title>Burger menu</title>
</head>
<body>
<div class="section">
<div class="menu-block">
<nav class="menu-nav">
<a class="menu-nav__link" href="#">Главная</a>
<a class="menu-nav__link" href="#">Портфолио</a>
<a class="menu-nav__link" href="#">Обо мне</a>
<a class="menu-nav__link" href="#">Контакты</a>
</nav>
<a href="#" class="menu-btn">
<span></span>
</a>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/transform.js"></script>
</body>
</html>
Читать далее «Бургер-меню с выездом влево»
Поделится
") //-->

Статистика

Метки

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять