Artikel-Schlagworte: „webdesign“

CSS mit Particular Attributes (Elemente mit “besonderer” Eigenschaft)

Freitag, 6. Juni 2008

Was sind eigentlich Particular Attributes? Darunter versteht man Attribute in einer Webseite, die spezielle Werte aufweist. Es ist eine unbekanntere Form bei der CSS-Formatierung, da wesentliche Bestandteile auch erst mit CSS 3 vollständig unterstützt werden. Die nahmhaften Browser ab Internet Explorer 7, sowie Firefox, Opera und Safari beherrschen diese Funktion allerdings schon vollständig.

Folgende Formen der Particular Attributes gibt es:

1. Attribute mit Wert

Element[Attribute]
Das Element enthält ein Attribute mit einem Wert.

  1. <!– Beispiel - der Link, der das Attribute href enthält bekommt einen grünen Rahmen –>
  2. <style>
  3.   #test1 a{border:1px solid red;padding:5px}
  4.   #test1 a[href]{border:1px solid green}
  5. </style>
  6. <div id="test1"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>
  7. <a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt">Pyades</a>

2. Attribute mit bestimmten Wert

Element[Attribute="Wert"]
Das Element enthält ein Attribute mit einem bestimmten Wert.

  1. <!– Beispiel - der Link, der als href genau den Wert "http://www.pyades.com" hat, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test2 a{border:1px solid red;padding:5px}
  4.   #test2 a[href="http://www.pyades.com"]{border:1px solid green}
  5. </style>
  6. <div id="test2"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS greift nicht)</a></div>

3. Attribute beginnt mit einem bestimmten Wert

Element[Attribute^="Wert"]
Das Element enthält ein Attribute, welches mit einem bestimmten Wert beginnt.

  1. <!– Beispiel - der Link, der als href mit dem Wert "http://" beginnt, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test3 a{border:1px solid red;padding:5px}
  4.   #test3 a[href^="http://"]{border:1px solid green}
  5. </style>
  6. <div id="test3"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>

4. Attribute endet mit einem bestimmten Wert

Element[Attribute$="Wert"]
Das Element enthält ein Attribute, welches mit einem bestimmten Wert endet.

  1. <!– Beispiel - der Link, der als href mit dem Wert ".com" endet, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test4 a{border:1px solid red;padding:5px}
  4.   #test4 a[href$=".com"]{border:1px solid green}
  5. </style>
  6. <div id="test4"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS ebenfalls zutreffend)</a></div>

5. Attribute enthält einen bestimmten Wert

Element[Attribute*="Wert"]
Das Element enthält ein Attribute, welches einem bestimmten Wert enthält.

  1. <!– Beispiel - der Link, der als href den Wert "pyades" enthält, erhält einen grünen Rahmen –>
  2. <style>
  3.   #test5 a{border:1px solid red;padding:5px}
  4.   #test5 a[href*="pyades"]{border:1px solid green}
  5. </style>
  6. <div id="test5"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank" >Pyades (CSS zutreffend)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (CSS greift nicht)</a></div>

6. Sonstige Attribute

Es gibt noch zwei weitere Particular Attributes, auf die ich allerdings nur am Rande eingehen möchte:
~= ist ein Wert, aus einer durch Leerzeichen getrennte Liste: “Wert1 Wert2 Wert3″ und
|= ist ein Wert, aus einer durch | getrennten Liste: “Wert1|Wert2|Wert3″

7. Bekannteste Anwendung

Die bekannteste Anwendung ist die Kennzeichnung von externen Links.

  1. <style>
  2.   #test6 a[href^="http://"]{background:url(/examples/offsite.gif) no-repeat scroll right center;padding-right:8px;}
  3.   #test6 a[href^="http://www.pyades.com"]{background:transparent;padding-right:0px;}
  4. </style>
  5. <div id="test6"><a href="http://www.pyades.com" title="C++ Softwareentwicklung Qt" target="_blank">Pyades (interner Link)</a> <a href="http://www.imagy.com" title="Stock Photo Community - Kaufen und verkaufen Sie Ihre Bilder" target="_blank">Imagy (externer Link)</a></div>

Seiten, wie Wikipedia oder Dr. Web nutzen diese Technik bereits seit einiger Zeit.

Vielleicht darf ich Sie einmal bei einer innovativen Webentwicklung oder besonderem Webdesign helfen? Wenn Sie weitere Fragen haben, würde ich mich über Ihren Anruf freuen. Sie erreichen mich natürlich auch per eMail. Ich nehme mir sehr gerne ein wenig Zeit für Ihre Fragen.

Florian Becker
–
Pyades Technologies GmbH
Römerstr. 4 L
55232 Alzey

Tel: +49 (0) 67 31.998 78 66
Mob: +49 (0) 163.680 35 64
Fax: +49 (0) 67 31.998 78 67

Webseite: www.pyades.com

