CSS Lichterkette als Border?

Hallo, für ein Schulprojekt muss ich eine Adventkalenderwebsite programmieren und designen. Jedenfalls habe ich ein kleines Fenster (Div), dass ich gerne mit einer Lichterkette umranden würde (gerne animiert). Ich habe bereits mit border-image herumprobiert, jedoch hat es nicht wirklich gut geklappt. Habt ihr eine Lösung?

1 Antwort

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, programmieren

26.11.2023, 09:54

Du kannst die Lichterkette via SVG zeichnen und animieren. Die Grafik kann anschließend als border-image verwendet werden (Beispiel).

Alternativ könntest du die Lichterkette auch mit JavaScript auf einem canvas-Element zeichnen (entweder direkt mit der Canvas API oder du nutzt eine Bibliothek wie p5.js). Das div-Element muss relativ dazu positioniert werden.

Beispiel:

<div style="position: relative">
  <canvas height="400" width="600"><!-- rectangle with bubbles ... --></canvas>
  <div style="left: 10px; position: absolute; top: 10px">Some text</div>
</div>

Ähnliche Beiträge

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

HTML buttons zwei auf einer seite?

ich programmiere gerade in html und möchte auf einer seite zwei buttons haben die jeweils auf eine andere html seite verlinken. das problem ist aber das diese ja den gleichen anchor tags brauchen also <a href="seite2.htmll">seite zwei</a>.

aber wenn ich beide mit dem gleichen tag also "a" mache kann ich beim css nicht beide individuell designen und beide Buttons sehen gleich aus.

wie kann man das fixen?

...zum Beitrag

Weissen Rand auf html Webseite entfernen?

Ich bin gerade dabei eine Webseite zu programmieren.

Wenn ich den body bei css anspreche und dann baclground image: url (bild); dann erscheint um die navleiste einen Rand was ich nicht möchte

Füge ich aber das bild im body teil ein und setze padding, border, margin auf 0 und height und width auf 100% dann habe ich auf der weissen Seite einen Rand.

Wie kann ich diesen Rand loswerden?

...zum Beitrag

Wie geht das mit CSS?

Ich kann deswegen nicht einfach ein größeres Div mit Border rundherum machen, weil ich will, dass dieser Border aktiv wird wenn man z.B. drüber hovert oder auf einen Knopf klickt. Es gibt viele Knöpfe. Und der Knopf auf den man sich gerade konzentriert, der soll halt einen Border bekommen -> aber mit viel Abstand. Margin und Padding habe ich beides ausprobiert, bewirkt nicht was ich wollte.

...zum Beitrag

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

...zum Beitrag

Könnte ich mich nach der Schule direkt bei einer Agentur bewerben (Web Developer)?

Hallo!

Derzeit bin ich in der 10. Klasse. Ich programmiere schon seit einigen Jahren Webseiten und kann so ziemlich alles, was man braucht (HTML, CSS, Tailwind, Firebase, Figma, React, ...). Ich habe auch schon Webseiten für kleine Läden und so erstellt. An Kenntnissen mangelt es also nicht.

Außerdem mache ich bald ein Praktikum bei einer Agentur, welche eben auch für Kunden Webseiten, Designs und so erstellt.

Glaubt ihr, dass ich trotzdem so etwas wie ein Studium oder so brauche, um einen Job zu bekommen? Ich persönlich empfinde es als unnötig, da ich in so einem Studium sowieso nichts lernen würde, was wichtig für mich wäre. Interessiert es den Arbeitgeber überhaupt, wenn ich sowieso schon Webentwicklung kann?

VG Weißbrot

...zum Beitrag

Wieso funktioniert dieser CSS-Ladebalken nicht?

Folgendes Problem: Ich hab hier eine Seite, die normalerweise einen Ladebalken generieren sollte. In der Style.css ist es wie folgt definiert:

.loader {

position: relative;

}

.loader::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: 100%;

border-top: 5px solid red;

border-left: 3px solid brown;

border-bottom: 1px solid purple;

border-right: transparent;

animation: spinner 0.8s linear infinite;

}

@keyframes spinner {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

In der Page selbst hab ich dann: <div class="loader">Ladebalken</div>

Die Loaderclass oben ist nur ein Beispiel. Ich hab es auch schon mit anderen Einstellungen probiert.

Nach allem was ich so finde und bisher verstanden habe müsste auf der Webseite eigentlich an der entsprechenden Position ein animierter Ladebalken angezeigt werden, wird es aber nicht, sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund. Die Style.css ist korrekt verlinkt, alle anderen Elemente wie z.b Buttons werden korrekt angezeigt.

Wo liegt das Problem bzw. woran könnte das liegen?

...zum Beitrag

Bild als Cursor verwenden bei HTML?

also, wir müssen eine Website für ein Schulprojekt programmieren (IT-Schule) und ich wollte für den Vibe ein Image als Cursor einfügen. Auf mehreren Websites (und auch Chat GPT) hat es mir Code Beispiele gegeben, bzw war das eh immer derselbe, aber es funktioniert halt nd.

das wäre jz mein CSS bis jetzt,

und das zeigt es mir im Browser in der Konsole an (ich verwende Firefox), also der Code kann ja auf das Bild zugreifen.

Was ist das jetzt das Problem?

...zum Beitrag

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zum Beitrag

JavaScript/html2pdf: Wieso werden die Seiten nicht richtig gedruckt?

Hi, ich möchte mit JavaScript und den Bibliotheken JsBarcode und html2pdf Barcodes generieren, einen Text oberhalb des Barcodes ausgeben und diesen dann als PDF speichern, um damit Etiketten mit Barcodes zu drucken.

Leider habe ich dabei aber das Problem, dass meine Seiten immer weiter nach oben geschoben werden und somit dann ein Label auf zwei Seiten gedruckt wird.

Kennt jemand das Problem oder kann mir dabei helfen?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html2pdf</title>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
      .label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 60mm;
        height: 30mm;
        margin: 0;
        padding: 0;
      }

      .label-text-center {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
      }

      svg {
        width: auto;
        height: 60%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper" id="element-to-print">
      <div class="label">
        <p class="label-text-center">headline01</p>
        <p class="label-text-center">headline01</p>
        <svg id="barcode" class="label-image-center"></svg>
      </div>
    </div>
    <script>
      // Generiere Barcodes für alle SVGs mit der Klasse "barcode"
      JsBarcode("#barcode", "5901234123457", { format: "EAN13" });

      // PDF-Optionen
      var opt = {
        margin: 0,
        filename: 'barcodes.pdf',
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: { scale: 2 },
        jsPDF: { unit: 'mm', format: [60, 30], orientation:'landscape' }
      };
      // Erstelle das PDF und speichere es
      html2pdf().set(opt).from(document.getElementById('element-to-print')).save();
    </script>
  </body>
</html>

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

CSS lädt bei XAMPP-Localhost-Webseite nicht?

Ich programmiere seit knapp einem Jahr mit XAMPP und hatte auch nie Probleme damit. Jedoch ist es seit einigen Tagen so, dass die die .css-Datei zwar in den Browser geladen wird, aber keine Änderungen an dem Design von der .php-Webseite vornimmt.

Ich habe schon Rechner-/Browserwechsel probiert, aber es will einfach nicht funktionieren.

Danke schon einmal im Voraus für die Antworten.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen