CSS und SVG

ClipPath

SVG-Datei

Clipping in CSS and SVG – The clip-path Property and Element »Sara Soueidan«

Schritt 1: .svg-Datei erstellen mit <defs> und <clipPath>

<svg width="0" height="0">
  <defs>
    <clipPath id="svgPath">
      <path fill="none" stroke="#000000" d="....."/>
    </clipPath>
  </defs>
</svg>

Diese Datei wird als .html5-Datei in den Templates-Ordner gelegt.

Schritt 2: Die .svg-Datei wird mittels Insert-Tag zwischen wrapper und header in die fe_page.html5 eingebunden:

  <div id="wrapper">
    {{file::clip.html5}}
    <?php $this->block('header'); ?>

Schritt 3: Die Schnittmaske wird per CSS dem jeweiligen Objekt zugeordnet. Wenn ein Schatten gewünscht ist, kann dieser als CSS-Drop-Shadow dem Eltern-Element zugewiesen werden.

  .ce_image {
    filter: drop-shadow(0 0.5rem 0.55rem rgba(0, 0, 0, 0.2));
    img {
      clip-path: url(#svgPath);
    }
  }

CSS Keyframe Animations

animierte Übergänge von einem Style zum nächsten
2 Komponenten:

Style, der die Animation beschreibt
Set von Keyframes, das Start, Ende und Zwischenposition der Animation festlegt

Wie geht das?

Das zu animierende Element bekommt die animation-Eigenschaft bzw. die Sub-Eigenschaft zugewiesen. So werden Timing und Dauer der Animation bestimmt – die eigentliche Darstellung der Animation wird nicht damit festgelegt, sondern mit den Keyframes (@keyframes).

animation:
animation-name: => @keyframe-Regel-Name
animation-duration
animation-timing-function
animation-delay
animation-direction
animation-iteration-count
animation-fill-mode
animation-play-state

@keyframes:
2 oder mehr keyframes erstellen
Jeder keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz: 0% - 100%

@-webkit-keyframes    nameYourAnimation {...}
@-moz-keyframes    nameYourAnimation {...}
@-o-keyframes    nameYourAnimation {...}
@keyframes {
    0% {opacity: 0;}    = from {opacity: 0;}
    100% {opacity: 1;}  = to {opacity: 1;}
}

#item {
 -webkit-animation: nameYourAnimation 5s infinite; // Safari 4+
 -moz-animation: nameYourAnimation 5s infinite; // Fx 5+
 -o-animation: nameYourAnimation 5s infinite; // Opera 12+
 animation: nameYourAnimation 5s infinite; // IE10+, Fx 29+
 }

mulitple steps:

@keyframes nameYourAnimation {
  0% {font-size: 10px;}
  30% {font-size: 15px;}
  100% {font-size: 12px;}
}
#item {
 animation: nameYourAnimation 2s infinite;
 }

wenn Anfang und Ende gleich sind, geht auch das:

@keyframes nameYourAnimation {
 0%, 100% {font-size: 12px;}
 50% {font-size: 15px;}
}

Calling keyframe animation with separate properties:

#item {
 animation-name: bounce;
 animation-duration: 4s; //Xs //Xms
 animation-iteration-count: 10; //X
 animation-direction: alternate; //normal //alternate
 animation-timing-function: ease-out; //ease //ease-out //ease-in //ease-in-out //linear //cubic-bezier
 animation-fill-mode: forwards; //forwards //backwards //both //none
 animation-delay: 2s; //Xs //Xms
}

Animation shorthand:
space-separate all the individual values
order doesn’t matter except when duration + delay are used, they need to be in that order

CSS Selectors

Combinators

Angrenzender Geschwisterselektor (adjacent sibling combinator): +
vorheriges_Element + Zielelement { Stileigenschaften }
former_element + target_element { style properties }

Attribute Selectors

Selector	Example	Example Description
`[attribute]`	`[target]`	Selects all elements with a target attribute
`[attribute=value]`	`[target=_blank]`	Selects all elements with target=“_blank”
`[attribute~=value]`	`[title~=flower]`	Selects all elements with a title attribute containing the word “flower”
`[attribute	=value]`	`[lang
`[attribute^=value]`	`a[href^="https"]`	Selects every element whose href attribute value begins with “https”
`[attribute$=value]`	`a[href$=".pdf"]`	Selects every element whose href attribute value ends with “.pdf”
`[attribute*=value]`	`a[href*="w3schools"]`	Selects every element whose href attribute value contains the substring “w3schools”