Примеры CSS эффектов

background: linear-gradient(45deg, 
    #8B4513, #D2691E, #CD853F);

background: radial-gradient(circle, 
    #FFE4C4, #D2691E, #8B4513);

background: conic-gradient(from 0deg, 
    #8B4513, #D2691E, #CD853F);

background: repeating-linear-gradient(
    45deg, #8B4513, #8B4513 10px, 
    #D2691E 10px, #D2691E 20px);

box-shadow: 0 5px 15px 
    rgba(139, 69, 19, 0.3);

box-shadow: 
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);

box-shadow: inset 0 2px 5px 
    rgba(139, 69, 19, 0.3);

text-shadow: 2px 2px 4px 
    rgba(139, 69, 19, 0.5);

transform: rotate(5deg);

transform: scale(1.1);

transform: skewX(-10deg);

transform: perspective(100px) 
    rotateX(10deg);

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
animation: pulse 2s infinite;

@keyframes slide {
    0% { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
}
animation: slide 2s alternate infinite;

@keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
animation: rotate360 3s linear infinite;

@keyframes rainbow {
    0% { background-color: red; }
    50% { background-color: blue; }
    100% { background-color: red; }
}
animation: rainbow 5s infinite;

filter: blur(2px);

filter: brightness(1.3);

filter: grayscale(100%);

filter: sepia(100%);

clip-path: circle(50%);

clip-path: polygon(
    50% 0%, 0% 100%, 100% 100%);

clip-path: polygon(30% 0%, 70% 0%, 
    100% 30%, 100% 70%, 70% 100%, 
    30% 100%, 0% 70%, 0% 30%);

clip-path: polygon(50% 0%, 61% 35%, 
    98% 35%, 68% 57%, 79% 91%, 
    50% 70%, 21% 91%, 32% 57%, 
    2% 35%, 39% 35%);

::before { content: "→ "; }
::after { content: " ✓"; }

::after {
    content: "Подсказка!";
    position: absolute;
    /* стили tooltip */
}

button:hover {
    background: #D2691E;
    transform: scale(1.1);
}

li:nth-child(odd) { 
    background: #F5DEB3; 
}
li:nth-child(even) { 
    background: #FFE4C4; 
}

display: flex;
justify-content: space-between;

display: flex;
align-items: center;

display: flex;
flex-direction: column;

.item-2 {
    flex-grow: 2;
}

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;

.item {
    grid-column: span 2;
}

grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";

grid-template-columns: 
    repeat(auto-fit, minmax(50px, 1fr));

mix-blend-mode: screen;

background-blend-mode: multiply;