12.01.2025
11 мини-кодов для ваших проектов
Подборка СSS-кодов и скриптов, которые часто нужны, но постоянно тратишь время, чтобы их найти
1. Прыгающие цифры
Скачущие цифры — это минускульные, или строчные цифры. В современных шрифтах, особенно в антиквах, часто можно встретить оба набора цифр. Если по умолчанию в шрифте стоят минускульные цифры, то маюскульные можно включить в Фигме через Numbers - Style. А для сайта есть код:
Посмотреть код 2. Линии в 1px
При использовании автоскейла некоторые линии становятся заметно толще, и это прям бесит. Но все решается очень быстро.
Присваиваем линиям класс line1px и вставляем код:
Посмотреть код Присваиваем линиям класс line1px и вставляем код:
3. Плавный скролл
С плавным скроллом нужно быть очень осторожным. Обязательно тестируйте сайт на нескольких устройствах после публикации. Иногда заходишь в #madeontilda и видишь сайты, которые посмотреть невозможно, при легком касании колесика тебя отбрасывает на середину.
Сейчас использую этот, и очень нравится:
Посмотреть код Сейчас использую этот, и очень нравится:
4. Текст по ширине
Код поможет выровнять текст по краям контейнера в Zero Block.
Присваиваем тексту класс text и вставляем код:
Посмотреть код Присваиваем тексту класс text и вставляем код:
5. Красная строка
Иногда для таких целей подойдет просто добавить несколько нижних подчеркиваний ___ и перекрасить их в цвет фона. Но что делать, если фон не однородный?
Присваиваем тексту класс indent-text и вставляем код:
Посмотреть код Присваиваем тексту класс indent-text и вставляем код:
6. Несколько классов
Метод addClass предназначен для добавления еще одного класса элементу. Т.е. если у элемента есть класс, например link-filling (в первых скобках в коде), то ему присвоится еще один, например show-content (во вторых скобках).
Посмотреть код 7. Заменить маркер списка
Добавить любую svg вместо стандартной точки в маркированном списке достаточно легко.
У Антона Командина есть пошаговое видео:
Youtube / VK
Посмотреть код У Антона Командина есть пошаговое видео:
Youtube / VK
8. Заменить цвет верхней полоски в pop-up
Меняем цвет «челки» для всплывающей формы и у корзины на мобильных (цвет крестика выставляется в настройках блока).
Посмотреть код 9. Перенести крестик в pop-up
Модификация поможет перенести иконку закрытия в стандартных pop-up блоках: BF501N, BF502N, BF503, BF920, GL08N, ST500, VD09. Код взяла у Twik.up
Посмотреть код 10. Свободное перемещение
Модификация добавляет эффект перетаскивания элементов в Зеро блоке.
Присваиваем элементам класс grab и вставляем код:
Посмотреть код Присваиваем элементам класс grab и вставляем код:
11. Своя кнопка Назад
Возвращаем пользователя на предыдущую страницу.
Создаем кнопку и указываем ей ссылку #back и код:
(либо просто javascript:history.back(); без кода)
Посмотреть код Создаем кнопку и указываем ей ссылку #back и код:
(либо просто javascript:history.back(); без кода)
Выравнивание прыгающих цифр
<style>
body {
font-variant-numeric: lining-nums;
font-feature-settings: 'lnum';
-moz-font-feature-settings: 'lnum=1';
-ms-font-feature-settings: 'lnum';
-webkit-font-feature-settings: 'lnum';
-o-font-feature-settings: 'lnum';
}
</style>
body {
font-variant-numeric: lining-nums;
font-feature-settings: 'lnum';
-moz-font-feature-settings: 'lnum=1';
-ms-font-feature-settings: 'lnum';
-webkit-font-feature-settings: 'lnum';
-o-font-feature-settings: 'lnum';
}
</style>
Выравнивание линий в 1px
<style>
.line1px {
height: 1px !important;
}
</style>
.line1px {
height: 1px !important;
}
</style>
Плавный скролл
<!--Плавный скролл-->
<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
<script>
const lenis = new Lenis({
lerp: 0.1,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: 'vertical',
gestureOrientation: 'vertical',
smoothWheel: true,
wheelMultiplier: 0.95,
syncTouch: false,
touchMultiplier: 1.1,
infinite: false,
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>
<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script>
<script>
const lenis = new Lenis({
lerp: 0.1,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: 'vertical',
gestureOrientation: 'vertical',
smoothWheel: true,
wheelMultiplier: 0.95,
syncTouch: false,
touchMultiplier: 1.1,
infinite: false,
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>
Текст по всей ширине контейнера
<style>
.text {
text-align: justify !important;
text-align-last: justify !important;
}
</style>
.text {
text-align: justify !important;
text-align-last: justify !important;
}
</style>
Втяжка (красная строка) в Zero Block Тильды
<style>
.indent-text {
text-indent: 300px;
}
/* Параметры втяжки для мобилки */
@media screen and (max-width:640px) {
.indent-text {
text-indent: 70px !important;
}
}
</style>
Отрицательная красная строка
<style>
.indent-text {
text-indent: -300px;
}
</style>
.indent-text {
text-indent: 300px;
}
/* Параметры втяжки для мобилки */
@media screen and (max-width:640px) {
.indent-text {
text-indent: 70px !important;
}
}
</style>
Отрицательная красная строка
<style>
.indent-text {
text-indent: -300px;
}
</style>
Несколько классов для элемента
<script>
//Несколько классов
$('.link-filling').addClass('show-content');
</script>
//Несколько классов
$('.link-filling').addClass('show-content');
</script>
Заменить стандартный маркер списка (буллит)
<style>
ul {
list-style-image: url("image-url")
}
</style>
ul {
list-style-image: url("image-url")
}
</style>
Заменить цвет «челки» в форме и корзине
<style>
@media screen and (max-width: 560px) {
.t706__cartwin-close, .t-popup__close {
background-color: #DD9B68 !important; /*Popup фон полоски*/
}
</style>
@media screen and (max-width: 560px) {
.t706__cartwin-close, .t-popup__close {
background-color: #DD9B68 !important; /*Popup фон полоски*/
}
</style>
Перенос крестика в pop-up блоках
<script>
$(document).ready(function(){$('.t-popup').each(function(){$(this).find('.t-popup__container').prepend($(this).find('.t-popup__close'))})});
</script>
<style>
.t-popup__close{
background-color:!important
}
</style>
$(document).ready(function(){$('.t-popup').each(function(){$(this).find('.t-popup__container').prepend($(this).find('.t-popup__close'))})});
</script>
<style>
.t-popup__close{
background-color:!important
}
</style>
Свободное перемещение элементов в zero-блоке
<!--https://dsgnmax.ru/drag-elements--> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script> <script>
$(document).ready(function() {
let zIndex = 10;
$('.drag').draggable({
cursor: "grabbing", //Тип курсора при перемещении элемента
start: function() { $(this).css("z-index", zIndex++); }
});
});
</script> <style>
.ui-draggable-dragging {
/* Класс, добавляемый при перемещении элемента */
transform: scale(0.9);
}
</style>
$(document).ready(function() {
let zIndex = 10;
$('.drag').draggable({
cursor: "grabbing", //Тип курсора при перемещении элемента
start: function() { $(this).css("z-index", zIndex++); }
});
});
</script> <style>
.ui-draggable-dragging {
/* Класс, добавляемый при перемещении элемента */
transform: scale(0.9);
}
</style>
Своя кнопка назад
<script>
$(document).ready(function() {
$('[href="#back"]').click(function(e) {
history.back();
event.preventDefault();
});
})
</script>
$(document).ready(function() {
$('[href="#back"]').click(function(e) {
history.back();
event.preventDefault();
});
})
</script>
Нажимая на кнопку, вы соглашаетесь с политикой конфиденциальности
Оставьте пожалуйста контактные данные, и я свяжусь с вами в ближайшее время. Обсудим детали, стоимость и план работы
Связь со мной
