Ich bin immer auf der Suche nach neuen verrückten Design Ideen so auch bei den Galerien in Webseiten. Wir alle kennen diese Galerien – diese Slider wo das Bild ganz gross ist, links und rechts Pfeile sind (oder unten als Punkte) und wo die Bilder dann automatisch Wechseln.
Heute möchte ich euch zeigen wie ihr diese Navigation als Texte hinterlegen könnt. Ich finde es eine sehr schöne Idee die dafür sorgt, dass eine Galerie anders aussieht.
Video
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | /*** Galerie mit Text Menu ***/
.et_pb_slider .et_pb_slides .et_pb_container {
min-height: 100vh; /* fullscreen - height of slides */
}
.et_pb_slider .et_pb_slider_container_inner {
display: block; /* moves description to the top */
}
.et_pb_slider .et_pb_slide_description {
padding: 10% 6%; /* default is 16% 8% */
-webkit-animation-name: none; /* entfernt animation */
-ms-animation-name: none;
animation-name: none;
}
.et_pb_slider .et-pb-controllers {
display: flex;
flex-direction: column;
justify-content: flex-end;
left: unset; /* links rechts anpassen */
right: 0; /* links rechts anpassen */
width: auto;
height: 100%;
}
.et_pb_slider .et-pb-controllers .et-pb-active-control {
background-color: #fdb932; /* hintergrundfarbe des aktiven menu punkt */
}
.et_pb_slider .et-pb-controllers a {
border-radius: 50px;
width: 110px; /* muss an deine texte und fonts evtl angepasst werden */
height: 30px; /* muss an deine texte und fonts evtl angepasst werden */
margin-right: 3rem;
margin-bottom: 15px;
color: transparent;
background-color: #A81010; /* huntergrundfarbe des normalen menu punkt*/
opacity: 1;
}
.et_pb_slider .et-pb-controllers a:before { /* text als menu punkte */
display: block;
color: #fff;
font-size: 15px;
font-weight: 600;
line-height: 30px;
text-indent: 0;
}
.et_pb_slider .et-pb-controllers a:nth-child(1):before {
content: 'Hund';
}
.et_pb_slider .et-pb-controllers a:nth-child(2):before {
content: 'Giraffe';
}
.et_pb_slider .et-pb-controllers a:nth-child(3):before {
content: 'Ente';
}
.et_pb_slider .et-pb-controllers a:nth-child(4):before {
content: 'Zebra';
}
.et-pb-arrow-prev, .et-pb-arrow-next {
display:none!important;
} |
0 Kommentare