Oxygen: Text versenken und andere Texteffekte per CSS

Webdesign

Möchte man seine z. B. Überschriften stylisch aufwerten, dann kann man diese z. B. im Hintergrund „versenken“.

Den CSS Code kann man sich generieren lassen:

https://html-css-js.com/css/generator/text-shadow/

Dazu einfach den generierten Code in die CSS-Box des Text-Elements (Advanced > Custom CSS) in Oxygen eintragen.

color: transparent;
background: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: 0px 3px 3px rgba(255,255,255,0.5);

Schlagschatten und Lichtrichtung

Am Rande: Schon mal bemerkt, dass der Schlagschatten fast immer nach unten rechts gesetzt wird? Fotografen und Kameraleute sagen dazu: Gutes Licht kommt von oben links. Dann liegt der Schatten hinter den Motiv – aus der Leserichtung gesehen. Fällt der Schatten hingegen nach links, liegt er unseren Augen wie ein Hindernis im Weg.

 
div { text-shadow: 3px 3px 4px #777 }
      ^            ^   ^   ^   ^  
      |            |   |   |   |  
      |            |   |   |   |
      |            |   |   |   +- Schattenfarbe
      |            |   |   |
      |            |   |   +- Verlaufs-Radius des Schattens
      |            |   |
      |            |   +- Vertikaler Versatz
      |            |
      |            +- Horizontaler Versatz
      | 
      +- CSS3-Eigenschaft text-shadow 




/* background-color: hsl(0,0%,80%); */
  letter-spacing: .15em;
  color: hsl(0,0%,94%);
  text-shadow: 
    -1px 2px 1px hsl(0,0%,52%), 
    -2px 4px 1px hsl(0,0%,54%), 
    -3px 6px 1px hsl(0,0%,56%), 
    -4px 8px 1px hsl(0,0%,58%), 
    -5px 10px 1px hsl(0,0%,60%), 
    -6px 12px 1px hsl(0,0%,62%), 
    -7px 14px 1px hsl(0,0%,64%), 
    -8px 16px 1px hsl(0,0%,66%), 
    -9px 18px 1px hsl(0,0%,66%), 
    -10px 20px 1px hsl(0,0%,68%), 
    -11px 22px 1px hsl(0,0%,70%), 
    -12px 24px 1px hsl(0,0%,72%), 
    -13px 26px 1px hsl(0,0%,74%), 
    -14px 28px 1px hsl(0,0%,76%), 
    -15px 30px 1px hsl(0,0%,78%), 
    -16px 32px 1px hsl(0,0%,80%), 
    -17px 34px 1px hsl(0,0%,78%)

Recommended for you