Website Teil sieht aus als ob es schwebt?

Wie heißt das wenn auf einer Website z.b ein Button ist der mit Schatten etc so aussieht als würde er "schweben" oder eben nicht auf der gleichen "höhe" wie der Hintergrund sein ?

2 Antworten

Gho5txx

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

09.02.2021, 13:06

Ich denke was du meinst ist ein Schlagschatten

Bild zum Beitrag

(Bildquelle: https://www.tippscout.de/pixelmator-schlagschatten_tipp_6137.html)

Auf Websites wird das meist durch die CSS Eigenschaft "Box-shadow" oder den Filter "drop-shadow" erreicht.

Woher ich das weiß:Berufserfahrung – Webdesign in Drupal per Twig, Bootstrap und JS

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

09.02.2021, 13:05

overlay ?

Ähnliche Beiträge

website designen?

Hallo, ich habe eine Website programmiert, die sieht finde ich nicht schön aus. Kann man irgendwie eine eigene Navigationsbar designen oder eigene Buttons.?

Vielen Dank im voraus!

...zum Beitrag

Einen Teil von einer Website kopieren?

Ich finde, dass diese Brillenanimation auf der Website extrem cool aussieht und ich würde sie gerne auf einer website verwenden.

Kann man diesen Teil "Ausschneiden?" und dann selbst launchen? Und wie einfach wär das? Mir reicht schon, wenn diese Fragen mit ja nein beantwortet werden

https://www.dji.com/at/dji-fpv

Die Animation ist ca. ab einem viertel der Seite

...zum Beitrag

Bild als Hintergrund Bild in Website einbinden (HTML , CSS )?

Hallo,

Ich Programmiere gerade eine Website in Visual Studio Code und will hinter den Buttons(siehe Bild 2) ein Bild als Hintergrund haben. Nun habe ich das ganze so programmiert (siehe Bild 1) und auch das Bild in die Website Datei eingefügt und alles gemacht. Dennoch sieht das ganze wenn man den liveserver öffnet, so (siehe Bild 2 ) aus und es ist anstatt dem Foto nur das Foto jpg Symbol klein zu sehen . Wie kann ich das ändern so das ich das Bild sehen?

Vielen Dank

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

Bootstrap 2 Buttons nebeneinander?

HI,

bin derzeit dabei, meine Website neu zu erstellen und das über Bootstrap. Jetzt hab ich das Problem dass ich 2 Buttons habe, die ich einfach nicht nebeneinander mit Abstand dazwischen bekomme. Sie soll auch jeweils bündig mit den Textfeldern sein.

Kann mir da wer helfen?

Im Bild sieht man, wie es derzeit aussieht.

Hier noch der Code:

https://hastebin.com/ogakusujiz.scala

Dazu sei gesagt, dass ich Bootstrap Neuling bin.

...zum Beitrag

HTML: Untere Ebene trotz Bild darüber anklicken?

Hallo! Ich möchte ein Bild so über die Website legen, dass die Ränder verziert sind, man aber dort wo keine Verzierungen sind noch Buttons, Links, etc. anklicken kann.

Siehe: http://mg.dot-design.de/index.php

Dabei habe ich das Bild so über die Seite gelegt:

  <img src="overlay.png" style="width: 100%; height: 100%; position: fixed;">

...zum Beitrag

HTML CSS Bilder übereinander legen

Ich möchte zwei Bilder auf meiner Website übereinander legen. Dazu habe ich ganz normal z-index des oberen Bildes höher gestellt als des anderen. Ich möchte nicht mit position:absolute; etc. arbeiten, da die Website responsive sein soll/wird. Wie geht das bitte? :D nur mit z-index sind die beiden Bilder auf der Website nacheinander 'aufgelistet'..

Danke für Antworten :)

...zum Beitrag

CSS: Wie kann ich einstellen dass wenn ich mit dem Mausrad Scrolle dass es eine Seite herunter geht?

Hallo Leute

Ich möchte dass auf meiner Website, wenn man scrollt dass es quasi eine ganze Seite herunter geht. Ich habe jetzt kein Beispiel, auf welcher Seite es so aussieht, aber wenn man auf http://www.apple.com/ geht, sieht man ja eine Slideshow, ich möchte eigentlich dassselbe machen, halt einfach vertikal und mit Scrollen. Habt ihr eine Idee. Am liebsten nur mit CSS.

Danke für die Hilfe

Ranixi

...zum Beitrag

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zum Beitrag

HTML/CSS hintergrund gesplittet Schwarz weiß?

Hallo,

ich möchte den Hintergrund auf meiner Website gesplittet weiß mit einer Ecke schwarz haben.

(gewollte Ansicht der Seite)

Aktuell benutzte ich ein riesieges svg Rechteck um den Teil einzufärben und limmitiere die ansicht der seite auf die gewollte Ansicht, scheint mir aber eher ineffizient zu sein, gibts da eine bessere Methode das zu lösen?

