• Es freut uns dass du in unser Minecraft Forum gefunden hast. Hier kannst du mit über 130.000 Minecraft Fans über Minecraft diskutieren, Fragen stellen und anderen helfen. In diesem Minecraft Forum kannst du auch nach Teammitgliedern, Administratoren, Moderatoren , Supporter oder Sponsoren suchen. Gerne kannst du im Offtopic Bereich unseres Minecraft Forums auch über nicht Minecraft spezifische Themen reden. Wir hoffen dir gefällt es in unserem Minecraft Forum!

jQuery, CSS etc. Login Page

VentByte

VentByte

Minecrafter
Registriert
5 März 2016
Beiträge
18
Diamanten
300
Minecraft
UncleSnycs
Hallo ich habe letztens ein Wordpress Plugin entdeckt, dass eigentlich als Wartungsmodusplugin gedacht ist, aber eine eingebaute Login Funktion hat. Diese Seite, die das Plugin erstellt gefällt mir relativ gut und ich möchte sie für ein Projekt nachbauen. Da ich derzeit noch relativ wenig Ahnung von Webprogrammierung (php, jQuery, CSS (auch wenn das nicht direkt Programmiersprachen sind)) habe, wollte ich einfach mal nachfragen ob es schwierig ist soetwas zu realisieren. Ich habe sowohl das Plugin als auch die Seite hier verlinkt.

Wäre froh, wenn mir jemand sagen kann, mit welchen Sprachen das am besten/einfachsten geht, oder falls jemand Langeweile hat, mir die Seite nachzubauen.

Den Login/Register hab ich schon fertig. Bräuchte also nur noch das Design.

Mit freundlichen Grüßen

Snycs
 
Sortiere nach Datum Nach Stimmen sortieren
TheSimufreak

TheSimufreak

Kuhfänger
Registriert
28 Juni 2012
Beiträge
78
Diamanten
0
Ich bin zwar kein Experte was jQuery angeht, aber ich denke mal dass das bis auf den Hintergrund, der sich beim ausklappen nach hinten verschiebt, keine allzu große Herausforderung darstellen sollte. Hier ein Link wie du Elemente drehen lassen kannst

Update:
Das hier kann dir da vielleicht weiter helfen

Update 2:
In der CSS Datei habee ich folgendes gefunden
CSS: 
body.open-login-form > .main-container {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -ms-transform:  perspective(1920px)  rotate3d(0, 1, 0, 9deg);
    -webkit-transform:  perspective(1920px) rotate3d(0, 1, 0, 9deg);
    transform:   perspective(1920px) rotate3d(0, 1, 0, 9deg);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
 
}

Noch ein Update :D
Habe dir für den Hintergrundeffekt ein kleines Beispielprojekt gebastelt, aus dem du dir dann die benötigten Sache abschauen kannst. Zum Ausprobieren einfach in eine HTML Datei kopieren und mit einem anderen Browser als IE öffnen ;)
HTML: 
<html>
<head>

<style>
#square{
    height: 480px;
    width: 320px;
    background-color: blueviolet;
    background-image: url('http://media-cache-ak0.pinimg.com/736x/76/bf/d6/76bfd66cd411e9ca67c85c9e002d3894.jpg')
}

.tilt_front{

    transform-origin: 0 50%;
    transform: rotate3d(0,1,0,0deg) perspective(0px);
    transition: 1s transform;

}

.tilt_back{

    transform-origin: 0 50%;
    transform: perspective(600px) rotate3d(0,1,0,50deg);
    transition: 5s transform;

}

</style>

<script>

function tiltBack(element){    document.getElementById(element).className = 'tilt_back'; }

function tiltFront(element){ document.getElementById(element).className = 'tilt_front';}


</script>

</head>
    <body>
      <div style="background-color: red; width: 320px; height: 480px; background: url('http://nerdreactor.com/wp-content/uploads/2014/05/doctor-who-tenth-cubicle.jpg') -150px 0;">
        <div id="square"></div>
      </div>
      </br>
      </br>
      <button onClick="tiltBack('square');">Open Tardis</button>
      <button onClick="tiltFront('square');">Close Tardis</button>
    </body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Positive Stimme 0 Negative Stimme
TheSimufreak

TheSimufreak

Kuhfänger
Registriert
28 Juni 2012
Beiträge
78
Diamanten
0
Snycs schrieb:
du hast mir sehr weiter geholfen^^
Zum Vergrößern anklicken....
Das hört man gerne :)

Da müsstest du einen Container definieren und den mit jQuery oder der translate-transformation von CSS3 umherschieben:
jQuery: weiter unten auf der Website sind Beispiele. Da kannst du dann z.B. mit margin arbeiten:

Javascript: 
#login_panel{

margin-left:100px;

}

. . .

$("#login_panel").animate({
margin-left:  0px;
}, 1000, function(){});

CSS3:
HTML: 
.login_panel{

transformation: translate(-100px, 0);
transition: 1s transformation;

}

So wird das Panel um 100 Pixel nach Links verschoben.
 
Positive Stimme 0 Negative Stimme
Oben