Jeśli nie odróżniasz metra od centymetra, albo masz problem z procentami, to dzisiejszy wpis jest dla Ciebie. Nawet jeśli masz miarkę w oku, to również. I choćbyś był krawcem i zmierzył tysiąc mankietów. Wtedy też.
Świadectwo z czerwonym paskiem. A i tak będzie guma!
Jakiś czasu temu stworzyliśmy prosty efekt, który umożliwiał wizualizację postępu przewinięcia strony. Właśnie w postaci czerwonego paska, który wydłużał się kiedy przewijaliśmy stronę w dół. Najdłuższy był na samym końcu strony. A najkrótszy... wiadomo kiedy. No ale pomimo jego rozszerzania się i kurczenia nie widać było w jakim dokładnie miejscu strony jesteśmy. Nie wiedzieliśmy czy osiągnęliśmy 25% czy 70% nudnego artykułu. Do dziś. Nadchodzi rewolucja w paskach!
Pomimo podziwiania czerwonego paska dołożymy do niego kawałek porządnej, rozciągliwej gumy. Ale nie będzie lania. Nic nie zmieni koloru na fioletowy. Pojawią się za to liczby. Będzie to miks dwóch rozwiązań. Tego wspomnianego bazowego oraz metody równomiernego rozmieszczenia tekstów opracowanej przez chińskiego myśliciela, doktora Daj Chał Wy. Całość okraszona moim pomysłem na ostylowanie elementu, którego byś nigdy nie ostylował. Do paska wykorzystywaliśmy stylowanie elementu HTML, a dziś miejscem dla liczb będzie element HEAD. Tak, tak. Nic nie stoi na przeszkodzie, aby ten również wyświetlał się na stronie. Ponieważ jednak nie możemy wstawiać tekstu (naszych liczb) jako zawartości elementu HEAD, użyjemy pseudoelementu ::before. ::after natomiast przyda się do równomiernego rozstawienia tekstów.
Nie pokazuję kodu HTML, ale wiadomo, że zawartość BODY musi być na tyle duża, aby użycie paska miało sens. Musi też istnieć element HEAD - nasza miarka. To co bardziej nas interesuje to CSS:
html {
background-image:
linear-gradient(
to right top,
rgb(255, 0, 0) 0%,
rgb(255, 0, 0) 50%,
rgb(255, 255, 255) 50%,
rgb(255, 255, 255) 100%
);
/* gradient na pasek o wysokości
jak poprzednio
*/
background-size: 100% calc(100% - 100vh + 2px);
/* ale tym razem 14px od góry
*/
background-position: 0 14px;
}
/* warstwa przykrywająca gradient
*/
html:before {
position: fixed;
content: "";
top: 16px;
background: #fff;
height: 100%;
width: 100%;
}
head {
width: 100%;
/* 14px na wysokość miarki,
stąd pozycja czerwonego paska
14px od góry
*/
height: 14px;
/* wyświetlamy <head>
*/
display: block;
/* i ustawiamy pozycję
na sztywno
*/
position: fixed;
left: 0;
top: 0;
/* tekst w środku justujemy
(szczegóły we wpisie: Font shui)
*/
text-align: justify;
z-index: 2;
font-family: "Varela Round", sans-serif;
font-size: 12px;
line-height: 14px;
background: #222;
color: #fff;
}
/* w tym pseudoelemencie
wstawiamy liczby, które będą
umieszczone na miarce
*/
head:before {
content: "0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%";
}
/* ten pseudoelement
zapewni rozciągnięcie linijki
wyżej, czyli ::before
na całą szerokość <head>
(szczegóły we wpisie: Font shui)
*/
head:after {
content: "";
width: 100%;
display: inline-block;
}
/* odsuwamy <body>
o wysokość miarki i paska
postępu
*/
body {
margin: 16px 0 0 0;
position: relative;
}
Skrypt w działaniu: Wskaźnik przewinięcia strony z miarką procentową.
W tym momencie mogę bez czerwonego paska poinformować Cię, że dotrałeś do 100% tego wpisu. Zapraszam Cię na kolejny wpis. Do przeczytania!
Przydatne linki:
Wskaźnik przewinięcia strony z miarką procentową.
Element, którego byś nigdy nie ostylował, czyli wskaźnik przewinięcia strony inaczej.
Font shui, czyli o równomiernym rozłożeniu tekstów tam gdzie flex nie da rady.