Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Die Verwendung des 'Overflow Scroll Gradient' zum Scrollen von Text ist vorteilhaft, da es dem Leser eine klare Struktur des Inhalts bietet. Dies ist besonders hilfreich bei längeren Artikeln und zusätzlichen Informationen. Also das Scrolling-Element ist eine weitere Möglichkeit, um überlappenden scrollbaren Inhalt zu ermöglichen. Im Folgenden finden Sie alle Informationen, die ich zum Thema zusammengetragen habe. Ich hoffe, sie sind nützlich für Sie!
Scrolling-Element
Overflow scroll gradient
Das Scroller-Element ermöglicht es, überlappenden scrollbaren Inhalt in CSS zu erstellen. Durch das Hinzufügen des Overflow Scroll Gradient wird dem Element ein Überblendungsgradienten hinzugefügt, um anzuzeigen, dass mehr Inhalt gescrollt werden kann.
Auf GitHub finden Sie weitere Informationen zum Overflow scroll gradient, während Sie ein Beispiel zur Anwendung des Gradients im folgenden CodePen sehen können.
Um das Design responsiv zu gestalten, ist es sinnvoll, für before
+ after
mit width: 100%
zu arbeiten. Dadurch passt sich das Design auf jedem Bildschirm automatisch an und ist auch auf mobilen Geräten gut lesbar.
Für .overflow-scroll-gradient__scroller
sollte width: auto
verwendet werden, um sich an die verfügbare Breite anzupassen. Dadurch wird sichergestellt, dass die Scrollleiste korrekt dargestellt wird.
Das CSS zum Scrolling-Element kann individuell angepasst werden, z.B. durch Änderung der font-size
, height
, padding
usw.
Das CSS zum Scrolling-Element
Mit Anpassung font-size
, height
, padding
usw. individuell.
/* --- Scroller für Textauszug --- */
.overflow-scroll-gradient {
position: relative;
margin: 25px 0;
}
.overflow-scroll-gradient::before {
content: "";
position: absolute;
top: 0px;
max-width: 100%;
height: 25px;
background: linear-gradient(white, rgba(255, 255, 255, 0.001));
}
.overflow-scroll-gradient::after {
content: "";
position: absolute;
bottom: 0px;
max-width: 100%;
height: 25px;
background: linear-gradient(rgba(255, 255, 255, 0.001), white);
}
.overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
width: auto;
height: 200px;
padding: 15px 10px;
font-size: 15px;
}
/* Scrollleiste */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
Beschreibung des CSS im Scrolling-Element:
position: relative
zum Elternelement, erstellt einen kartesischen Positionierungskontext für Pseudoelemente.margin
ist der Aussenabstand für oben und unten.::before
und::after
definiert ein Pseudoelement.background-image: linear-gradient(...)
fügt einen linearen Farbverlauf hinzu, der von Transparent zu Weiß übergeht (von oben nach unten vs.).position: absolute
nimmt das Pseudoelement aus dem Fluss des Dokuments heraus und positioniert es in Bezug auf das übergeordnete Element.width
entspricht der Größe des Bildlaufelements (das ein untergeordnetes Element des übergeordneten Elements mit dem Pseudoelement ist).height
beibefore
undafter
ist die Höhe des Fading-Gradienten-Pseudoelements, das relativ klein gehalten werden sollte. Weiter bei...__scroller
istheight
die sichtbare Höhe des zu scrollenden Contents.top
undbottom
positioniert das Pseudoelement jeweils am Rand des Elternelements.
Anmerkung: Die Auszeichnung …
- Für
.overflow-scroll-gradient::before
+.overflow-scroll-gradient::after
sind mitwidth:100%;
. Denn so die höchste verfügbare Breite passt auf jedem Bildschirm. - Das
.overflow-scroll-gradient__scroller
ist mitwidth: auto;
einzustellen, da so die Response auch am Handy. Dennwidth:auto;
setzt sich auf die niedrigste verfügbare Breite.
Scroll-Leiste sichtbar
Durch den Einsatz des Überblendungsgradienten wird der scrollbare Inhalt auf der Webseite sichtbar gemacht.
Zu beachten ist, dass die rechtsbündige Scrollbar in Firefox nicht funktioniert, jedoch ist der Scroller selbst sichtbar. Allerdings wird die Scrollbar erst nach dem Scrollen des Inhalts angezeigt. Aus diesem Grund kann das Hinzufügen eines Hintergrundverlaufs mit linear-gradient
auch Vorteile bringen, da der zu scrollende Inhalt dadurch besser erkennbar ist. Siehe dazu auch das Symbolbild unten.
Browser Firefox siehe Symbolbild ↓
Während in den meisten Browsern, die Scrollbar visuell dargestellt wird, ist dies in Firefox nicht der Fall. – aber das Scrollen ist gleich funktionell.
… den meisten Browsern ist die Scrollleiste visuell ↓
… und erlaubt das Scrollen in den meisten Browsern. Eine Abbildung der Scrollleiste ist im Bild rechts zu sehen.
Schriftgröße im Scroller
Das mit der Schriftgröße .overflow-scroll-gradient__scroller
und font-size
Für die separate Formatierung der Schriftgröße im Scroller kann folgender Code verwendet werden:
.overflow-scroll-gradient__scroller { font-size: 0.9rem !important; }
Dieser Code formatiert jedoch nur den ersten Absatz im Scroller? Um sicherzustellen, dass auch der Text in Aufzählungszeichen und weitere Absätze in der richtigen Größe angezeigt werden, kann der folgende Code verwendet werden.
Bitte beachte, dass das CSS nicht mit dem grundlegenden .overflow-scroll-gradient__scroller
zusammengelegt werden kann, da es sonst zu mehreren Scrollbalken und anderen Ungereimtheiten kommen kann. Das folgende CSS muss daher separat verwendet werden:
.overflow-scroll-gradient__scroller,
.overflow-scroll-gradient__scroller p,
.overflow-scroll-gradient__scroller li,
.overflow-scroll-gradient__scroller strong,
.overflow-scroll-gradient__scroller b {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
color: #4A1414;
font-size: 1.1rem !important;
}
Die Verwendung von font-family
im Code ist optional und kann je nach Bedarf angepasst werden. Es gibt jedoch weitere Formatierungsoptionen, die themespezifisch anders sein können. Die hier vorgestellte Formatierung dient lediglich als Grundlage.
Das vollständige CSS für das Scrolling-Element ist weiter unten im folgenden Beispiel des Scrollers zu finden.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
- Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
- Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
CSS Beispiel im Gesamten:
/* Beispiel von Scroller */
.overflow-scroll-gradient {
position: relative;
margin-bottom: 35px;
}
.overflow-scroll-gradient::before {
content: '';
position:absolute;
top:0px;
width:100%;
height:25px;
background: linear-gradient(white, rgba(255, 255, 255, 0.001));
}
.overflow-scroll-gradient::after {
content: '';
position:absolute;
bottom:0px;
width:100%;
height:25px;
background: linear-gradient(rgba(255, 255, 255, 0.001), white);
}
.overflow-scroll-gradient__scroller {
overflow-y: scroll;
background: white;
max-width: 100%;
height: 400px;
padding: 15px 10px;
}
.overflow-scroll-gradient__scroller,
.overflow-scroll-gradient__scroller p,
.overflow-scroll-gradient__scroller li,
.overflow-scroll-gradient__scroller strong,
.overflow-scroll-gradient__scroller b {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
color: #4A1414;
font-size: 1.1rem !important;
}
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Das HTML zum Scrolle
Bitte beachte, dass die Visualisierung der Scrollbar erst in der Vorschau bzw. im Frontend der Webseite und nicht im Editor sichtbar ist.
<div class="overflow-scroll-gradient">
<div class="overflow-scroll-gradient__scroller">Zu scrollender Inhalt</div>
</div>
Anhang: Variation von CSS
- Da ist nun mit
.overflow-scroll-gradient2
dannheight: 125px;
des Scollersbackground
+font-size
anders und ohne der Codes fürbefore
undafter
. - Die Scrollleiste schmäler, mit separater Class
sma
. Schmäler geht dort demwidth
hervor.
… mit dabei ist hier Scrolle
/* --- Small Scroller für Textauszug --- */
.overflow-scroll-gradient2 {
position: relative;
margin: 25px 0;
}
.overflow-scroll-gradient2__scroller {
overflow-y: scroll;
background: #fdfdfd;
font-size: 14px;
width: auto;
height: 125px;
padding: 5px;
/*line-height: 1, 2;
text-align: center;*/
}
/* Scrollleiste mit Class 'sma' für small */
.sma::-webkit-scrollbar {
width: 6px;
}
.sma::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.sma::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
… und das HTML
<div class="overflow-scroll-gradient3 sma">
<div class="overflow-scroll-gradient3__scroller sma">Content to be scrolled</div>
</div>
Overflow scroll gradient in Synergie mit Dunkel-Modus Website
Durch den ⇔ Dunkel-Modus haben sich zur Konformität so Änderungen des CSS ergeben. Hier sind jetzt so Anpassungen der Scrollleiste.
- Die Änderung ist in Blau
Die Änderung von … | … zu, das von box-shadow der Farbe und ohne ‘opacity’ |
/* Scrollleiste */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } | /* Scrollleiste */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 6px #8e989e; border-radius: 10px; } ::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px #7D7D7D; } |
Info echo
Zur Postierung von Inhalt siehe auch:
Eine alternative Möglichkeit, um den Text zu organisieren – Ein- und Ausklappen von Text mithilfe von HTML-Tags.
Aktualisiert im Jahr 2023-April