Amtsgericht: Mainz HRB 41299
Geschäftsführer: Florian Becker

Schlagworte:, , , , , , , , , , , , , , , , ,
Veröffentlicht in css, html | Keine Kommentare »

Nicht-webfähige Schriften darstellen

Freitag, 25. April 2008

Sicherlich kommt es Ihnen bekannt vor: Das Layout des Designer ist absolut treffend, aber bei der Umsetzung der Seite gibt es massive Unterschiede in den Schriften.

Der Webbrowser kann immer nur Schriften darstellen, die auf dem eigenen System installiert sind. Da es allerdings bei allen Systemen unterschiedliche Schriften gibt, greift der Browser auf eine Alternative zurück, bzw. die Webseiten werden direkt mit websicheren Schriften erstellt.

Durch das dynamische Erstellen von Schriften, in Form von Bildern, können Sie Ihr Design absolut perfekt im Internet nachbilden. Es werden außerdem mehrsprachige Inhalte unterstützt. Der einzige Nachteil, die Erstellung benötigt eine höhere Rechenleistung als eigentlicher Text (Es kann durch ein intelligentes temporäres Auslagern verhindert werden). Was allerdings bleibt, ist ein höheres Datenaufkommen, durch Bandbreiten ab 1 MBit ist das allerdings zu vernachlässigen. Zumal die Bilder auf die eigene Festplatte ausgelagert werden.

Ich stelle Ihnen heute ein Skript vor, welches direkt und einfach als Bild eingebunden werden kann, aber alle Schriftarten darstellen kann. Es handelt sich um eine Implementierung unter Verwendung von IMagick aus den PHP Bibliotheken.

Die Einbindung erfolgt folgendermaßen:

  1. <img src="/examples/fonty.php?t=Beispiel" alt="Beispiel" />

Als Resultat erhalten wir folgende Ausgabe:
Beispiel

Ich habe für das Beispiel die Schriftart Visitor verwendet. Als weitere Optionen können noch die Vordergrundfarbe, die Hintergrundfarbe und die Schriftgröße übergeben werden.

Als Beispiel für eine Größe von 20pt mit blauem Hintergrund und weißer Schriftfarbe:

  1. <img src="/examples/fonty.php?t=Beispiel&amp;c=ffffff&amp;b=0066CC&amp;s=20" alt="Beispiel" />

Als Ausgabe erhalten wir folgendes Bild:
Beispiel

Natürlich ist das Skript erweiterbar z.B. durch das Verwenden von mehreren Schriftdateien, oder durch das Benutzen von Verläufen und eben alles was grafisch möglich ist. Die Standardwerte können angepasst werden, um es an persönliche Vorstellungen anzugleichen. Folgende optionale Werte können belegt werden:

  1. /* configuration */
  2. /* allowed referer - else, everyone can generate images over your server */
  3. $referer = array( "localhost", "127.0.0.1", "pyades.com", "devqt.com", "imagy.com" );
  4. /* default string */
  5. $string = "pyades technologies gmbh";
  6. /* max string len */
  7. $maxStringLen = 24;
  8. /* default font point size */
  9. $size = 12;
  10. /* maximal font point size possible */
  11. /* note: a size like 1000pt can slow down or even break the server */
  12. $maxSize = 20;
  13. /* default font color */
  14. $color = "#000000";
  15. /* default background color */
  16. $background = "transparent";
  17. /* image comment */
  18. $comment = "imagy.com by Pyades Technologies GmbH";
  19. /* the font for writing */
  20. $font = "visitor.ttf";
  21. /* type of image - also possible, whatever Imagick can use */
  22. $imageType = "png";

Durch das Nutzen von $referer haben Sie die Möglichkeit, die Bildausgabe auf bestimmte Hosts zu begrenzen, damit Ihr Server nicht unnötig belastet wird, falls es sich ein anderer zu eigen macht. In einer späteren Anpassung wird eine weitere Sicherung in Form der IP-Adresse oder sogar in Form von Cookies denkbar sein. Ich halte Sie natürlich wie immer auf dem Laufenden.

Download: /examples/fonty-0.1.zip (10,6 KB)

Sollten Sie eine Abwandlung benötigen, oder möchten Sie es in Ihre Webseite integriert haben? Dann sprechen Sie mit mir, wir werden unter Garantie eine Lösung finden. Haben Sie weitere Fragen? Dann rufen Sie mich doch an, oder schreiben Sie mir einfach eine eMail.

Florian Becker
–
Pyades Technologies GmbH
Römerstr. 4 L
55232 Alzey

Tel: +49 (0) 67 31.998 78 66
Mob: +49 (0) 163.680 35 64
Fax: +49 (0) 67 31.998 78 67

Webseite: www.pyades.com

Amtsgericht: Mainz HRB 41299
Geschäftsführer: Florian Becker

Schlagworte:, , , , , , , , , , , ,
Veröffentlicht in bilder, php, schriften | Keine Kommentare »