(gesamt Ansicht der seite)

Hier der aktuelle code:

(die Koordinaten sind wahrscheinlich etwas merkwürdig weil ich sie mir von einem Programm passgenau hab berechnen lassen)

HTML:

   <svg class="black_bg">
      <rect fill="rgba(0,0,0,1)" id="Rechteck_29" rx="0"  ry="0" x="0" y="0" width="1175" height="1649">
      </rect>
   </svg>

css:

.black_bg {
   width: 1175px;
   height: 1649px;
   position: absolute;
   overflow: visible;
   transform: matrix(1,0,0,1,1744.92,-218.8203) rotate(24deg);
   transform-origin: center;
}

...zum Beitrag

HTML/CSS, Footer, Divs werden untereinander und nicht nebeneinander platziert?

Guten Abend. :)

Ich beschäftige mich momentan viel mit HTML und CSS und habe eine eigene kleine Website zum Spaß gemacht.

Aus Jux und Tollerei wollte ich jetzt einen Facebook-Like und einen -Teilen-Button mit einbauen, und das in einem Footer. Die Buttons habe ich beide jeweils in ein Div gepackt und diesen per "float: left;" gesagt, das sie sich nebeneinander von links anordnen sollen. Zumindest stand in sehr vielen anderen Foren in denen ich mich umgesehen habe so ziemlich überall genau das.

Bei mir funktioniert das aus unerfindlichen Gründen leider nicht, die Buttons werden untereinander angeordnet.

Zur Seite kommt ihr hier: http://nyancatmarathon.tk/

(Am Besten auf Lautlos stellen, nervige Musik im Hintergrund, außerdem hat sich der Footer von ganz unten in die Mitte der Seite verschoben, als ich die Seite am Localhost bearbeitet habe war das noch nicht so, komisch...)

Ich hoffe jemand von euch weiß woran es liegt und kann mir helfen. :)

Vielen Dank und LG, Bluedragon1

...zum Beitrag

Was ist besser?

Hallo, Ich versuche eine website zu machen: "https://thedarkonion.github.io/MyDrugs-2.0/index.html"

es geht um eine website für unterhaltung sie ist eine fan recreate von mydrugs.to (eine netflix serie) und es gibt mehrere seiten Die haupt page (Homepage, startseite) wo es einen button gibt "SHOP NOW" die zur anderen seite hinleitet zur shopseite (kein echter shop nur aus spass) aber wichtig jetzt ist die homepage oder startseite nähmlich der button nimmt mehr platz ein wie er eigentlich sollte Wenn ihr wollt könnt ihr aml auf die seite oben gehen das ist meine seite die ich meine. Der button ist in der mitte wenn man auf die seite geht sollte man es sehen. Und wenn man oben in der ecke Oder über den button (alle bereiche neben/unten/über/in der nähe) von den button ist kann man drauf klicken und man wird ungewollt weitergeleitet zu der website. Ich habe eine lösung gefunden Aller dings ist dann der button nicht mehr in der mitte sondern an der seite:

In der ecke der "SHOP NOW" button. Und da ist der button genau richtig ohne das man ungewollt weitergeleitet wird aber Normal ist es so:

der "SHOP NOW" button ist in der mitte was auch gut aussieht aber das problem ist: man kann in den angezeigten bereichen ausversehen weitergeleitet werden:

Also was ist besser?

...zum Beitrag

HTML/CSS Steam Website rebuild?

Hallo,

ich möchte gerne die aktuelle Webseite von Steam nachbauen, jedoch habe ich Schwierigkeiten mit dem Hintergrund der Seite. Obwohl die Pixel-Art am Anfang vorhanden ist, fehlt mir der untere Teil der Seite, insbesondere die Darstellung der Steine und Fische. Es wäre am besten, wenn ihr selbst auf die Seite geht, um mich besser zu verstehen.

Ich benötige das zweite Bild von der Seite, das als Hintergrund verwendet wird. Ich habe bereits versucht, es über den Source Code zu finden, war aber leider nicht erfolgreich. Ich zeige euch ein Bild, das ich bereits habe, und benötige lediglich den unteren Teil davon, den ihr auf der Steam-Seite sehen könnt. Dort werden Fische und Steine abgebildet.

Vielen Dank für eure Unterstützung!

...zum Beitrag

Custom 'Upload' Button?

Schönen guten Abend!

Ich baue derzeit eine kleine Website mit einer Upload Funktion für beispielsweise Videos und Bilder.

Dazu benötige ich das HTML-Element input mit dem Type file.

Während man beispielsweise normale Eingabefelder mit dem Type text etc. gut selbst 'darstellen' kann, fängt es beim type="file" schon an, dass man den Value des Buttons nicht selsbt bestimmen kann. Mal davon abgesehen, dass der im Button enthaltene Text von Browser zu Browser variiert.

Nun aber zur eigentlichen Frage:

Wie kann ich einen benutzerdefinierten File-Upload definieren?

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen