Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Dienstag, 31. Mai 2016

Modalbox ohne Javascript

lulu
Das heutige Tutorial stammt von Annis6. Vielen Dank dafür!

Modalboxen gibt es in den unterschiedlichsten Variationen. Entweder sie werden als Hinweisboxen verwendet oder enthalten Daten von Charakteren oder zeigen ein bestimmtes Objekt genauer. Meist sorgt ein Javascriptcode für das auftauchen bzw. verschwinden der Box und das Aussehen bestimmt unser gutes CSS. Dank CSS3 jedoch haben wir die Möglichkeit eine Modalbox ohne die Verwendung von Javascript zu erstellen! Die Dateien und eine Vorschau zu diesem Tutorial findet ihr am Ende dieses Beitrages.

Das Hilfsmittel dazu ist der Selektor :target. Target kommt aus dem Englischen und bedeutet Ziel. Mit :target überprüft man einen Ankeridentifikator mtihilfe einer ID.

Als Beispiel:
Du hast eine Box mit der Klasse ‚box‘ und die ID ‚box_1‘. Der CSS Code sieht wie folgt aus:

.box {
    display: none;
    width: 250px;
    height: 150px;
 
    font-size: 0.85em;
    font-family: Verdana;
}

.box:target {
    display: block;
}

Hast du einen Link angeklickt, welcher folgendermaßen aussieht:
<a href=#box_1“>Klick mich!</a>

So wird die Box durch die ID angesprochen und das display ist dann block! So wird auch die Modalbox durch dieses Prinzip erstellt!


Schritt 1: Die Box!


Zuerst machst du dir Gedanken darüber, wie die Box aussehen soll. Daher wäre es sinnvoll, sie sichtbar zu halten, solang du mit dem Design deiner Modalbox nicht zufrieden bist.
Ich habe mich für folgenden Stylesheet entschieden:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    opacity:1; /* Erst auf 1 um die Modalbox zu sehen und stylen zu müssen, später auf 0 setzen */
    pointer-events: none;
}
.modal_header {
    margin: auto;
    padding: 2px;
    text-transform: uppercase;
    background-color: #adadad;
}

.modal_container {
    position: relative;
    width: 60%;
    margin: 10% auto;
    padding: 1%;
    background-color: #fff;
}

Mein dazugehöriger HTML Code sieht so aus:

<div id="open" class="modalDialog">
    <div class="modal_container">
         <a href="#close" title="Close" class="close">X</a>
        <div class="modal_header">
            Überschrift
        </div>
        Hier kommt der Text in der Modalbox hinein. Lass dir was einfallen ;)
    </div>
</div>

2. Schritt der "Auftaucheffekt"!


Mit dem Befehl "display" kann man dies auch bewerkstelligen, aber mit einem übergleitenden Effekt benötigt man zum Beispiel opacity . Folgendes musst du in deinen Code einfügen:

Bei modalDialog das opacity auf 0, sodass die Box unsichtbar ist. Hinzu fügst du zu dem Code folgende Zeilen hinzu:
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;

Dieser Code für den Übergangseffekt bezieht sich aber nur auf die Änderung in opacity. Möchtest du noch etwas hinzufügen oder ändern, ersetzt das opacity durch etwas anderes oder nutzt das all, sodass er auf alle Änderungen, die darin passieren, Rücksicht nimmt.

3. Schritt: Der Ausgang


Nun hast du in deiner Modalbox den Übergang, aber noch nicht das Ziel, wie es nach dem Klick aussehen sollte! Dafür erstellst du einen Code, welcher folgendermaßen lautet:
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

Zu guter Letzt noch einen Link um die Modalbox zu aktivieren:
<a href="#open">Open Modal</a>

4. Schritt: Close Button


Man möchte ja auch wieder die Modalbox schließen können dazu fügst du im CSS folgendes ein:


.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}


So und nun nochmal der ganze Code als Abschluss! Der HTML-Code für die Modalbox:

<a href="#open">Open Modal</a>
<div id="open" class="modalDialog">
    <div class="modal_container">
        <a href="#close" title="Close" class="close">X</a>
        <div class="modal_header">
            Überschrift
        </div>
        Hier kommt der Text in der Modalbox hinein. Lass dir etwas einfallen ;)
    </div>
</div>



Der Style für deine .css:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    opacity:0; /* Erst auf 1 um die Modalbox zu sehen und stylen zu müssen, später auf 0 setzen */
    pointer-events: none; -webkit-transition:opacity 500ms ease-out;
    -moz-transition:opacity 500ms ease-out;
    -o-transition:opacity 500ms ease-out;
    transition:opacity 500ms ease-out;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modal_header {
    margin: auto;
    padding: 2px;
    text-transform: uppercase;
    background-color: #adadad;
}
.modal_container {
    position: relative;
    width: 60%;
    margin: 10% auto;
    padding: 1%;
    background-color: #fff;
}

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -5px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover {
     background: #00d9ff;
}


Fertig ist die Modalbox
Inspiration für dieses Skript ist dieser Code: http://jsfiddle.net/raving/1mhsynmw/

Fertiger Code downloaden


Sonntag, 29. Mai 2016

Cutenews

lulu
Vor langer  Zeit habe ich schon einmal über Alternativen für Cutenews geschrieben. Heute geht es allerdings nicht um Alternativen, sondern um Cutenews selbst.

Nochmal kurz zur Auffrischung: Cutenews ist ein kostenloses Tool, dass du installieren kannst, um deine News zu verwalten. Das Prinzip ist sehr einfach: du downloadest die benötigten Dateien, ladest diese auf deiner Homepage hoch und richtest CuteNews ein.

Hört sich einfach an. Ist aber oft mit Problemen verbunden. Meine liebe Yuki hat auf PinkPearl aus diesem Grund ein paar Tutorials geschrieben.


Im zweiten Teil des Tutorials (Cutenews Design) erklärt Yuki, wie du News Skins verwenden kannst. Diese gibt es unter anderem auf 

Im dritten Teil des Tutorials (Cutenews Einstellugnen/Smileys) erklärt Yuki, wie du Smileys einbinden kannst. Diese findest du unter anderem auf



Doch was ist mit Cutenews eigentlich alles möglich? Ich habe mich unter den Mitgliedern umgesehen und habe heute für euch ein paar Cutenews Designs. Lass dich inspirieren <3


Cutenews Design von Yuki/Mirrored

Cutenews Design von Reika/Alunaria
Cutenews Design von Yuki/Prism Breaker

Cutenews Design von Lini/Lini-Graphics

Cutenews Design von Seth/Antiheroes


Cutenews Design von Yuki/Mengjian

Cutenews Design von Satsuki/Erdbeerkirsch

Cutenews Design von Reika/Auroria

Freitag, 27. Mai 2016

Ressourcen für dich: blau

lulu
"Blau, blau, blau sind alle meine Grafiken..." Oder so ähnlich :) Heute habe ich wieder ein paar Ressourcen für euch zusammen gesucht. Dieses Mal zum Thema: "Blau". Ich hoffe sie gefallen euch ^__^ Bitte verlinkt den jeweiligen Ersteller, sobald ihr etwas verwendet.

Texturen

Texturen von Jennistock

Texturen von silver-

Textur von xnienke

Textures von jessiesquash

Icon Texturen

Icon Texturen von jessiesquash


Texturen von kagychan

Texturen von kagychan


Icon Bases

Alle Bases sind von PinkPearl.

                                                   

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates