marcinex.net
  • Akutelles
  • Über mich
  • Portfolio
  • Techniken
  • Kontakt
  • dp
  • iPhone

Techniken

  • TYPO3
    • Grafische Überschriften
  • CSS
  • jQuery
  • PHP

Web-Dienste

  • Facebbok-Profil
  • XING-Profil
  • Twitter-Profil
  • COLOURlovers-Profil
  • Amazon Wunschzettel

Grafische Überschriften mit GIFBUILDER erzeugen

Mit Hilfe des GIFBUILDER Objekts in TYPO3 ist es möglich eigene Schriftarten für Überschriften barrierefrei zu nutzen. Dabei wird ein Bild erstellt und mit der CSS-Methode als Hintergrundbild der Überschrift hinzugefügt.

TYPOSCRIPT-Code:

  1. tempHeader = COA
  2. tempHeader {
  3. 10 = IMG_RESOURCE
  4. 10.stdWrap.wrap = <h1 class="imageheader" style="background-image: url('|');">
  5. 10.file = GIFBUILDER
  6. 10.file {
  7. 10 = TEXT
  8. 10 {
  9. fontSize = 17
  10. offset = -1,20
  11. fontColor = #71a621
  12. niceText = 1
  13. }
  14. 20 = TEXT
  15. 20 {
  16. text.current = 1
  17. fontSize = 17
  18. fontFile = fileadmin/fonts/FrutigerRoman.ttf
  19. offset = -1,20
  20. fontColor = #71a621
  21. niceText = 1
  22. }
  23. XY = [10.w]+[20.w]+23,28
  24. transparentColor = #ffffff
  25. backColor = #ffffff
  26. }
  27. 20 = TEXT
  28. 20.current = 1
  29. 20.wrap = |</h1>
  30. }
  31.  
  32. lib.stdheader.10.1 > tempHeader

stdheader.10.1 ersetzt jede Standard-Überschrift (H1) durch eine barrierefreie grafische Headline. 

Artikel-Bewertung

Übermittlung Ihrer Stimme...
Bewertungen: 3.5 von 5. 2 Stimme(n).
Klicken Sie auf den Bewertungsbalken, um diesen Artikel zu bewerten.
TYPO3 Agentur Köln | takomat GbR
© 2009 Marcin Jakubowski, marcinex.net. | Impressum
Nach Oben