CSS Beispiele

Hier ein paar Beispiel für Lösungen mit Cascaded Style Sheets.

In unserem Beispiel für die Fluid Templates einer TYPO3 Webseite gibt es drei Bereiche (Header, Main, Footer) zur Darstellung der Inhalte der Webseite. Diese Inhalte kann man mit Angaben zur maximalen Breite und mittigen Ausrichtung versehen:

#header {
  max-width: 800px;
  margin: 15px auto;
}

#main {
  max-width: 800px;
  margin: 15px auto;	
}

#footer {
  max-width: 1000px;
  margin: 15px auto;	
  background-color: #DDEEDF;
}

Auf der Georgienseite und unserer Agenturwebseite haben wir mehrere Lösungen in Zusammenspiel zwischen TypoScript, Bootstrap und CSS umgesetzt, die zu wertvoll sind, um sie alleine zu nutzen. Daher hier ein paar Code Snippets für das CSS unserer Webseiten.

Dieses CSS sorgt im Zusammenspiel mit dem entsprechenden TypoScript der Breadcrumb-Navigation dafür, dass unter dem Link ein Text per Hover-Effekt als PopUp auftaucht.

/* Normalzustand des Links */
a.bread_link_small span {
  font-size: 12px;
  font-weight: 400;
  position: absolute;
  visibility: hidden;
  margin-top: 15px;
  padding: 10px 8px;
  text-decoration: none
}

/* Link als PopUp */
a.bread_link_small:hover span {
  visibility: visible;
  border: none;
  min-width: 120px;
  max-width: 500px;
  border-left: 2px #ffc173 solid;
  border-bottom: 1px #ffc173 solid;
  z-index: 1000;
  background: #fff;
  opacity: .8
}

Über TypoScript kann man eine Navigation erstellen, die alle Inhalte der ersten beiden Ebenen der Webseite darstellt. Damit diese Inhalte auf responsiv aufgebaut werden, ist dieses CSS entstanden.

/* Media Queries für ein Umbrechen verschiedenen Bildschirmen */
@media only screen and (max-width:900px) {
  .footer_frame {
      width: 50%;
  }
}
@media only screen and (min-width:901px) {
  .footer_frame {
      width: 25%;
  }
}
@media only screen and (min-width:1101px) {
  .footer_frame {
      width: 12%;
  }
}

/* DIVs werden über Flex Design ausgerichtet */  
.footer-navigation {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* Einzelne Elemente der Footer Navigation */
.footer_frame {
  float: left
}
.div_navigation_footer {
  margin: 0
}
.footer_ebene_1 {
  padding: 0 1px
}
.footer_ebene_2 {
  padding: 0
}
<div class="row">
  <div class="col-md-12 col-sm-12 div_footer">
    <f:cObject typoscriptObjectPath="lib.navigation_footer" />
  </div>
</div>  
@media (max-width: 500px) {
  .img_slider {
    width: 100px;
    height: 100px
  }
}
 
@media (min-width: 501px) {
  .img_slider {
    width: 200px;
    height: 200px
  }
}

In Zeiten schneller Internetverbindungen ist es in Mode gekommen, den Hintergrund seiner Webseite mit großen Bildern zu gestalten. Dies geht aber auch für einzelne Elemente. Dazu hier ein paar Code Schnipsel aus unserer Agentur.

Hintergrundbild für gesamte Webseite

Dieser CSS Code setzt ein Hintergrundbild für die gesamte Webseite. Für den background sollte der absolute Link des Bildes eingegeben werden.

body {
  background: url(http://www.meineseite.de/fileadmin/img/hintergrund.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;	
  background-size: cover;
}

Hintergrundbild für einzelne Elemente

Dieser CSS Code setzt ein Hintergrundbild für einen bestimmten Inhalt der Webseite. Als Beispiel dient hier der Inhalt #main. Damit das Bild leicht durchscheint, ist eine Farbe für den Hintergrund mit opacity mitgegeben. Für den background sollte der absolute Link des Bildes eingegeben werden.

#main {
  background: url(http://www.meineseite.de/fileadmin/img/hintergrund.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;	
  background-size: cover;
  background-color: rgba(250, 230, 225, 0.8);
}  
.farbe_wechseln {
  padding: 5px 5px 3px;
  margin-left: -1px;
  background: -webkit-linear-gradient(#a65600, #eeac5d);
  background: -o-linear-gradient(#a65600, #eeac5d);
  background: -moz-linear-gradient(#a65600, #eeac5d);
  background: linear-gradient(#a65600, #eeac5d);
  color: #fff;
  font-size: 14px
}
.div_beispiel {
  transition: all ease 0.3s;
  -webkit-transition: all ease 0.5s
}

Dieses Modul erlaubt in den Accordions der Georgienseite nach unten weisende Pfeile.
Hier finden Sie JavaScript Konfiguration dazu.

.arrowbox { 
  position: relative; 
}
.arrowbox:after, .arrowbox:before { 
  right: 0px; 
  top: 50%; 
  border: solid transparent; 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  pointer-events: none; 
}
.arrowbox:after { 
  border-color: rgba(166, 86, 0, 0); 
}
.arrowbox:before { 
  border-color: rgba(255, 193, 55, 0); 
  border-left-color: #a65600; 
  opacity: 0.5; border-width: 6px; 
  margin-top: -6px; 
}

Bei der Sitemap wird ein Text rechts des Links angezeigt, wenn man mit der Maus über den Link geht.

a.text_link_small span {
  font-size: 13px;
  font-weight: 400;
  position: absolute;
  visibility: hidden;
  margin-left: 80px;
  margin-top: 16px;
  padding: 5px 10px;
  max-width: 400px;
  text-align: left;
  text-decoration: none
}

a.text_link_small:hover span {
  visibility: visible;
  color: #a65600;
  border: none;
  margin-left: 60px;
  margin-right: 15px;
  border-top: 1px #a65600 solid;
  border-right: 1px #a65600 solid;
  background-color: rgba(255, 255, 255, 0.8)
}  
.scrollicon {
  text-align: center;
  text-decoration:none;
  width:50px;
  height:50px;
  background:#eeac5d;
  opacity:0.7;
  position:fixed;
  bottom:50px;
  right:20px;
  display:none;
  border: 1px solid #fff;
}
.scrollicon:hover {
  text-decoration:none;
  background:#a65600;
  color:#eeac5d;
}
.scrollicon div {
  font-weight:normal;
  font-size:28px;
  padding-top:1px;
}  
Cookies helfen bei der Bereitstellung von Inhalten. Durch die Nutzung dieser Seiten erklären Sie sich damit einverstanden, dass Cookies auf Ihrem Rechner gespeichert werden. Weitere Information
  • css_beispiele.txt
  • Zuletzt geändert: 25/09/2019 00:30
  • von Thomas Berscheid