Webdesign / Tipps / Schriftrolle mt Web Fonts [IE|M|O|G]

von: Werner Zenk

Eine Schriftrolle mt Web Fonts.
Mit einem kleinen Trick lässt sich auf ein Papier schreiben, das keinen geraden Rand hat.
Dazu wird einfach padding: 70px 10px 60px 45px;  (top, right, bottom, left = Reihenfolge im Uhrzeigersinn) innerhalb der CSS Anweisung notiert.

Demo:

Hintergrundbild: schriftrolle.png herunterladen


Quelltext: „schriftrolle.htm”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44		 <!DOCTYPE html>
<html>
 <head>
  <title>Schriftrolle</title>

<link rel="stylesheet" type="text/css"
 href="http://fonts.googleapis.com/css?family=Indie+Flower&subset=latin">

<style type="text/css">
.schriftrolle {
 background-image: url(schriftrolle.png);
 background-position: top left;
 background-repeat: no-repeat;
 width: 375px;
 height: 535px;
}

.schrifttext {
 font-family: "Indie Flower";
 font-size: 20px;
 font-weight: bold;
 padding: 70px 10px 60px 45px;
}
</style>

 </head>
<body>

<div class="schriftrolle">
<div class="schrifttext">

<p> Lorem ipsum dolor sit amet Nunc a id neque adipiscing dui 
malesuada mauris dolor eros aliquam ac at id pellentesque turpis 
sodales consectetuer ut sem Vivamus urna augue rutrum tempus. </p>

<p> Nibh malesuada consequat Sed tortor lacus risus interdum Nunc 
Phasellus consequat congue nonummy sem Lorem Sed justo Phasellus 
leo id at consequat ligula dui pede. </p>

</div>
</div>

</body>
</html>
    Und Ihre Meinung?
      Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?  
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!  
 Das könnte Sie interessieren:
Eingabefeld mit Schatten  Bildformat PNG  Der lange Weg zum guten Webdesigner  Hintergrundbild in Position  Bildformat JPG  Abstand Gewinnen! - Ein Problem auf Webseiten ist immer der Abstand von einem Objekt zum anderen. Es gibt viele Möglichkeiten wie Sie diesen Abstand beeinflussen können.  Gratis-Webfonts von Google - Webfonts mit Textschatten. Mit den Google Web Fonts haben Sie die Möglichkeit eine ganze Reihe von Schriften auf Ihrer Webseite zu nutzen, ohne dass Sie diese auf den Server hochladen müssen.  Weicher Farbübergang in Containern  Tabellenbild 2  Barrierefreie Homepageseiten   …mehr
© 2000-2012 Homepage-Total.de Kontakt - Impressum - Banner