Wie man eine Div-box 3D-look

Dies ist, was ich habe, so weit:

 <style type="text/css">
.signupsubmit {
        line-height: 32px;
        position: absolute;
        left: 36px;
        color: white;
        top: 527px;
        font-family: arial;
        font-size: 17px;
        font-weight: 600;
        width: 137px;
        height: 30px;
        border-color: #00297A;
        border-radius: 4px;
        border: 1px solid black;
        border-style: solid;
        background-color: #FFB630;
        text-indent: 30px;
        }
<style>
<div class = "signupsubmit">Continue</div>

Kann mir jemand schreiben, ein Beispiel, wie man die Taste Weiter, schauen Sie 3D statt 2D?

Sie haben eine bestehende Webseite, z.B. der 3D Effekt, den Sie versuchen zu tun ?
Was meinst du 3D genau?
wenn Sie das Kontrollkästchen Facebook-Startseite, sehen Sie ein grünes Zeichen-up-Taste. Ich will etwas zu tun.
Sie können prüfen, die Taste sehr leicht in Chrom. Der Inspektor erzählt Sie jeden Stil angewendet. Lesen Sie diese: developers.google.com/web/tools/chrome-devtools/iterate/...
Ich bekomme, was du meinst, und ich weiß, wie das zu tun. Aber ich möchte, den code zu Bearbeiten, so wird die box Aussehen wird 3D knallen oben in Ihre Richtung.
Nun ich habe nicht bekommen, was Sie wollen 🙂 wollen Sie das gleiche Aussehen wie die facebook-Schaltfläche ? Wenn andere Sie haben, klarer zu werden.
ja, ich will das gleiche wie die Facebook-Taste.
Öffnen Sie Chrome, klicken Sie mit der rechten Maustaste auf die grüne Schaltfläche, die Sie wollen auf facebook die login-Seite und wählen Sie "Element Untersuchen". Dann ein panel angezeigt wird, beachten Sie auf der rechten Seite gibt es Registerkarten, klicken Sie auf die Computed tab (neben der Styles tab). Es wird die Liste JEDES CSS-Eigenschaft der Schaltfläche hat, so dass Sie nur kopieren, wenn du wirklich kopieren genau, wie es ist. Und dieses Verfahren der Inspektion Elemente ist der link, den ich dir schon gesagt.

InformationsquelleAutor Leo L. | 2015-10-18

css html

9

https://jsfiddle.net/zt2x0bct/

Fügen Sie einfach einen box-shadow. Wahrscheinlich der einfachste Weg:
```
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
```
Edit: Basierend auf Ihren Kommentar, klingt wie Sie sind auf der Suche für einen "Gradienten". Siehe aktualisierte Geige. Sie können auch eine online gradient generator zu helfen, mit diesem. Hier ist eine, die Sie können ändern Sie die "start" und "Ende" hintergrund-Farbe. Oder Sie können klicken Sie auf die "Schaufenster" finden Sie eine Schaltfläche, die in der Nähe, was Sie suchen:

http://css3button.net/
- Wenn Sie das Kontrollkästchen Facebook die sign-up-Seite, dort ist eine grüne Anmelde-Schaltfläche. Ich will etwas zu tun.
- Drücken Sie dann F12 (auf firefox) und wählen Sie die btuton auf der facebook-Seite. Sehen Sie die CSS 😉
- Siehe aktualisierte fiddle-link ein weiteres mal. Neue Schaltfläche "Verlauf" Hinzugefügt.
InformationsquelleAutor prograhammer

Danke Jungs für Eure Hilfe. Ich habe endlich die Antwort und ich schrieb es nieder. Dank Niloct für Sie guide auf mit element untersuchen.

<div class = "signupsubmit">Continue<div>
<style type = "text/css">
    .signupsubmit {
        webkit-appearance: none;
        align-items: flex-start;
        background-attachment: scroll;
        background-clip: border-box;
        background-color: #FFA500;
        background-origin: padding-box;
        background-size: auto;
        border-bottom-color: black;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-image-outset: 0px;
        border-image-repeat: stretch;
        border-image-slice: 100%;
        border-image-source: none;
        border-image-width: 1;
        border-left-color: black;
        border-left-style: solid;
        border-left-width: 1px;
        border-right-color: black;
        border-right-style: solid;
        border-right-width: 1px;
        border-top-color: black;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-top-style: solid;
        border-top-width: 1px;
        box-shadow: #80B2FF 0px 1px 1px 0px inset;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        cursor: pointer;
        direction: ltr;
        display: inline-block;
        font-family: 'Arial', 'Helvetica Neue', 'Segoe UI', 'Malgun Gothic', Meiryo, 'Microsoft JhengHei', helvetica, arial, sans-serif;
        font-size: 12px;
        font-stretch: normal;
        font-style: normal;
        font-variant: normal;
        font-weight: bold;
        height: 31px;
        letter-spacing: 1px;
        line-height: 15.12px;
        margin-bottom: 10px;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 10px;
        min-width: 194px;
        padding-bottom: 7px;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 7px;
        position: relative;
        text-align: center;
        text-indent: 0px;
        text-rendering: optimizeLegibility;
        text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;
        text-transform: none;
        width: 194px;
        word-spacing: 0px;
        writing-mode: lr-tb;
        -webkit-writing-mode: horizontal-tb;
        zoom: 1;
        left: 37px;
        top: 515px;
        position: absolute;
        }
</style>

InformationsquelleAutor Leo L.

Ich bin mir nicht sicher über 3D-aber Sie können es machen, wie wenn es in einer 3D-Umgebung mit "rotate" - Befehl.

CSS:

.signupsubmit {
    transform: rotateY(70deg) rotateX(70deg);
    -webkit-transform: rotateY(70deg) rotateX(70deg);
    transition: 2s;
        line-height: 32px;
        left: 36px;
        color: white;
        text-align: center;
        top: 527px;
        border: none;
        font-family: arial;
        font-size: 17px;
        font-weight: 500;
        width: 137px;
        height: 30px;
        border-radius: 2px;
        background-color: #FFB630;
        text-indent: 30px;
     box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
        }
        .signupsubmit:hover {   
-webkit-transform: rotateY(0deg) rotateX(0deg);
    transform: rotateY(0deg) rotateX(0deg);
}

HTML:

<button class="signupsubmit">continue</button>
<p>You can also make a smooth transition with transition: (ex:2s);</p>

InformationsquelleAutor Anthony

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.