One place for hosting & domains

      Nutzung von SFTP zur sicheren Übertragung von Dateien mit einem Remote-Server


      Einführung

      FTP oder „File Transfer Protocol“ (Dateiübertragungsprotokoll) war eine beliebte unverschlüsselte Methode zur Übertragung von Dateien zwischen zwei Remote-Systemen.

      SFTP, das für SSH File Transfer Protocol (SSH-Dateiübertragungsprotokoll) oder Secure File Transfer Protocol (sicheres Dateiübertragungsprotokoll) steht, ist ein separates Protokoll, das mit SSH verpackt ist und auf ähnliche Weise funktioniert, jedoch über eine sichere Verbindung. Der Vorteil ist die Fähigkeit zur Nutzung einer sicheren Verbindung zur Übertragung von Dateien und zum Durchlaufen des Dateisystems sowohl auf dem lokalen als auch auf dem Remote-System.

      In fast allen Fällen ist SFTP aufgrund der zugrunde liegenden Sicherheitsfunktionen und der Fähigkeit, eine SSH-Verbindung einzubinden, gegenüber FTP vorzuziehen. FTP ist ein unsicheres Protokoll, das nur in begrenzten Fällen oder auf Netzwerken verwendet werden sollte, denen Sie vertrauen.

      Obwohl SFTP in viele grafische Tools integriert ist, wird in diesem Leitfaden die Verwendung über die interaktive Befehlszeilenschnittstelle demonstriert.

      Verbindung mit SFTP

      Standardmäßig verwendet SFTP das SSH-Protokoll, um eine sichere Verbindung zu authentifizieren und zu erstellen. Aus diesem Grund sind die gleichen Authentifizierungsmethoden verfügbar, die auch in SSH vorhanden sind.

      Obwohl Passwörter einfach zu verwenden und standardmäßig eingerichtet sind, empfehlen wir Ihnen, SSH-Schlüssel zu erstellen und Ihren öffentlichen Schlüssel auf jedes System zu übertragen, auf das Sie zugreifen müssen. Dies ist wesentlich sicherer und kann Ihnen auf lange Sicht Zeit sparen.

      Bitte sehen Sie sich diesen Leitfaden zur Einrichtung von SSH-Schlüsseln für den Zugriff auf Ihren Server an, wenn Sie dies noch nicht getan haben.

      Wenn Sie über SSH eine Verbindung zu dem Rechner herstellen können, haben Sie alle notwendigen Voraussetzungen erfüllt, um SFTP zur Verwaltung von Dateien zu verwenden. Testen Sie den SSH-Zugriff mit dem folgenden Befehl:

      • ssh sammy@your_server_ip_or_remote_hostname

      Wenn dies funktioniert, geben Sie zum Verlassen Folgendes ein:

      Jetzt können wir eine SFTP-Sitzung aufbauen, indem wir den folgenden Befehl ausgeben:

      • sftp sammy@your_server_ip_or_remote_hostname

      Sie stellen eine Verbindung zum Remote-System her, und Ihre Eingabeaufforderung ändert sich in eine SFTP-Eingabeaufforderung.

      Wenn Sie an einem benutzerdefinierten SSH-Port arbeiten (nicht dem Standard-Port 22), können Sie eine SFTP-Sitzung wie folgt öffnen:

      • sftp -oPort=custom_port sammy@your_server_ip_or_remote_hostname

      Dadurch werden Sie über den von Ihnen angegebenen Port mit dem Remote-System verbunden.

      Hilfe in SFTP erhalten

      Der nützlichste Befehl, den Sie zuerst lernen sollten, ist der Hilfebefehl. Damit haben Sie Zugriff auf eine Zusammenfassung der SFTP-Hilfe. Sie können sie aufrufen, indem Sie einen der folgenden Befehle in die Eingabeaufforderung eingeben:

      oder

      Damit wird eine Liste der verfügbaren Befehle angezeigt:

      Output

      Available commands: bye Quit sftp cd path Change remote directory to 'path' chgrp grp path Change group of file 'path' to 'grp' chmod mode path Change permissions of file 'path' to 'mode' chown own path Change owner of file 'path' to 'own' df [-hi] [path] Display statistics for current directory or filesystem containing 'path' exit Quit sftp get [-Ppr] remote [local] Download file help Display this help text lcd path Change local directory to 'path' . . .

      Einige der angezeigten Befehle werden wir in den folgenden Abschnitten näher betrachten.

      Wir können durch die Dateihierarchie des Remote-Systems navigieren, indem wir eine Reihe von Befehlen verwenden, die ähnlich wie ihre Shell-Gegenstücke funktionieren.

      Orientieren wir uns zunächst, indem wir herausfinden, in welchem Verzeichnis wir uns derzeit im Remote-System befinden. Genau wie in einer typischen Shell-Sitzung können wir Folgendes eingeben, um das aktuelle Verzeichnis zu erhalten:

      Output

      Remote working directory: /home/demouser

      Wir können den Inhalt des aktuellen Verzeichnisses des Remote-Systems mit einem anderen vertrauten Befehl anzeigen:

      Output

      Summary.txt info.html temp.txt testDirectory

      Beachten Sie, dass die Befehle innerhalb der SFTP-Schnittstelle nicht die normalen Shell-Befehle sind und nicht so funktionsreich sind, aber sie implementieren einige der wichtigeren optionalen Flags:

      Output

      drwxr-xr-x 5 demouser demouser 4096 Aug 13 15:11 . drwxr-xr-x 3 root root 4096 Aug 13 15:02 .. -rw------- 1 demouser demouser 5 Aug 13 15:04 .bash_history -rw-r--r-- 1 demouser demouser 220 Aug 13 15:02 .bash_logout -rw-r--r-- 1 demouser demouser 3486 Aug 13 15:02 .bashrc drwx------ 2 demouser demouser 4096 Aug 13 15:04 .cache -rw-r--r-- 1 demouser demouser 675 Aug 13 15:02 .profile . . .

      Um in ein anderes Verzeichnis zu gelangen, können wir diesen Befehl ausgeben:

      Wir können nun das Remote-Dateisystem durchlaufen, aber was, wenn wir auf unser lokales Dateisystem zugreifen müssen? Wir können Befehle auf das lokale Dateisystem richten, indem wir ihnen ein l für lokal voranstellen.

      Alle bisher besprochenen Befehle haben lokale Entsprechungen. Wir können das lokale Arbeitsverzeichnis ausgeben:

      Output

      Local working directory: /Users/demouser

      Wir können den Inhalt des aktuellen Verzeichnisses auf dem lokalen Rechner auflisten:

      Output

      Desktop local.txt test.html Documents analysis.rtf zebra.html

      Wir können auch das Verzeichnis wechseln, mit dem wir auf dem lokalen System interagieren möchten:

      Übertragung von Dateien mit SFTP

      Das Navigieren der Remote- und lokalen Dateisysteme ist nur von begrenztem Nutzen, wenn keine Möglichkeit besteht, Dateien zwischen den beiden Systemen zu übertragen.

      Übertragung von Remote-Dateien auf das lokale System

      Wenn wir Dateien von unserem Remote-Host herunterladen möchten, können wir dies tun, indem wir den folgenden Befehl ausgeben:

      Output

      Fetching /home/demouser/remoteFile to remoteFile /home/demouser/remoteFile 100% 37KB 36.8KB/s 00:01

      Wie Sie sehen können, lädt der Befehl get eine Remote-Datei in eine Datei mit dem gleichen Namen auf dem lokalen Dateisystem herunter.

      Wir können die Remote-Datei unter einem anderen Namen kopieren, indem wir den Namen anschließend angeben:

      Der Befehl get nimmt auch einige Options-Flags an. Beispielsweise können wir ein Verzeichnis und seinen gesamten Inhalt kopieren, indem wir die Option rekursiv angeben:

      Wir können SFTP anweisen, die entsprechenden Berechtigungen und Zugriffszeiten beizubehalten, indem wir das Flag -P oder -p verwenden:

      Übertragung lokaler Dateien auf das Remote-System

      Die Übertragung von Dateien auf das Remote-System lässt sich ebenso einfach mit dem entsprechend benannten Befehl „put“ erreichen:

      Output

      Uploading localFile to /home/demouser/localFile localFile 100% 7607 7.4KB/s 00:00

      Die gleichen Flags, die mit get funktionieren, gelten auch für put. Um also ein vollständiges lokales Verzeichnis zu kopieren, können Sie ausgeben:

      Anmerkung: In den Versionen von OpenSSH, die mit aktuellen Ubuntu-Versionen (zumindest 14.04 bis 15.10) ausgeliefert werden, gibt es derzeit einen Fehler, der verhindert, dass der obige Befehl korrekt funktioniert. Wenn Sie den obigen Befehl ausgeben, um Inhalte auf einen Server zu übertragen, der die fehlerhafte Version von OpenSSH verwendet, wird der folgende Fehler ausgegeben: Couldn't canonicalise: No such file or directory (Keine Kanonisierung möglich: keine solche Datei oder solches Verzeichnis).

      Um dieses Problem zu umgehen, erstellen Sie zuerst das Zielverzeichnis auf der Remote-Seite, indem Sie mkdir localDirectory eingeben. Anschließend sollte der obige Befehl ohne Fehler abschließen.

      Ein bekanntes Tool, das beim Herunterladen und Hochladen von Dateien nützlich ist, ist der Befehl df, der ähnlich wie die Kommandozeilenversion funktioniert. Damit können Sie überprüfen, ob Sie über ausreichend Speicherplatz verfügen, um die gewünschten Übertragungen durchzuführen:

      Output

      Size Used Avail (root) %Capacity 19.9GB 1016MB 17.9GB 18.9GB 4%

      Bitte beachten Sie, dass es keine lokale Variante dieses Befehls gibt, jedoch können wir dies umgehen, indem wir den Befehl ! eingeben.

      Der Befehl ! versetzt uns in eine lokale Shell, in der wir jeden auf unserem lokalen System verfügbaren Befehl ausführen können. Wir können die Festplattennutzung überprüfen, indem wir Folgendes eingeben:

      und dann

      Output

      Filesystem Size Used Avail Capacity Mounted on /dev/disk0s2 595Gi 52Gi 544Gi 9% / devfs 181Ki 181Ki 0Bi 100% /dev map -hosts 0Bi 0Bi 0Bi 100% /net map auto_home 0Bi 0Bi 0Bi 100% /home

      Jeder andere lokale Befehl wird wie erwartet funktionieren. Um zu Ihrer SFTP-Sitzung zurückzukehren, geben Sie Folgendes ein:

      Sie sollten nun wieder die SFTP-Eingabeaufforderung sehen.

      Einfache Dateimanipulation mit SFTP

      Mit SFTP können Sie die Art der grundlegenden Dateiwartung durchführen, die bei der Arbeit mit Dateihierarchien nützlich ist.

      Beispielsweise können Sie den Eigentümer einer Datei auf dem Remote-System ändern:

      Beachten Sie, dass der SFTP-Befehl im Gegensatz zum Systembefehl chmod keine Benutzernamen akzeptiert, sondern stattdessen UIDs verwendet. Leider gibt es keine einfache Möglichkeit, die entsprechende UID innerhalb der SFTP-Schnittstelle zu kennen.

      Eine aufwändige Umgehung könnte erreicht werden mit:

      • get /etc/passwd
      • !less passwd

      Output

      root:x:0:0:root:/root:/bin/bash daemon:x:1:1:daemon:/usr/sbin:/bin/sh bin:x:2:2:bin:/bin:/bin/sh sys:x:3:3:sys:/dev:/bin/sh sync:x:4:65534:sync:/bin:/bin/sync games:x:5:60:games:/usr/games:/bin/sh man:x:6:12:man:/var/cache/man:/bin/sh . . .

      Beachten Sie, dass wir den Befehl ! nicht für sich allein gegeben haben, sondern als Präfix für einen lokalen Shell-Befehl verwendet haben. Dies funktioniert, um jeden Befehl auszuführen, der auf unserem lokalen Rechner verfügbar ist, und hätte zuvor mit dem lokalen Befehl df verwendet werden können.

      Die UID wird in der dritten Spalte der Datei stehen, die durch Doppelpunkt abgegrenzt ist.

      Auf ähnliche Weise können wir den Gruppeneigentümer einer Datei ändern mit:

      Auch hier gibt es keine einfache Möglichkeit, eine Auflistung der Gruppen des Remote-Systems zu erhalten. Wir können dies mit dem folgenden Befehl umgehen:

      • get /etc/group
      • !less group

      Output

      root:x:0: daemon:x:1: bin:x:2: sys:x:3: adm:x:4: tty:x:5: disk:x:6: lp:x:7: . . .

      Die dritte Spalte enthält die ID der Gruppe, die mit dem Namen in der ersten Spalte verknüpft ist. Das ist, wonach wir suchen.

      Zum Glück funktioniert der Befehl chmod wie erwartet auf dem Remote-Dateisystem:

      Output

      Changing mode on /home/demouser/publicFile

      Es gibt keinen Befehl zur Manipulation lokaler Dateiberechtigungen, aber Sie können die lokale umask festlegen, sodass alle auf das lokale System kopierten Dateien die entsprechenden Berechtigungen aufweisen.

      Das kann mit dem Befehl lumask geschehen:

      Output

      Local umask: 022

      Jetzt haben alle regulären Dateien, die heruntergeladen werden (solange das Flag -p nicht verwendet wird) 644 Berechtigungen.

      Mit SFTP können Sie Verzeichnisse sowohl auf lokalen als auch auf Remote-Systemen mit lmkdir bzw. mkdir erstellen. Diese funktionieren wie erwartet.

      Der Rest der Dateibefehle zielt nur auf das Remote-Dateisystem ab:

      Diese Befehle replizieren das grundlegende Verhalten der Shell-Versionen. Wenn Sie diese Aktionen auf dem lokalen Dateisystem ausführen müssen, denken Sie daran, dass Sie durch Ausgabe des folgenden Befehls in eine Shell wechseln können:

      Oder führen Sie einen einzelnen Befehl auf dem lokalen System aus, indem Sie dem Befehl das ! voranstellen, wie hier:

      Wenn Sie mit Ihrer SFTP-Sitzung fertig sind, verwenden Sie exit oder bye, um die Verbindung zu schließen.

      Zusammenfassung

      Obwohl SFTP ein einfaches Tool ist, ist es sehr nützlich für die Verwaltung von Servern und die Übertragung von Dateien zwischen ihnen.

      Beispielsweise können Sie SFTP verwenden, um bestimmten Benutzern die Übertragung von Dateien ohne SSH-Zugriff zu ermöglichen. Weitere Informationen zu diesem Vorgang finden Sie in unserem Tutorial Aktivieren von SFTP ohne Shell-Zugriff.

      Wenn Sie gewohnt sind, FTP oder SCP für Ihre Übertragungen zu verwenden, ist SFTP eine gute Möglichkeit, die Stärken beider zu nutzen. Obwohl es nicht für jede Situation geeignet ist, ist es ein flexibles Tool, das Sie in Ihrem Repertoire haben sollten.



      Source link

      Verhindern von Zeilenumbrüchen mit CSS


      Einführung

      Entwickler bevorzugen für gewöhnlich, Text auf einer Webseite umzubrechen. Der Zeilenumbruch schränkt einen Text auf die eine oder andere Weise ein und verhindert Designprobleme. Der Textumbruch kann auch den horizontalen Bildlauf verhindern.  Aber es gibt Fälle, in denen man möchte, dass Textblöcke unabhängig von ihrer Länge in der gleichen Zeile bleiben.  Sie können Zeilenumbrüche und Textumbrüche für bestimmte Elemente mit der CSS-Eigenschaft white-space verhindern.

      In diesem Tutorial stylen Sie denselben Textblock auf vier verschiedene Arten, zuerst mit Zeilenumbruch und dann dreimal ohne Zeilenumbruch:

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Dadurch stehen Ihnen mehrere Optionen für den Umbruch oder den Nichtumbruch Ihres Textes zur Verfügung.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      Schritt 1 — Verhindern und Erzwingen von Zeilenumbrüchen in CSS

      In diesem Schritt werden Sie ein Stylesheet mit drei verschiedenen Klassen erstellen.  Jeder geht unterschiedlich mit Zeilenumbrüchen um: der erste bricht den Text in der Standardmethode um, während der zweite und dritte den Text zwingen, keinen Zeilenumbruch zu erzeugen und umzubrechen.

      Erstellen und öffnen Sie zuerst eine Datei namens main.css mit nano oder Ihrem bevorzugten Editor:

      Fügen Sie den folgenden Inhalt hinzu, der drei CSS-Klassen einführt, die mehrere Eigenschaften verwenden, einschließlich white-space:

      ./main.css

      .sammy-wrap {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
      }
      .sammy-nowrap-1 {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
          white-space: nowrap;
      }
      .sammy-nowrap-2 {
          border-radius: 6px;
          background-color: aliceblue;
          border: 2px dashed gray;
          max-width: 70%;
          padding: 1em;
          margin-bottom: .4em;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
      }
      

      Ihre erste Klasse ist .sammy-wrap. Sie definiert sechs häufige CSS-Eigenschaften, einschließlich border-radius, background-color, border max-width, padding und margin-bottom. Diese Klasse erzeugt einen visuellen Rahmen, definiert aber keine speziellen Umbruch-Eigenschaften.  Dies bedeutet, dass sie Zeilen in der Standardmethode bricht.

      Ihre zweite Klasse ist .sammy-nowrap-1. Sie definiert die gleiche Box wie .sammy-wrap, aber jetzt fügen Sie eine weitere Eigenschaft hinzu: white-space. Die Eigenschaft white-space hat zahlreiche Optionen, die alle definieren, wie man white-space in einem bestimmten Element behandelt. Hier haben Sie white-space auf nowrap eingestellt, was alle Zeilenumbrüche verhindert.

      Ihre dritte Klasse ist .sammy-nowrap-2. Sie fügt white-space und zwei zusätzliche Eigenschaften hinzu: overflow und text-overflow. Die Eigenschaft overflow behandelt scrollable overflow, die auftritt, wenn der Inhalt innerhalb eines Elements über die Ränder dieses Elements hinausgeht. Die Eigenschaft overflow kann diesen Inhalt scrollbar, sichtbar oder versteckt machen. Sie setzen overflow auf hidden und verwenden dann die Eigenschaft text-overflow, um noch mehr Anpassung hinzuzufügen. text-overflow kann Ihnen helfen, einem Benutzer zu signalisieren, dass zusätzlicher Text versteckt bleibt. Sie haben dies auf ellipsis gesetzt, also wird Ihre Zeile nun weder gebrochen noch über die Box hinaus erweitert. CSS verbirgt den Overflow und signalisiert den verborgenen Inhalt mit einem ...

      Speichern und schließen Sie Ihre Datei.

      Nachdem Sie nun einen Stylesheet haben, sind Sie bereit, eine kurze HTML-Datei mit einem Beispieltext zu erstellen. Dann laden Sie die Webseite in einem Browser und untersuchen, wie CSS Zeilenumbrüche verhindern kann.

      Schritt 2 — Erstellen der HTML-Datei

      Wenn Ihre CSS-Klassen definiert sind, können Sie diese auf einen Beispieltext anwenden.

      Erstellen und öffnen Sie eine Datei namens index.html in Ihrem bevorzugten Editor. Stellen Sie diese in den gleichen Ordner wie main.css

      Fügen Sie den folgenden Inhalt hinzu, der folgendes main.css als Ihr Stylesheet assoziiert, und wenden Sie dann Ihre Klassen auf einen Beispiel-Textblock an:

      ./index.html

      <!DOCTYPE HTML>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>How To Prevent Line Breaks with CSS</title>
      <link href="https://www.digitalocean.com/community/tutorials/main.css" rel="stylesheet">
      </head>
      
      <body>
      <p class="sammy-wrap"    > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
      
      <p class="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
      </body>
      </html>
      

      Sie haben dem ersten Textblock Ihren Standardumbruchsstil zugewiesen, Ihren nowrap -Stil dem Zweiten und den nowrap-Stil, der mit Ellipsis auf dem Dritten hidden ist. Sie haben sammy-wrap dem vierten Beispiel zugewiesen, aber Sie überschreiben den Standardumbruch, indem Sie nicht-umbrechende Leerzeichen (&nbsp;) direkt in das HTML einfügen. Wenn Sie Zeilenumbrüche im Einzelfall verhindern müssen, dann können nicht-unterbrechende Leerzeichen eine schnelle Lösung bieten.

      Öffnen Sie index.html in einem Webbrowser und sehen Sie Ihre Ergebnisse an. Ihre vier Textblöcke werden wie folgt erscheinen:

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indischer Mul mora cisco masu lachs, roosterfish requiem hak longnose lancetfish roter snapper Sacramento splittail riant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indischer Mul mora cisco masu lachs, roosterfish requiem hak longnose lancetfish roter snapper Sacramento splittail riant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indischer Mul mora cisco masu lachs, roosterfish requiem hak longnose lancetfish roter snapper Sacramento splittail riant danio.

      Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.

      Sie haben Ihre CSS-Eigenschaften erfolgreich angepasst, um Zeilenumbrüche in vier verschiedenen Modi zu verhindern oder zuzulassen.

      Zusammenfassung

      In diesem Tutorial haben Sie CSS verwendet, um Zeilenumbrüche in einem Textblock zu verhindern. Sie haben den Text innerhalb eines Rahmens formatiert und dann die Eigenschaft white-space hinzugefügt, um den Standard-Textumbruch zu überschreiben. Um mehr über die Handhabung von Textumbruch und white-space zu erfahren, denken Sie daran, alle Eigenschaften von white-space CSS zu erkunden.



      Source link

      Wie man einen Parallax Scrolling-Effekt mit Pure CSS in Chrome erstellt.


      Einführung

      Modernes CSS ist ein leistungsstarkes Werkzeug, mit dem Sie viele erweiterte Funktionen der Benutzeroberfläche (UI) erstellen können. In der Vergangenheit waren diese Funktionen auf JavaScript-Bibliotheken angewiesen.

      In diesem Leitfaden werden Sie einige CSS-Zeilen einrichten, um einen scrolling parallax -Effekt auf einer Webseite zu erzeugen. Sie werden Bilder aus placekitten.com als Platzhalter-Hintergrundbilder verwenden.

      Sobald Sie das Tutorial abgeschlossen haben, haben Sie eine Webseite mit einem reinen CSS scrolling parallax-Effekt.

      Warnung: Dieser Artikel verwendet experimentelle CSS-Eigenschaften, die nicht browserübergreifend funktionieren. Dieses Projekt wurde getestet und funktioniert auf Chrome. Diese Technik funktioniert nicht gut in Firefox, Safari und iOS aufgrund der Optimierungen einiger dieser Browser.

      Schritt 1 — Erstellen eines neuen Projekts

      In diesem Schritt verwenden Sie die Befehlszeile, um einen neuen Projektordner und -Dateien einzurichten. Öffnen Sie zunächst Ihr Terminal und erstellen Sie einen neuen Projektordner.

      Geben Sie den folgenden Befehl ein, um den Projektordner zu erstellen.

      In diesem Fall haben Sie den Ordner css-parallax bezeichnet. Wechseln Sie nun in den Ordner css-parallax:

      Erstellen Sie als Nächstes eine index.html -Datei in Ihrem Ordner css-parallax mit dem Befehl nano:

      Sie werden das gesamte HTML für das Projekt in diese Datei einfügen.

      Im nächsten Schritt beginnen Sie, die Struktur der Webseite zu erstellen.

      Schritt 2 — Einrichten der Anwendungsstruktur

      In diesem Schritt fügen Sie das HTML hinzu, das benötigt wird, um die Struktur des Projekts zu erstellen.

      In Ihrer Datei index.html fügen Sie den folgenden Code hinzu.

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Dies ist die grundlegende Struktur der meisten Webseiten, die HTML verwenden.

      Fügen Sie den folgenden Code in die <body> Funktion ein:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Dieser Code erstellt drei verschiedene Abschnitte. Zwei werden ein Hintergrundbild haben, und einer wird ein statischer, einfacher Hintergrund sein.

      In den nächsten Schritten fügen Sie die Stile für jeden Abschnitt mit den Klassen hinzu, die Sie in HTML verwenden.

      Schritt 3 — Erstellen einer CSS-Datei und Hinzufügen von Initial-CSS

      In diesem Schritt erstellen Sie eine CSS-Datei. Dann fügen Sie die Initial-CSS hinzu, die benötigt wird, um die Website zu gestalten und den Parallax-Effekt zu erstellen.

      Erstellen Sie als Nächstes eine styles.css -Datei in Ihrem Ordner css-parallax mit dem Befehl nano:

      Hier legen Sie alle CSS an, die für den Parallaxen-Scrolling-Effekt erforderlich sind.

      Als Nächstes beginnen Sie mit der Klasse .wrapper. In Ihrer Datei styles.css fügen Sie den folgenden Code hinzu:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Die Klasse .wrapper legt die Perspektive und die Scroll-Eigenschaften für die gesamte Seite fest.

      Die Höhe des Wrappers muss auf einen festen Wert eingestellt werden, damit der Effekt funktioniert. Sie können die viewport-Einheit vh auf 100 einstellen, um die volle Höhe des Ansichtsfensters des Bildschirms zu erhalten.

      Wenn Sie die Bilder skalieren, fügen Sie dem Bildschirm eine horizontale Bildlaufleiste hinzu, so dass Sie diese deaktivieren können, indem Sie overflow-x: hidden; hinzufügen. Die perspective Eigenschaft simuliert den Abstand vom Viewport zu den Pseudo-Elementen, die Sie im CSS erstellen und weiter transformieren.

      Im nächsten Schritt fügen Sie weitere CSS hinzu, um Ihre Webseite zu gestalten.

      Schritt 4 — Hinzufügen von Stilen für die .section Klasse

      In diesem Schritt fügen Sie Stile der Klasse .section hinzu.

      In Ihrer Datei styles.css fügen Sie den folgenden Code unterhalb der wrapper-Klasse hinzu:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      Die Klasse .section definiert die Größe, Anzeige und Texteigenschaften für die Hauptabschnitte.

      Legen Sie eine Position relativ fest, damit das untergeordnete Element .parallax::after absolut bezogen auf das übergeordnete Element .section positioniert werden kann.

      Jeder Abschnitt hat eine Ansicht-Höhe(vh) von 100 ,um die volle Höhe des Ansichtsfensters einzunehmen. Dieser Wert kann geändert und für jeden Abschnitt auf die von Ihnen gewünschte Höhe eingestellt werden.

      Schließlich werden die restlichen CSS-Eigenschaften verwendet, um den Text innerhalb jedes Abschnitts zu formatieren und zu gestalten. Das positioniert den Text in der Mitte jedes Abschnitts und fügt eine Farbe Weiß hinzu.

      Als Nächstes fügen Sie ein Pseudo-Element hinzu und gestalten es so aus, dass der Parallaxen-Effekt in zwei Bereichen in Ihrem HTML erstellt wird.

      Schritt 5 — Hinzufügen von Stilen für die .parallax -Klasse

      In diesem Schritt fügen Sie Stile der .parallax -Klasse hinzu.

      Zuerst fügen Sie ein Pseudo-Element in der zu gestaltenden .parallax -Klasse hinzu.

      Anmerkung: Sie können MDN-Web-Dokumente aufrufen, um mehr über CSS zu erfahren.

      Fügen Sie den folgenden Code unterhalb der .section -Klasse hinzu:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      Die .parallax -Klasse fügt ein ::after -Pseudo-Element dem Hintergrundbild hinzu und liefert die für den Parallaxen-Effekt erforderlichen Transformationen.

      Das Pseudo-Element ist das untergeordnetste Element mit der Klasse des .parallax.

      Die erste Hälfte des Codes zeigt und positioniert das Pseudo-Element. Die transformierende Eigenschaft verschiebt das Pseudo-Element zurück von der Kamera auf dem z-index und skaliert es dann wieder nach oben, um das Ansichtsfenster auszufüllen.

      Da das Pseudo-Element weiter entfernt ist, scheint es sich langsamer zu bewegen.

      Im nächsten Schritt fügen Sie die Hintergrundbilder und den statischen Hintergrundstil hinzu.

      Schritt 6 — Hinzufügen der Bilder und des Hintergrunds für jeden Abschnitt

      In diesem Schritt ergänzen Sie die endgültigen CSS-Eigenschaften, um die Hintergrundbilder und die Hintergrundfarbe des statischen Abschnitts hinzuzufügen.

      Fügen Sie zunächst eine einfarbige Hintergrundfarbe dem .static Abschnitt mit dem folgenden Code nach der Klasse .parallax::after hinzu.

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Die .static Klasse fügt dem statischen Abschnitt, der kein Bild hat, einen Hintergrund hinzu.

      Die beiden Abschnitte mit der .parallax -Klasse haben auch eine zusätzliche Klasse, die für jeden Bereich anders ist. Verwenden Sie die Klassen .bg1 und .bg2, um die Kätzchen-Hintergrundbilder hinzuzufügen.

      Fügen Sie den folgenden Code unterhalb der .static Klasse hinzu:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Die .bg1, .bg2-Klassen fügen die jeweiligen Hintergrundbilder für jeden Abschnitt hinzu.

      Die Bilder sind aus der placekitten -Webseite. Es handelt sich um einen Bilderservice von Kätzchen zur Verwendung als Platzhalter.

      Nachdem nun der gesamte Code für den Parallax Scrolling-Effekt hinzugefügt wurde, können Sie Ihre Datei styles.css mit Ihrer index.html verlinken.

      Schritt 7 — Verknüpfen von styles.css und Öffnen von index.html in Ihrem Browser

      In diesem Schritt verknüpfen Sie Ihre Datei styles.css und öffnen das Projekt in Ihrem Browser, um den Parallax Scrolling-Effekt zu sehen.

      Fügen Sie zunächst den folgenden Code dem <head>-Tag in der Datei index.html hinzu.

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Jetzt können Sie Ihre Datei index.html in Ihrem Browser öffnen:

      Scrolling Parallax-Effekt-GIF

      Damit haben Sie eine funktionierende Webseite mit einem Scrolling-Effekt eingerichtet. Sehen Sie sich dieses GitHub-Repository an, um den vollen Code zu sehen.

      Zusammenfassung

      In diesem Artikel haben Sie ein Projekt mit einer index.html und einer Datei styles.css eingerichtet und haben nun eine funktionsfähige Webseite. Sie haben die Struktur Ihrer Webseite hinzugefügt und Stile für die verschiedenen Abschnitte auf der Seite erstellt.

      Es ist möglich, die von Ihnen verwendeten Bilder oder den Parallax-Effekt weiter weg zu legen, damit sie sich langsamer bewegen. Sie müssen die Pixelmenge in den Eigenschaften perspective und transform ändern. Wenn Sie nicht möchten, dass ein Hintergrundbild überhaupt scrollen soll, verwenden Sie background-attachment: fixed; anstelle von perspective/translate/scale.



      Source link