CSS – Benutzerdefiniertes Design

CSS – Grundlagen

Cascading Style Sheets, kurz CSS, wird verwendet, um HTML-Elemente optisch anzupassen, ohne dabei die Funktionalität abzuändern. So kann beispielsweise das Aussehen eines Titels oder Buttons geändert werden.

Wurde dem HTML-Element eine Klasse zugeordnet, so lässt sich das Element selektieren und mittels CSS optisch verändern. Diese Klasse dient in CSS dann als sogenannter Selektor.

Eine Übersicht aller CSS-Selektoren findet sich bei W3Schools.

CSS – Eingabe im Govie Editor

Links im Properties Panel findet sich unter Spezialeffekte/Advanced Visuals der Punkt CSS mit einer kleinen Eingabemaske. Dort lässt sich einfach das jeweilige CSS-Snippet hineinkopieren.

CSS – Externer Editor

Es existiert ein eigener CSS-Editor, mit dem sich das CSS wesentlich bequemer eingeben und live am Govie testen lässt. Dazu muss das Govie allerdings vorher geteilt oder veröffentlicht werden, um einen Sharelink zu erstellen. Dieser Sharelink kann dann im CSS-Editor eingefügt werden. Zu Beginn kann eines der Templates ausgewählt werden, um zu sehen, welche Eigenschaft der jeweilige CSS-Effekt ändert.

Getting started

Zuerst einmal F12 drücken, um die Entwickler-Konsole zu öffnen. Dann mit der Select-Element-Funktion auf den Viewport klicken. Das führt zu dem äußeren Container-DIV-Element.

Die ID für den Container, in dem der Canvas liegt, lautet container. Man kann ihn also ganz einfach über #container ansprechen und z. B. mit #container {background:blue} den Hintergrund ändern.

Hotspots

Hotspots lassen sich ebenfalls mittels CSS stylen. Dabei wurden bereits unterschiedliche Klassen für Hotspots mit Szenenwechsel und Hotspots ohne Szenenwechsel (Label) vergeben.

Generell lassen sich Hotspots über den Selektor .gpl-hotspot optisch anpassen. Mittels color lässt sich die Farbe der Schrift verändern, mit background die des Hintergrunds.

.gpl-hotspot {
    color: black;
    background: orange;
}

Soll ein eigenes Styling nur für Hotspots als Label erstellt werden, so kann dafür die Klasse .gpl-hotspot.inactive verwendet werden.

.gpl-hotspot.inactive {
    color: black;
    border-radius: 4px;
    border: 1px solid #222;
    font-size: 18px;
    text-transform: uppercase;
    background: aliceblue;
    filter: drop-shadow(2px 2px 2px black);
}

Linie bei Hover hinzufügen:

.gpl-hotspot:hover {
    box-shadow: 0px 0px 0px 12px #ee27384f;
    transition: box-shadow 0.5s linear;
    transition: all .2s ease-in-out;
}
.gpl-hotspot::after {
    content: '';
    width: 2px;
    height: 0;
    position: absolute;
    left: 50%;
    top: 100%;
    background-color: rgb(0, 0, 0);
    transform: translateX(-50%);
    transition: all .2s ease-in-out;
}
.gpl-hotspot:hover::after {
    height: 50px;
}

Vorder- und Hintergrund ändern

Es lassen sich Rahmen oder animierte Effekte im Vordergrund darstellen. Dazu dient der #scene-foreground-Selektor.

#scene-foreground {
    background-image: url(IMAGEURL);
    background-size: 100% 100%;
}
#scene-background {
    background-image: url(IMAGEURL);
}

Bildbearbeitung

Via CSS-Filter lassen sich Bilder auch manipulieren, ohne dass man extra noch einmal zurück zu Photoshop wechseln muss. Einige der Operationen sind jedoch sehr rechenaufwändig, da sie jeden Frame ausgeführt werden.

filter: saturate(3);
filter: grayscale(100%);
filter: contrast(160%);
filter: brightness(0.25);
filter: blur(3px);
filter: hue-rotate(180deg);

Animierte Labels

Mittels Keyframes lassen sich in CSS Animationen erstellen. Diese Animation kann dann mit der animation property an ein beliebiges Element angehängt werden. In diesem Beispiel wird der 2D-Medien-Bereich mittels CSS von links nach rechts herausgefahren, sobald die jeweilige Folie angeklickt wird.

.DraftEditor-root {
    padding: 12px !important;
}
.rte-content {
    height: auto !important;
    position: relative !important;
    border-radius: 0px 0px 10px 0px;
    animation: moveright 1s forwards;
}
@keyframes moveright {
    from {left: -100%;}
    to {left: 0%;}
}

Weitere Beispiele

Mit ein paar kleinen Änderungen lässt sich ein komplettes Design erstellen. Text Transform wandelt den Text in Großbuchstaben um.

.DraftEditor-root {
    text-transform: uppercase;
    text-shadow: 2px 2px 4px #000000;
    color: white;
}
.govie-controls.is--loaded.is--landscape {
    background: rgba(100, 100, 100, .2);
    border: 2px solid white;
}