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 '' | ||
+ | |||
+ | #header { | ||
+ | max-width: 800px; | ||
+ | margin: 15px auto; | ||
+ | } | ||
+ | | ||
+ | #main { | ||
+ | max-width: 800px; | ||
+ | margin: 15px auto; | ||
+ | } | ||
+ | | ||
+ | #footer { | ||
+ | max-width: 1000px; | ||
+ | margin: 15px auto; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | |||
+ | ===== 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: | ||
+ | |||
+ | |||
+ | Dieses CSS sorgt im Zusammenspiel mit dem entsprechenden TypoScript der [[typoscript_navigation# | ||
+ | |||
+ | /* Normalzustand des Links */ | ||
+ | a.bread_link_small span { | ||
+ | font-size: 12px; | ||
+ | font-weight: | ||
+ | position: absolute; | ||
+ | visibility: hidden; | ||
+ | margin-top: 15px; | ||
+ | padding: 10px 8px; | ||
+ | text-decoration: | ||
+ | } | ||
+ | | ||
+ | /* Link als PopUp */ | ||
+ | a.bread_link_small: | ||
+ | visibility: visible; | ||
+ | border: none; | ||
+ | min-width: 120px; | ||
+ | max-width: 500px; | ||
+ | border-left: | ||
+ | border-bottom: | ||
+ | z-index: 1000; | ||
+ | background: #fff; | ||
+ | opacity: .8 | ||
+ | } | ||
+ | | ||
+ | ==== CSS für Footer Navigation mit zwei Ebenen ==== | ||
+ | |||
+ | |||
+ | Über TypoScript kann man eine [[typoscript_navigation# | ||
+ | |||
+ | /* Media Queries für ein Umbrechen verschiedenen Bildschirmen */ | ||
+ | @media only screen and (max-width: | ||
+ | .footer_frame { | ||
+ | width: 50%; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (min-width: | ||
+ | .footer_frame { | ||
+ | width: 25%; | ||
+ | } | ||
+ | } | ||
+ | @media only screen and (min-width: | ||
+ | .footer_frame { | ||
+ | width: 12%; | ||
+ | } | ||
+ | } | ||
+ | | ||
+ | /* DIVs werden über Flex Design ausgerichtet */ | ||
+ | .footer-navigation { | ||
+ | display: flex; | ||
+ | flex-direction: | ||
+ | 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=" | ||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | | ||
+ | | ||
+ | ===== 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: | ||
+ | --blau-leicht: | ||
+ | --blau-hell: | ||
+ | --blau-hover: | ||
+ | } | ||
+ | | ||
+ | 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: | ||
+ | animation: turner 2s 1 linear; | ||
+ | } | ||
+ | |||
+ | Mit dem '' | ||
+ | |||
+ | @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:// | ||
+ | background-repeat: | ||
+ | background-attachment: | ||
+ | background-size: | ||
+ | } | ||
+ | | ||
+ | |||
+ | ==== 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, | ||
+ | |||
+ | #main { | ||
+ | background: url(http:// | ||
+ | background-repeat: | ||
+ | background-attachment: | ||
+ | background-size: | ||
+ | background-color: | ||
+ | } | ||
+ | ===== Farbtöne ineinander übergehen lassen ===== | ||
+ | |||
+ | |||
+ | .farbe_wechseln { | ||
+ | padding: 5px 5px 3px; | ||
+ | margin-left: | ||
+ | background: -webkit-linear-gradient(# | ||
+ | background: -o-linear-gradient(# | ||
+ | background: -moz-linear-gradient(# | ||
+ | background: linear-gradient(# | ||
+ | color: #fff; | ||
+ | font-size: 14px | ||
+ | } | ||
+ | ===== Verzögerte Änderung eines Styles ===== | ||
+ | |||
+ | |||
+ | .div_beispiel { | ||
+ | transition: all ease 0.3s; | ||
+ | -webkit-transition: | ||
+ | } | ||
+ | | ||
+ | ===== Pfeile nach unten ===== | ||
+ | |||
+ | Dieses Modul erlaubt in den Accordions der Georgienseite nach unten weisende Pfeile. | ||
+ | \\ [[jquery_konfiguration# | ||
+ | |||
+ | .arrowbox { | ||
+ | position: relative; | ||
+ | } | ||
+ | .arrowbox: | ||
+ | right: 0px; | ||
+ | top: 50%; | ||
+ | border: solid transparent; | ||
+ | content: " "; | ||
+ | height: 0; | ||
+ | width: 0; | ||
+ | position: absolute; | ||
+ | pointer-events: | ||
+ | } | ||
+ | .arrowbox: | ||
+ | border-color: | ||
+ | } | ||
+ | .arrowbox: | ||
+ | border-color: | ||
+ | border-left-color: | ||
+ | opacity: 0.5; border-width: | ||
+ | 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: | ||
+ | position: absolute; | ||
+ | visibility: hidden; | ||
+ | margin-left: | ||
+ | margin-top: 16px; | ||
+ | padding: 5px 10px; | ||
+ | max-width: 400px; | ||
+ | text-align: left; | ||
+ | text-decoration: | ||
+ | } | ||
+ | | ||
+ | a.text_link_small: | ||
+ | visibility: visible; | ||
+ | color: #a65600; | ||
+ | border: none; | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | border-top: 1px #a65600 solid; | ||
+ | border-right: | ||
+ | background-color: | ||
+ | } | ||
+ | | ||
+ | | ||
+ | ===== Pfeil zum Scrollen nach oben ===== | ||
+ | |||
+ | |||
+ | .scrollicon { | ||
+ | text-align: center; | ||
+ | text-decoration: | ||
+ | width:50px; | ||
+ | height: | ||
+ | background:# | ||
+ | opacity: | ||
+ | position: | ||
+ | bottom: | ||
+ | right:20px; | ||
+ | display: | ||
+ | border: 1px solid #fff; | ||
+ | } | ||
+ | .scrollicon: | ||
+ | text-decoration: | ||
+ | background:# | ||
+ | color:# | ||
+ | } | ||
+ | .scrollicon div { | ||
+ | font-weight: | ||
+ | font-size: | ||
+ | padding-top: | ||
+ | } |