Personalizarea barei de derulare - css3 html5, exemple și soluții

Bara de derulare este utilizată nu numai pe paginile web, ci și în forme separate, astfel încât forma și dimensiunea acesteia sunt de o importanță deosebită. Și cu un design frumos de a combina o bară standard de defilare nu va. Cea mai simplă soluție la această problemă este să stilizați parcurgerea standard utilizând css3. Limitarea acestei metode este că funcționează numai în browsere utilizând webkit







Iată un exemplu de cod HTML pentru muncă:

Să analizăm în detaliu fiecare element

:: - webkit-scrollbar-track - Setează marginea pentru a rotunji marginile în 4px







:: - webkit-scrollbar - lățimea de derulare de 6px

:: - webkit-scrollbar-thumb - Setează culoarea și raza fileului în piesă

: hover :: - webkit-scrollbar-thumb - Plasarea cursorului peste bloc schimbă culoarea piesei

Rezultatul acestui cod va fi o bară de derulare

O mulțime de text într-un mic bloc o mulțime de text într-un bloc mic o mulțime de text într-un bloc mic o mulțime de text într-un bloc mic o mulțime de text într-un bloc mic o mulțime de text într-un bloc mic o mulțime de text într-un bloc mic o mulțime de text într-un bloc mic o mulțime de text într-un bloc mic o mulțime de text într-o cutie mică o mulțime de text într-un mic bloc o mulțime de text într-un bloc mic o mulțime de text într-un bloc mic o mulțime de text într-o cutie mică







Trimiteți-le prietenilor: