Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.


css_beispiele [2023.12.12 16:02] (aktuell) – angelegt - Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 +====== CSS Beispiele ======
  
 +
 +Hier ein paar Beispiel für Lösungen mit Cascaded Style Sheets.
 +
 +===== Blöcke der Webseite mittig ausrichten =====
 +
 +[[fluid_templates|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;
 +  }
 +
 +
 +===== CSS-Beispiele für die Navigation =====
 +
 +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.
 +==== Breadcrumb-Navigation: PopUp unter dem Link ====
 +
 +
 +Dieses CSS sorgt im Zusammenspiel mit dem entsprechenden TypoScript der [[typoscript_navigation#breadcrumb_navigation_mit_hover_effekt|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
 +  }
 +  
 +==== CSS für Footer Navigation mit zwei Ebenen ====
 +
 +
 +Über TypoScript kann man eine [[typoscript_navigation#footer_navigation_zwei_ebenen|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
 +  }
 +
 +==== Einbindung des TypoScript in den Footer ====
 +  
 +  
 +  <div class="row">
 +    <div class="col-md-12 col-sm-12 div_footer">
 +      <f:cObject typoscriptObjectPath="lib.navigation_footer" />
 +    </div>
 +  </div>  
 +  
 +  
 +===== Farben über root setzen =====
 +
 +
 +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);
 +  }  
 +  
 +  
 +===== Animiertes CSS =====
 +
 +
 +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 Query =====
 +
 +
 +  @media (max-width: 500px) {
 +    .img_slider {
 +      width: 100px;
 +      height: 100px
 +    }
 +  }
 +   
 +  @media (min-width: 501px) {
 +    .img_slider {
 +      width: 200px;
 +      height: 200px
 +    }
 +  }
 +
 +===== Hintergrundbild mit CSS definieren =====
 +
 +
 +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);
 +  }  
 +===== Farbtöne ineinander übergehen lassen =====
 +
 +
 +  .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
 +  }
 +===== Verzögerte Änderung eines Styles =====
 +
 +
 +  .div_beispiel {
 +    transition: all ease 0.3s;
 +    -webkit-transition: all ease 0.5s
 +  }
 +  
 +===== Pfeile nach unten =====
 +
 +Dieses Modul erlaubt in den Accordions der Georgienseite nach unten weisende Pfeile.
 +\\ [[jquery_konfiguration#scrollicon_konfiguration|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; 
 +  }
 +
 +===== Text unter Link anzeigen =====
 + 
 +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)
 +  }  
 +  
 +  
 +===== Pfeil zum Scrollen nach oben =====
 +
 +
 +  .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;
 +  }