[CSS] Border-Image & Numbered Pages ✤✤✤

Ja, eigentlich schreib ich hier ja nicht mehr, aber ich hab das vor Kurzem gelernt und ich fand das so coolig, dass ich es einfach mit euch teilen muss, und ich hab grad echt keinen Bock zu lernen und will nicht lesen und an meiner Geschichte schreiben, reizt mich gerade auch nicht, also schreibe ich für meinen verlassenen Blog ein Tutorial. Es heisst nicht, dass ich wieder da bin, aber wenn ich gerade das Design von meinem Schreibblog ändere und dafür coole Sachen herausfinde, dann poste ich sie jetzt dennoch. Das ist in Ordnung, glaub ich zumindest. Ich vermiss das Bloggen hier, aber es ist besser so. Vielleicht im Sommer, wenn ich mit meinen Studien (wird jetzt übrigens Publizistik- und Kommunikationswissenschaften mit Nebenfach Anglistik werden) beginne, könnte ich den Blog aus dem Freeze zurückholen. Dann ist die Matur geschafft und ich hab zwar Eingewöhnungszeit in der Uni, aber davor sind ja noch fast drei Monate frei, also sollt's definitiv möglich sein.

So, die coolen Dinge, die ich euch zeigen will.
Zum einen ist das

border-image

sowie die Funktion numerierte Seiten eurem Blog hinzuzufügen.


Ihr seht, all das um den Blog herum ist mit

border-image

und diesem Bildi gemacht (da es weiss ist, kann ich's schlecht hier einfügen...)

Okay, wie geht das?
Als erstes braucht ihr ein Bild. Wenn ihr ein Element haben wollt, dass sich immer wiederholt, empfielt es sich sowas wie ich gemacht habe zu machen, also einmal alle Ecken und jede Kante, das wäre dann die kleinstmögliche Box. Um euch die ganze Technik dahinter zu erklären arbeite ich jetzt aber mit einem Bild, das so aussieht:



Bei

boder-image

wird das Bild in neun Teile zerschnitten. Jede Ecke, jede Seite und die Mitte.
Der Code schaut so aus:

Als erstes definiert ihr allgemein einen Rand, sowie die einzelnen Breiten. In meinem Fall

border-style: solid;
border-width: 28px 25px 27px 34px;

Dann kommt das eigentliche. Ihr fragt euch jetzt aber bestimmt, was die vier Zahlen sollen, das sind eure Dimensionen.
Ihr seht, dass ich die Ränder hier abgetrennt habe.
Ihr müsst euch vorstellen, dass ihr Linien setzt.
Als erstes schreibt ihr dann den Abstand von oben, dann den Abstand von Rechts, von unten und von links. (einmal im Kreis ^^)
Diese einzelnen Teile werden dann wiederholt. In den Ecken werden die Ecken platziert, wenn ihr die Fläche füllen wollt, wird der Mittelteil gefüllt und die Randteile könnt ihr entweder mit

repeat

,

round

oder

stretch

füllen. Bei repeat wird das Stück einfach wiederholt. Bei Round wird es so angepasst, dass nur ganze Teile eingesetzt werden, das bedeutet, dass die Grösse etas verändert werden kann. Bei Stretch wird die ganze Seite auf die Länge der Box gedehnt.

Ausschauen tut das ganze nun so.

Und mit den "Rüschen" könnt ihr's euch auch noch ansehen:
hier


Und nun zu den numerierten Seiten.
Das Tutorial hab ich auf English gefunden; hier
aber ich mach noch ne kurze, deutsche Version:

Für die CSS sucht ihr nach

</b:skin>

Meine schaut so aus, aber das könnt ihr natürlich nach eurem Geschmack ändern:
.pagenavi{
clear:both;margin:10px auto;text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#DEA0A8;
color:#fff;
text-decoration:none
}
.pagenavi .pages{
display: none;
}

.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{
border:none
}


Sucht nach:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Darunter:
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

Dann sucht ihr nach:
<!-- navigation -->
<b:include name='nextprev'/>

und ersetzt die Zeilen durch:
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Dann auf Vorschau und ansehen. Wenn's geklappt hat, seid ihr fertig, sonst muss irgendwie was falsch sein. ^^

Oh und seht zu, dass ihr den ganzen Code anzeigt, also oben das Häkchen macht.

So, und jetzt verzieh ich mich wieder. ;D

Bye bye