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>  

Manche Styles im CSS, für die man vor wenigen Monaten noch einen Precompiler wie LESS oder SASS brauchte, kann man heute per CSS erledigen. Ein Beispiel dafür ist die standardisierte Darstellung von Farben über das root-Attribut.

Hier als Beispiel ein Ausschnitt aus den Farben der Webseite unserer Agentur. Die Farben werden zu Beginn des Style Sheets gesetzt:

:root {
  --blau-stark: #275ba4;
  --blau-leicht: #729ebd;
  --blau-hell: #b7d4e8;
  --blau-hover: #a4c2ed;
}

Im weiteren Fortgang können wir die Farben dann über den entsprechenden Code ansprechen. Als Beispiel diene hier ein Heading:

h1 {
  color: var(--blau-stark);
}  

Mit CSS3 können Sie heute Elemente Ihrer Webseite animieren, ohne große Frameworks mit JavaScript nutzen zu müssen. Über @keyframes können Sie Standards für mehrere Elemente setzen und diese für einzelne Styles ansprechen.

Im Kopf der Webseite unserer Agentur finden sich Buttons für soziale und berufliche Netzwerke, die als Font Awesome Schrifttypen eingebunden sind.

a.link:hover {
  animation: turner 2s 1 linear;
}

Mit dem Hover Effekt werden diese in Bewegung gesetzt. Hierbei sprechen wir die Funktion turner an, die oben im Attribut definiert ist:

@keyframes turner{
  from{  transform: rotateY(0deg)   }
  to  {  transform: rotateY(360deg) }
}

@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.

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;
}

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;
}