Skip to content

Instantly share code, notes, and snippets.

View slavkapiyavka's full-sized avatar
🙃
hello! I'm using whatsapp

Vyacheslav slavkapiyavka

🙃
hello! I'm using whatsapp
View GitHub Profile
const getRandomPositiveNumber = (from, to) => {
if (from === to) {
return from;
}
if (from <= 0 || to <= 0) {
return 0;
}
if (from > to) {
[from, to] = [to, from];
.animation {
animation: 4s linear 0s infinite alternate sun-rise;
}
@media (prefers-reduced-motion) {
.animation {
animation: none;
}
}
@slavkapiyavka
slavkapiyavka / constructor-validate.js
Created June 20, 2023 21:42
check creation of an object using keyword 'new'
function Fruit() {
if(!(this instanceof Fruit)) {
throw Error('Error: Incorrect invocation!');
}
.ribbon {
--s: 70px; /* the ribbon size */
--d: 20px; /* the depth */
--c: 20px; /* the cutout part */
padding: 0 calc(var(--s) + var(--d)) var(--d);
background:
conic-gradient(at left var(--s) bottom var(--d),
#0000 25%,#0008 0 37.5%,#0004 0) 0 /50% no-repeat,
conic-gradient(at right var(--s) bottom var(--d),
@slavkapiyavka
slavkapiyavka / scrollbar-styles.css
Last active July 4, 2023 07:37
customizable style scrollbar
:root {
--lightsteelblue: hsl(214, 41%, 78%);
--steelblue: hsl(207, 44%, 49%);
--lightgray: hsl(0, 0%, 83%);
}
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: var(--lightsteelblue);
@slavkapiyavka
slavkapiyavka / overflow-ellipsis.css
Created May 12, 2023 19:14
overflow ellipsis rule
.overflow-ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
@slavkapiyavka
slavkapiyavka / search-field-cross-reset.css
Created May 12, 2023 19:13
style property hiding the cross clearing the search field
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
display: none;
}
@slavkapiyavka
slavkapiyavka / fade-in-gradual.scss
Created May 12, 2023 19:10
gradual fade in animation example
.fade-in-gradual {
animation: 255ms ease 0s fadeInGradual both;
}
@keyframes fadeInGradual {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
@slavkapiyavka
slavkapiyavka / visually-hidden.css
Created May 12, 2023 18:56
the "visually hidden" pattern to hide elements from the design, but leave their contents accessible
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);