Ergebnis 1 bis 39 von 39

Thema: Man lernt nie aus-Thread

  1. #1
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.756
    Contao-Projekt unterstützen

    Support Contao

    Standard Man lernt nie aus-Thread

    Selbst nach fast zwei Jahrzehnten als Webdesignerin stolpere ich doch noch immer wieder über Dinge, die mir nicht bekannt waren. Da es vielleicht anderen auch so geht, sammle ich diese hier. Ihr dürft gerne auch mit eigenen Sachen ergänzen.

  2. #2
    Administrator Avatar von Nina
    Registriert seit
    04.06.2009.
    Ort
    Hamburg
    Beiträge
    4.756
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Wenn der Text in einem Input bei zu wenig Platz umbrechen soll, reicht die Anweisung white-space: normal; (+ Breitenangabe) für das Input, das sich dann endlich wie gewünscht verhält.

  3. #3
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    844

    Standard

    Könntest Du das präzisieren bzw. ein Beispiel zeigen?

    Ich kann das nicht nachvollziehen bzw. nachstellen, Du meinst bei einem <input type="text"...> Feld?

  4. #4
    Contao-Fan
    Registriert seit
    10.08.2011.
    Ort
    Berlin
    Beiträge
    844

    Standard

    Auch wenn es im Grunde ein Problem ist was ich nie hatte, aber mich interessiert die Antwort trotzdem noch

  5. #5
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    CSS - Border-Image
    Die Nutzung von CSS Border-Image hatte ich schon wieder verdrängt - ist aber hilfreich:

    - https://www.w3schools.com/cssref/css...rder-image.asp
    - https://css-tricks.com/almanac/prope.../border-image/
    - https://caniuse.com/#feat=border-image

    Test Image: border-image-test.png

    Html:
    HTML-Code:
    <div class="border-img test">
    Some lore ipsum
    </div>
    CSS:
    Code:
      .border-img {
        border: 1px solid #fff;
        border-image-slice: 5 5 5 5; 
        border-image-width: auto;
        border-image-outset: 0;
        border-image-repeat: repeat;
      }
    
      .border-img-fill {
        border-image-slice: 5 5 5 5 fill; 
      }
    
     .test {
        display: block;
        padding: 110px;
    
       border-image-source: url(border-image-test.png);
     }
    Geändert von Franko (18.02.2019 um 15:15 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  6. #6
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    In Javascript/jQuery auf bestimmte Viewport Breiten reagieren
    Manchmal möchte man in seinen Scripts abhängig von der Viewport Breite unterschiedliche Aufgaben realisieren.

    Am einfachsten ist es hierzu dem "body" Element eine CSS Klasse zuzuweisen und dieser via Media Queries z.B. verschiedene CSS "color" Werte geben.
    Mit "$("body.meinecssklasse").css("color")" könnte der Wert dann abgefragt werden ( Vorsicht: Im Fall von "color" werden dann die rgb Werte zurückgegeben ).

    Ich hatte diese Vorgehensweise immer über "z-index" Werte realisiert:

    HTML-Code:
    <style>
        body.devicestate {
            position: absolute;
            top: -999em;
            left: -999em;
            z-index: 1;
        }
    
        @media all and (max-width: 1200px) {
            body.devicestate { z-index: 2; }
        }
    
        @media all and (max-width: 1024px) {
            body.devicestate { z-index: 3 }
        }
    
        @media all and (max-width: 768px) {
            body.devicestate { z-index: 4; }
        }
    </style>
    Und dann im Script sowas wie:

    Code:
    $( document ).ready(function() {      
    
        function getDeviceState() {
            
            var index = parseInt($("body.devicestate").css("z-index"));
    
            var states = {
                1: 'desktop',
                2: 'small-desktop',
                3: 'tablet',
                4: 'phone'
            };
    
            return states[index] || 'desktop';
        }
    
        if ( getDeviceState() == 'desktop' ) {
            console.log("Do wahtever in desktop view");
        }
    
    
        if ( getDeviceState() == 'tablet' ) {
            console.log("Do wahtever in tablet view");
        }
    });
    Das klappt selbstverständlich nur einmalig nach dem Seitenaufbau, reicht aber in den meisten Fällen aus.

    Wer die Funktionalität dynamisch benötigt, also auf den manuellen Browser Resize reagieren möchte, muß dann das entsprechende Event abfangen.
    Damit dies - "$(window).resize()" - nicht überhand nimmt und Dinge verlangsamt kann man z.B. die Lösung von David Walsh "JavaScript Debounce Function" implementieren.

    Mittlerweile kann man dazu auch "matchMedia()" einsetzen - die Browser Unterstützung ist heutzutage gut. Beispiele:
    - https://www.sitepoint.com/javascript-media-queries/
    - https://www.drweb.de/matchmedia-medi...-nutzen-51859/
    Geändert von Franko (25.07.2019 um 14:51 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  7. #7
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    sass/scss import von .css files

    Manchmal liegen framework styles nur mit .css files vor. Beispielsweise für node/npm die animate.css: s.: https://www.npmjs.com/package/animate.css
    Diese kann man dennoch in seinem .scss file importieren - man muß nur die Extension (.css) weglassen:

    Code:
    @import 'pathToFile/animate';
    Hierbei werden die (CSS) Inhalte der Datei direkt eingebunden.
    Mit Angabe der Extension (.css) in der .scss wird eine CSS-Import Angabe generiert ala "@import url(pathToFile/animate.css);" - was nicht immer erwünscht ist.

    Siehe auch: https://sass-lang.com/documentation/...#importing-css
    Geändert von Franko (31.07.2019 um 11:19 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  8. #8
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    Inline svg colorisieren

    Update: siehe auch Inline svg colorisieren mit SVG Import im Template
    Update: siehe auch "SVG als CSS-background verwenden und umfärben - auch mit dem IE"

    Zur Nutzung von inline svg's ein Template anlegen und via Insert-Tag "{{file::}}" einbinden ala:

    icon/svg-folder.html:
    Code:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <path fill="currentColor" d="M13.136,4.014c0,0-2.783,0-3.578,0C8.267,4.014,8.269,2,7.356,2
    	C6.012,2,4.701,2,3.444,2C3.163,2,2.99,2,2.863,2C1.835,2,1,2.835,1,3.864v8.243c0,1.029,0.835,1.863,1.863,1.863h10.272
    	c1.029,0,1.864-0.834,1.864-1.863v-6.23C15,4.848,14.165,4.014,13.136,4.014z M10.5,8.971H8v2.5c0,0.276-0.224,0.5-0.5,0.5
    	S7,11.747,7,11.471v-2.5H4.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5H7v-2.5c0-0.276,0.224-0.5,0.5-0.5S8,5.194,8,5.471v2.5
    	h2.5c0.276,0,0.5,0.224,0.5,0.5S10.776,8.971,10.5,8.971z"/>
    </svg>
    Inhaltselement "HTML":
    Code:
    <div class="icon">{{file::icon/svg-folder.html5}}</div>
    Da im svg das "fill-Attribut" auf "currentColor" gesetzt wird kann man es via CSS über den parent container so ansprechen:
    ( siehe auch: https://blog.kulturbanause.de/2015/0...yword-von-css/)

    CSS Style:
    Code:
    .icon {
      color: #ff0000;
    }
    Hierüber kann man die Icon-Farbe generell setzen.
    Wenn man die Farbe ändern möchte OHNE das CSS anpassen zu müssen:

    icon/svg-folder.html:
    Code:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <path fill="<?= (is_null(\Contao\Input::get('color')) ? 'currentColor' : \Contao\Input::get('color'))  ?>" d="M13.136,4.014c0,0-2.783,0-3.578,0C8.267,4.014,8.269,2,7.356,2
    	C6.012,2,4.701,2,3.444,2C3.163,2,2.99,2,2.863,2C1.835,2,1,2.835,1,3.864v8.243c0,1.029,0.835,1.863,1.863,1.863h10.272
    	c1.029,0,1.864-0.834,1.864-1.863v-6.23C15,4.848,14.165,4.014,13.136,4.014z M10.5,8.971H8v2.5c0,0.276-0.224,0.5-0.5,0.5
    	S7,11.747,7,11.471v-2.5H4.5c-0.276,0-0.5-0.224-0.5-0.5s0.224-0.5,0.5-0.5H7v-2.5c0-0.276,0.224-0.5,0.5-0.5S8,5.194,8,5.471v2.5
    	h2.5c0.276,0,0.5,0.224,0.5,0.5S10.776,8.971,10.5,8.971z"/>
    </svg>
    Inhaltselement "HTML":
    Code:
    <div class="icon">{{file::icon/svg-folder.html5?color=#00ff00}}</div>
    Wird kein Farbwert übergeben greift dann die CSS Anweisung - ansonsten halt der übergebene Farbwert ...
    Geändert von Franko (15.08.2019 um 15:41 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  9. #9
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    Short'nSweet - Multiple Backgrounds mit CSS linear-gradient and repeating-linear-gradient

    Mit purem CSS komplexe Hintergrundmuster erstellen ohne die OldSchool Image patterns - Infos:

    - https://www.youtube.com/watch?v=muE2B0Zylbw
    - https://caniuse.com/#feat=css-repeating-gradients
    - https://www.gradientmagic.com/

    Wer das ganze auch animieren möchte ohne background-position/background-size heranzuziehen - siehe Vorschlag:

    - https://medium.com/@dave_lunny/anima...s-d2fd7671e759
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  10. #10
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    Update: Inline svg colorisieren mit SVG Import im Template

    Die oben beschriebene Vorgehensweise zur Nutzung von Inline SVG als Template bedingt evtl. die doppelte Pflege von svg Daten:
    Einmal als Template (.html5) im template-Verzeichnis und evtl. auch noch als .svg Datei im files-Verzeichnis zur Nutzung in CSS Styles.

    Wie im Beitrag beschrieben kann man dies umgehen:

    - Man legt die .svg Dateien im files-Verzeichnis ab
    - Man importiert diese im Template (z.B. icon/svg-folder.html5) ala:

    PHP-Code:
    <?php
      
      $strSVGContent 
    file_get_contents('files/icons/folder.svg');

      
    $findStr 'fill="currentColor"';
      
    $replaceWith 'fill="' . (is_null(\Contao\Input::get('color')) ? 'currentColor' : \Contao\Input::get('color')) . '"';

      
    // replace only first fill attribute
      // or by using preg_match() / preg_match_all() to find matches between quotes after fill attribute like
      // preg_match('/fill\h*=.*?\"(.*?)\"/', $strSVGContent, $match);

      
    echo implode($replaceWithexplode($findStr$strSVGContent2));
    ?>
    Der Zugriff dann wie oben beschrieben mit "{{file::icon/svg-folder.html5}}" oder "{{file::icon/svg-folder.html5?color=#00ff00}}".
    Die Pflege/Aktualisierung der eigentlichen .svg Datei dann nur noch im jeweiligen files-Verzeichnis ...
    Geändert von Franko (02.08.2019 um 13:04 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  11. #11
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Masonry-Layout mit CSS "column-width"

    Ich unterschätze oft die Möglichkeiten der CSS-Elemente "column-width", "column-count" [1,2] usw..

    Auch geführt unter "CSS-Columns" bzw. "Multi-Column-Layout".
    Dies hat nichts mit CSS-Grid oder Flexbox zu tun kann aber damit kombiniert eingesetzt werden und die Browser Unterstützung ist gut.

    [1] w3schools- CSS Multi-column Layout
    [2] Caniuse

    Rachel Andrew hat hierzu einen schönen Beitrag geschrieben.

    Ein Masonry-Layout, also Spalten mit gleicher Breite aber unterschiedlicher Höhe wobei diese untereinander passend angeordnet werden, kann damit leicht umgesetzt werden.
    Typischerweise mit Fotos gilt aber grundsätzlich für jede Art von Inhalten.
    Mit CSS-Grid bzw. Flexbox ist dies so ohne weiteres nicht möglich ( selbst mit Angaben ala "justify-content: flex-end" etc. ).

    Dazu benötigt es lediglich einen umschließenden Container mit min. "column-width" Angabe.
    In Contao könnte man dies über z.B. einen separaten Artikel mit einzelnen ( Bild- ) Inhalten oder gleich via Inhaltselement "Galerie" realisieren.

    Demo index.html:
    HTML-Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Test</title>
    </head>
    <body>
    <style>
      body {
        color: #666666;
        background-color: #ebebeb;
      }
    
      .block {
        display: block;
      }
    
      .container {
        max-width: 1200px;
        margin: 0 auto;
        column-count: 4;
        column-width: 14em;
        column-gap: 1em;
      }    
    
      .item {
        background-color: #ffffff;
        padding: 10px;
        border: 1px solid #cccccc;
        margin-bottom: 1em;
        break-inside: avoid;
      }
    
      figure {
        margin: 0;
        break-inside: avoid;
      }
    
      img {
        max-width: 100%;
        height: auto;
      }
    </style>
    
    <div class="container block">
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/yEOCA6oiVqg/" />
        <figcaption>Image yEOCA6oiVqg</figcaption>
      </figure>
      </div>
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/SaovgEQMo00/" />
        <figcaption>Image SaovgEQMo00</figcaption>
      </figure>
      </div> 
      
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/lLtBNeVOHFE/" />
        <figcaption>Image lLtBNeVOHFE</figcaption>
      </figure>
      </div>
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/C68WT0YKGxo/" />
        <figcaption>Image C68WT0YKGxo</figcaption>
      </figure>
      </div>
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/ATtLrdUekdI/" />
        <figcaption>Image ATtLrdUekdI</figcaption>
      </figure>
      </div>
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/_LuLiJc1cdo/" />
        <figcaption>Image _LuLiJc1cdo</figcaption>
      </figure>
      </div>
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/V9rsiNN5flQ/" />
        <figcaption>Image V9rsiNN5flQ</figcaption>
      </figure>
      </div>
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/lrPBS8b4G14/" />
        <figcaption>Image lrPBS8b4G14</figcaption>
      </figure>
      </div>
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/lqxMW8r-qJY/" />
        <figcaption>Image lqxMW8r-qJY</figcaption>
      </figure>
      </div>
    
      <div class="item">
      <figure>
        <img src="https://source.unsplash.com/7j2D2o9NcYc/" />
        <figcaption>Image 7j2D2o9NcYc</figcaption>
      </figure>
      </div>
    
    </div>
    
    </body>
    </html>
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  12. #12
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard SVG als CSS background verwenden und umfärben - auch mit dem IE

    kulturbanause beschreibt in seinem Blog "SVG als CSS-background verwenden und umfärben"
    wie man grundsätzlich SVG's mit CSS "background-image" anlegt und bequem via Sass/Scss einfärben kann.
    Eine praktische Alternative zu Inline-SVG's.

    Dies ist notwendig, da hierbei die u.a. oben beschriebene Nutzung des SVG fill-Attributes mit "currentColor" nicht greift.
    In den Blog-Beispielen wird die Data-Uri wie folgt gesetzt:

    background-image: url("data:image/svg+xml;utf8,<svg> … </svg>");

    Was soweit korrekt ist - entsprechend dem Beitrag: Probably Don’t Base64 SVG

    Aber:
    Dies funktioniert in aktuellen Browser-Versionen von Chrome, Firefox und auch ( IE- ) Edge - nicht aber in älteren IE's.
    Der Grund ist die Formatierung der Data-Uri selbst.
    Infos hierzu unter: Optimizing SVGs in data URIs

    In der Zusammenfassung:
    - Die Data-Uri für SVG's sollte in Double-Quotes gesetzt werden
    - Die Angabe von "charset=UTF-8" kann hierbei komplett entfallen ( optional - aber in keinem Fall die Short-Form ";utf8" )
    - Die SVG Angaben selbst sollten bez. "<", ">" usw. codiert werden

    Dann klappt es auch in älteren IE's.
    Ein ( gerendertes ) Beispiel entsprechend des Blog-Beitrages:

    HTML-Code:
    <style>
      .item {
        display: block;
        height: 100px;
        width: 100px;
        background-size: 100%;
        margin: 1em;
      }  
    
      /* Kulturbanause Demo */
      /* see: https://blog.kulturbanause.de/2019/08/svg-als-css-background-verwenden-und-umfaerben/#comment-564152 */
      /* see: https://css-tricks.com/probably-dont-base64-svg/ */
    
      .icon-star {
        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166"><polygon fill="red" points="83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8"/></svg>'); 
      }  
    
      /* Work also with older IE */
      /* see: https://codepen.io/tigt/post/optimizing-svgs-in-data-uris */
    
      .icon-star-modified {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166 166'%3E%3Cpolygon fill='lime' points='83 26.8 65.7 61.8 27.1 67.4 55 94.7 48.5 133.2 83 115 117.5 133.2 111 94.7 138.9 67.4 100.3 61.8 83 26.8 83 26.8'/%3E%3C/svg%3E");
      }  
    </style>
    
    <p>Not with IE</p>
    <div class="item icon-star"></div>
    
    <hr/>
    
    <p>Work with older IE</p>
    <div class="item icon-star-modified"></div>
    Die Codierung der Data-Uri kann autom. via Sass/Scss [1], mit Node-Modul [2] oder über diesen Webpack-Loader [3] umgesetzt werden:

    [1] https://codepen.io/jakob-e/pen/doMoML
    [2] https://github.com/tigt/mini-svg-data-uri
    [3] https://github.com/bhovhannes/svg-url-loader
    Geändert von Franko (16.08.2019 um 09:05 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  13. #13
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Weitere Masonry Layout Alternative

    Eine weitere Umsetzung eines Masonry Layout bietet colcade.js
    Vom gleichen Autor des bekannten https://masonry.desandro.com/ aber nach eigenen Aussagen:

    Masonry is great, but it has grown big as it has grown older. Colcade is designed to be small & fast. I recommend using Colcade over Masonry, but read over this feature comparison.
    Im Unterschied muß man die Spalten Anzahl im HTML Quellcode zwar selbst setzen (und benötigt dann in Contao auch entsprechend angepaßte templates),
    allerdings ist man dann frei bei der eigentlichen CSS Umsetzung (klassisch mit float oder via flexbox):
    Beispiele findet man in der Beschreibung.

    Wie gesagt: Eine weitere Alternative ...
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  14. #14
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard CSS Framework Alternative von Adobe (Open Source)

    Hallo,
    nur als Info.
    Eine weitere CSS Framework Alternative zum stöbern - Adobe Spectrum:

    - https://spectrum.adobe.com/
    - https://opensource.adobe.com/spectrum-css/
    - https://github.com/adobe/spectrum-css
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  15. #15
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Das HTML5 Element <template>

    Ein aktueller CSS-Tricks Beitrag
    beruft sich auf einen Blog Eintrag von Christian Schaefer: https://schepp.dev/posts/ad-integration-in-2020/

    Hier wird u.a eine nützliche Umsetzung des HTML5 <template>Elements aufgeführt.
    Innerhalb eines eigenen Contao Templates umgesetzt kann das durchaus hrilfreich sein ...
    Geändert von Franko (16.01.2020 um 10:28 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  16. #16
    Contao-Nutzer
    Registriert seit
    14.11.2019.
    Beiträge
    47

    Frage

    Zitat Zitat von Franko Beitrag anzeigen
    Update: Inline svg colorisieren mit SVG Import im Template

    PHP-Code:
    <?php
      
      $strSVGContent 
    file_get_contents('files/icons/folder.svg');

      
    $findStr 'fill="currentColor"';
      
    $replaceWith 'fill="' . (is_null(\Contao\Input::get('color')) ? 'currentColor' : \Contao\Input::get('color')) . '"';

    ?>
    nach langem Suchen bin ich auf diesen Beitrag gestoßen und habe \contao\Input::get gefunden um die Argumente eines {{file::*}} inserttags zu lesen. Die Frage ist: wo hätte ich diese Dokumentation finden können?

  17. #17
    Wandelndes Contao-Lexikon Avatar von BugBuster
    Registriert seit
    15.06.2009.
    Ort
    Berlin
    Beiträge
    10.553
    User beschenken
    Wunschliste

    Standard

    Im Handbuch findet man etwas, nur nicht beim Insert Tag selbst, da wird nur erwähnt das Parameter möglich sind.
    Aber die Parameter sind halt GET Parameter wie bei URLs, damit ist klar wie man darauf zugreifen kann.
    https://docs.contao.org/manual/de/an...g-mit-argument
    Grüße, BugBuster
    "view source" is your guide.
    Danke an alle Amazon Wunschlisten Erfüller

  18. #18
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard CSS ::marker Pseudo-Element

    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  19. #19
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  20. #20
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Tweakpane JS nicht nur für CodePen

    FYI
    Wer seine CodePen's (nicht nur s.a. Tutorial) variabel über Eingaben ermöglichen will
    kann dazu u.a. die Library Tweakpane nutzen.

    Über CDN eingebunden sieht das dann in CodePen z. B. so aus:


    Oder für codesandbox Nutzer z.B.:
    https://codesandbox.io/s/t18b4

    Hilfreich zum Test eigener Snippets/CSS zur weiteren Nutzung.
    Geändert von Franko (06.12.2021 um 09:55 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  21. #21
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard HSL Color Modifikationen und "Dark Mode" Theme

    Unabhängig von Präprozessoren wie SASS/LESS oder der Nutzung über CSS Custom-Properties
    bietet die HSL Umsetzung zur Farbverwaltung einige Vorteile.

    Möchte man ein "Dark Mode" Theme anbieten werden hier ("A Complete Guide to Dark Mode on the Web") die grundsätzlichen Vorgehensweisen erklärt.

    In Zusammenhang mit HSL (s.a. "Switching from HEX & RGB to HSL") könnte man dann die entsprechenden Farben leicht modifizieren und bereit stellen:


    Weitere Infos bez. HSL Modifikationen (complement, invert usw.) z.B.:
    Geändert von Franko (09.12.2021 um 12:45 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  22. #22
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Helper App: Fluid Typography Editor

    Tutorials zur Definition und Nutzung verschiedener CSS units zwecks responsive Fonts (Sizes) findet man leicht.

    Die App "Fluid Typography Editor" nimmt das Rätselraten bei der Größenanpassung und Skalierung der Schriftgrößen auf verschiedenen Bildschirmen ab,
    bzw. erleichtert die Übersicht bei Eingabe versch. Parameter. Hierbei wird die CSS Funktion clamp() genutzt (s.a.: caniuse).

    https://modern-fluid-typography.vercel.app/
    https://github.com/codeAdrian/modern...ography-editor
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  23. #23
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard SVG mal anders - Die SVG Filter

    Wir nutzen aktuell .svg, zumeist für verlustfreie Logo's o. Illustrationen, entweder innerhalb <img> oder inline zwecks weiterer Möglichkeiten.
    SVG bietet uns aber darüber hinaus mehr Möglichkeiten über die SVG-Filter.

    Wir kennen z.B. den CSS-Filter »blur()«
    Alle CSS-Filter sind jedoch lediglich vereinfachte Versionen der SVG-Filter.
    Der primitive SVG-Filter, als Pendant zu »CSS blur()« wäre »feGaussianBlur mit erweiterten Funktionen.
    Eine exemplarische, praktische Nutzung (mit den Unterschieden) findet ihr hier: https://tympanus.net/codrops/2019/01...g-filters-101/

    Die Browser Unterstützung für SVG-Filter ist sogar zumeist besser als für die CSS-Filter!

    Zur Nutzung der SVG-Filter definiert man lediglich ein inline .svg mit einem o. mehreren Filtern (s.u.)
    und nutzt dann »url()« zur Referenzierung des Filters.
    Eine einfache Erklärung u. Einführung dazu findet ihr hier: https://www.youtube.com/watch?v=bm6tkPzDObY

    Innerhalb der .svg kann man auch mehrere (primitive) Filter kombinieren, ähnlich wie in Photoshop (stacked) und darüber zahlreiche Effekte kreieren.
    Wunderbar verdeutlicht von Sara Soueidan: https://www.youtube.com/watch?v=PHKLzpt-syI

    Die "After Effects" user haben sicherlich sofort ein »Déjà-vu« hinsichtlich Effekt-Kombis ala "fractal-noise", »displacement-map« etc. (entweder zur Nutzung als content o. mask via alpha/luma).
    Und JA - im Grunde genommen bieten SVG-Filter eben diese Effekt Variationen s.a.: »feTurbulence (fractalNoise)«, feDisplacementMap«, »feComposite« oder »feColorMatrix«

    Samples: Animiertes Wasser (no video), Starfields,
    Texturen, clouds, smoke usw..

    Selbstverständlich kann man manche Umsetzungen auch weiterhin als reine, statische Images/videos implementieren.
    Die svg Umsetzungen in dieser Form können jedoch oftmals unterhalb von 1k liegen.

    Animationen sind möglich, sowohl in svg selbst (SMIL) oder via CSS.
    Diese sind jedoch ressourcen intensiv und sollten sparsam gesetzt werden.

    Falls Ihr selbst hierzu Beispiele haben solltet: Let us know
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  24. #24
    Contao-Fan Avatar von Kopfnuss
    Registriert seit
    05.09.2012.
    Ort
    Zwickau
    Beiträge
    346
    Partner-ID
    11375
    Contao-Projekt unterstützen

    Support Contao

    Standard CSS Math Functions

    Bin letztens auf die CSS math functions gestoßen und will einfach den Link zu einer Vorstellung mit euch teilen.

    Darin geht es unter anderem wie man 100% - 200px in CSS rechnet. Damit wird es interessant das man einen festen Seiten Bereich hat mit 200px und der Hauptbereich sich an den Viewport anpasst.
    In dieser Vorstellung werden noch andere Verwendungsmöglichkeiten angerissen, unter anderem wie man die Schriftgröße automatisch an den Viewport anpassen kann oder wie die Schriftgröße sich automatisch an eine Boxgröße anpasst.

    https://stackdiary.com/css-math-functions/

  25. #25
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Native Masonry Layouts mit CSS Grid

    In »Masonry-Layout mit CSS "column-width"« wird eine einfache Alternative zwecks Masonry Layouts, unabhängig von weiteren script Lösungen, beschrieben.

    Das "Problem" dieser "Fake Masonry" ist die Reihenfolge der Darstellung:
    Die Leserichtung sollte von links nach rechts erfolgen, nicht in Form von Spalten ( Zumindest für reine Image-Galleries wäre dies aber zumeist vernachlässigbar ).

    s.a.: https://kulturbanause.de/blog/respon...ayout-mit-css/

    Eine neue Lösung existiert in Zusammenhang mit CSS-Grid und
    Code:
    grid-template-rows: masonry;
    Infos hierzu: Native CSS Masonry Layout In CSS Grid

    Leider zur Zeit nur experimentell in Firefox.
    Aber man kann zumindest aktuell beide Lösungen (in jedem Fall f. Image-Galleries) via @supports realisieren.
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  26. #26
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Duotone Effekt

    Wer einen »Duotone Effekt« (Photoshop like) für seine Images benötigt, nutzt sicher die CSS Eigenschaft: mix-blend-mode.
    Dies evtl. in Kombi mit den Pseudo-Elementen (::after / ::before) und isolation - s.a.:

    - https://css-tricks.com/almanac/prope...ix-blend-mode/
    - https://cssduotone.com/

    Alternativ könnte man dazu aber auch gezielt jeden einzelnen Kanal mit dem SVG-Filter feColorMatrix kontrollieren:
    Sample: https://codepen.io/lentilz/pen/mPOKdG/
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  27. #27
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Menü/Nav (Hamburger) icon

    Wer schnell ein statisches "Hamburger" Symbol benötigt (kein CSS/svg, o. animation):
    https://graphemica.com/%E2%98%B0
    Geändert von Franko (03.04.2022 um 14:35 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  28. #28
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Color Themes Tool/Mockup

    Zum finden/testen passender Farb-Kombinationen (inkl. Monochrom, Komplementär, Variationen etc.)
    existieren zahlreiche Tools wie z.B. »Adobe Color Webapp«.

    Ein weiteres Hilfsmittel mit weiteren Vorschau-Möglichkeiten zwecks Entscheidung bietet:
    https://huemint.com/
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  29. #29
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.925
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Zum finden/testen passender Farb-Kombinationen (inkl. Monochrom, Komplementär, Variationen etc.)
    zu empfehlen ist dann auch mal einen Blick auf die Farbkontraste zu werfen https://www.google.com/search?q=barr...bkontrast+test

    Oft gesehene Sachen wie "Hellgraue Schrift" auf "Hellhellgrauem Grund" können den Grafikern/Designern damit um die Ohren geworfen werden ;-)

  30. #30
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard Docker/devilbox und Contao Multidomain-Betrieb

    Wenn man über die devilbox lokal
    einen Contao Multidomain-Betrieb (https://docs.contao.org/manual/de/la...omain-betrieb/) aufsetzen möchte,
    hilft diese Info:

    https://devilbox.readthedocs.io/en/l...ubdomains.html

    Klappt bei mir ohne Überschreibung der vhost sondern einfach via Ordner/Symlink in Zusammenhang mit AUTO DNS.
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  31. #31
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  32. #32
    Contao-Nutzer
    Registriert seit
    10.06.2015.
    Beiträge
    70

    Standard SVG inline - mehrere Attribute

    Zitat Zitat von Franko Beitrag anzeigen
    Update: Inline svg colorisieren mit SVG Import im Template

    Die oben beschriebene Vorgehensweise zur Nutzung von Inline SVG als Template bedingt evtl. die doppelte Pflege von svg Daten:
    Einmal als Template (.html5) im template-Verzeichnis und evtl. auch noch als .svg Datei im files-Verzeichnis zur Nutzung in CSS Styles.

    Wie im Beitrag beschrieben kann man dies umgehen:

    - Man legt die .svg Dateien im files-Verzeichnis ab
    - Man importiert diese im Template (z.B. icon/svg-folder.html5) ala:

    PHP-Code:
    <?php
      
      $strSVGContent 
    file_get_contents('files/icons/folder.svg');

      
    $findStr 'fill="currentColor"';
      
    $replaceWith 'fill="' . (is_null(\Contao\Input::get('color')) ? 'currentColor' : \Contao\Input::get('color')) . '"';

      
    // replace only first fill attribute
      // or by using preg_match() / preg_match_all() to find matches between quotes after fill attribute like
      // preg_match('/fill\h*=.*?\"(.*?)\"/', $strSVGContent, $match);

      
    echo implode($replaceWithexplode($findStr$strSVGContent2));
    ?>
    Der Zugriff dann wie oben beschrieben mit "{{file::icon/svg-folder.html5}}" oder "{{file::icon/svg-folder.html5?color=#00ff00}}".
    Die Pflege/Aktualisierung der eigentlichen .svg Datei dann nur noch im jeweiligen files-Verzeichnis ...
    Hallo Franco

    Danke. Mir gefällt das mit dem Inline so wie beschrieben. Jetzt könnte/kann man das auch mit der Größe machen. Ich wäre dann also flexibel, und könnte im Inline auf diese Art auch die Größe individuell festlegen.
    Nun, einzeln habe ich das nach deinem Vorbild mit der Größe hinbekommen, aber nur entweder Color oder Height.
    Kann man da im Template (mit && oder so - ich kenne mich leider mit php nicht aus) und auch im Inline Zugriff diese zwei Attribute kombinieren?

    Wäre dankbar für kurze Info dazu
    Grüße
    Matt
    Geändert von McMatty (23.09.2022 um 13:51 Uhr)

  33. #33
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.510
    Partner-ID
    6122

    Standard

    Naja, alles schon etwas älter.
    Aktuell könnte man sowas auch über dieses Inhaltselement lösen:
    https://docs.contao.org/manual/de/ar...elles-template
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

  34. #34
    Contao-Nutzer
    Registriert seit
    10.06.2015.
    Beiträge
    70

    Standard [erledigt] Inline SVG

    Zitat Zitat von Franko Beitrag anzeigen
    Naja, alles schon etwas älter.
    Aktuell könnte man sowas auch über dieses Inhaltselement lösen:
    https://docs.contao.org/manual/de/ar...elles-template

    Älter ... ich weiß, aber wenn's funktioniert/funktionieren würde ...

    Ich kann mir den Head des svg anpassen und nach deinem Muster das SVG Template erstellen.
    - Kann man beide Attribute (also color-Variante und das Gleiche noch einmal als height-Variante) in dem PHP von dir kombinieren?
    - Kann man beide Attribute gemeinsam (color=... height= ...) im Inline definieren?

    EDIT: Nach etwas Überlegung habe ich festgestellt, dass für Inline SVG die Variante mit .svg und .html5 (das die svg Datei abruft) nach der alten Anleitung eigentlich überflüssig ist ("... nur eine Datei warten ..."). Die .svg Datei als img eingefügt lässt sich ohnehin nicht über diesen Weg oder css stylen (ohne ein Umwandlungsscript). Also kann man genausogut das komplette svg in das Template einfügen und dann als Inline mit ....html5?fill=...[&]height=... jeweils individuell stylen. Die .svg Datei ist da überflüssig. Bei komplexeren Grafiken (Farben, Linien) sind wohl per copy and paste auch die weiteren Attribute veränderbar.

    Somit ist das für mich und meine handvoll Icons eine easy Methode ... bis es vllt. eine einfache Anleitung gibt, wie das mit dem neuen Inhaltselement indiv. Templ. und svg funktioniert
    Geändert von McMatty (30.09.2022 um 19:38 Uhr)

  35. #35
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    7.080
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von McMatty Beitrag anzeigen
    Da steht was von ab Contao 4.13 (ich bleibe vorerst bei LTS 4.9)
    Contao 4.13 ist auch eine LTS
    Contao 4.9 erhält nur noch bis Februar Bug-Fix-Releases und danach nur noch Security-Fixes

    Es gibt eigentlich keinen wirklichen Grund nicht auf Contao 4.13 upzudaten.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  36. #36
    Contao-Nutzer
    Registriert seit
    10.06.2015.
    Beiträge
    70

    Standard

    Zitat Zitat von mlweb Beitrag anzeigen
    Contao 4.13 ist auch eine LTS
    Contao 4.9 erhält nur noch bis Februar Bug-Fix-Releases und danach nur noch Security-Fixes

    Es gibt eigentlich keinen wirklichen Grund nicht auf Contao 4.13 upzudaten.
    Ah, OK und danke. Ich hatte mich zuletzt mit den Versionen nicht mehr beschäftigt, nach dem Motto "don't touch a running system". Nachdem ich aber gerade ein wenig experimentiert habe, kann ich ja auch das probieren.

    Edit: erfolgreich auf 4.13

    Grüße aus dem Mostviertel
    Geändert von McMatty (29.09.2022 um 10:38 Uhr)

  37. #37
    Contao-Nutzer
    Registriert seit
    10.06.2015.
    Beiträge
    70

    Standard Individuelles Template + svg

    Zitat Zitat von Franko Beitrag anzeigen
    Naja, alles schon etwas älter.
    Aktuell könnte man sowas auch über dieses Inhaltselement lösen:
    https://docs.contao.org/manual/de/ar...elles-template
    OK, nun wäre die Frage, wie ich das mit den SVGs zusammenbinde bzw. generell, wie das Individuelle Template genutzt wird.
    Die Bedeutung der einzugebenden Schlüssel/Wert Paare in der BE Maske kann ich auch noch nicht "einordnen".

    Es gibt offenbar zu dem Thema Contentelement Individuelles Template so gut wie noch keine (beispielhafte) Dokumentation(?).

    Grüße
    Matt

    Edit: Bis dahin ist die Version mit dem angepassten Header des SVG für Höhe UND Farbe (weitere Attribute evtl. auch möglich), dann als html5 ab in Templates und per Inline individuell die Höhe und Farbe angegeben eine passable Lösung für das gelegentliche Icon ...
    Geändert von McMatty (04.10.2022 um 16:06 Uhr)

  38. #38
    Contao-Nutzer
    Registriert seit
    09.09.2011.
    Beiträge
    225

    Standard clamp() + LESS

    Zitat Zitat von Franko Beitrag anzeigen
    […] clamp() […]
    Danke für die Tutorials! In Contao (4.13.26) funktioniert clamp() nicht, wenn es in einer LESS-Datei steht. Dann wird nur ein Wert übernommen.

    Hab dazu mal einen eigenen Forenbeitrag erstellt: clamp() + LESS ???. Lösungsvorschläge bitte eher dort, sprengt hier sicher den Rahmen.

    [EDIT:]

    Lösung für Contao+LESS: Den Teil in der LESS-Datei escapen:
    Code:
    font-size: ~"clamp(18px, 3vw, 2rem)";
    Geändert von wanst (24.07.2023 um 14:04 Uhr)

  39. #39
    Contao-Nutzer
    Registriert seit
    30.11.2023.
    Beiträge
    1

    Standard

    Es ist wirklich interessant, wie sich die Webdesign-Welt ständig weiterentwickelt und man immer wieder Neues lernt. Das Teilen solcher Erfahrungen kann sehr hilfreich sein, um sich gegenseitig zu unterstützen. Vielleicht könntest du anfangen, deine Entdeckungen zu dokumentieren, um eine nützliche Ressource für andere zu schaffen.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 5 (Registrierte Benutzer: 0, Gäste: 5)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •