Webdesign mit CSS - Designer-Techniken für kreative und moderne Webseiten
Jens Meiert, Ingo Helmdach
Language: German
Pages: 259
ISBN: 2:00044856
Format: PDF / Kindle (mobi) / ePub
Standardkonformes Webdesign muss nicht zwangsläufig zu langweiligen Designs führen, sondern ermöglicht durchaus originelle Ideen. Dieses durchgehend vierfarbige eBook bietet Anregungen und Beispiele für CSS-Standard-basierte Designs, die zur eigenen Inspiration studiert werden können, aber auch sofort angewendet und für die eigenen Bedürfnisse angepasst werden können. Das eBook wendet sich an Webdesigner, Autoren und Entwickler, die sich mit den XHTML- und CSS-Standards prinzipiell auskennen und nun auf der "Design-Leiter" ein paar Stufen höher klettern wollen. Die neue Auflage wurde komplett überarbeitet sowie um neue Designs erweitert. "A List Apart"-Autor Christian Heilmann hat das Vorwort geschrieben. Die Beispieldateien aller 30 Designs können heruntergeladen und frei verwendet werden.
Learning HTML5 by Creating Fun Games
Responsive Typography: Using Type Well on the Web
Viele der Designs verlassen sich inzwischen darauf, dass im HTML-Code jede Menge Klassen und IDs vorhanden sind, und viele der neueren Designs basieren hauptsächlich auf dem Trick, Texte durch Hintergrundgrafiken zu ersetzen. Manche Designs fügen sogar neue Texte hinzu oder ändern den Text. Mit anderen Worten, CSS wird mehr und mehr zu einem Design- und Inhalte-Ersatz. Anstatt sich darauf zu konzentrieren, was HTML ist, bevor man CSS verwendet, um sich um die Darstellung zu kümmern, wird CSS zu
http://www.w3.org/TR/CSS21/fonts.html#font-boldness Mit freundlicher Genehmigung der GMX GmbH München, www.gmx.de. 124 Teil II: Listen und Menüs Veranstaltungskalender In diesem Kapitel wollen wir uns mit Mikroformaten beschäftigen, einem in den letzten ein, zwei Jahren immer populärer gewordenen Thema. In diesem Sinne ist die Zuordnung in den Bereich »Listen und Menüs« eigentlich nicht ganz richtig – wir werden zwar auch Listen einsetzen, aber nur sekundär. 16 Schwierigkeitsgrad: einfach
wir für die Abrundung unten unseren Link: Wir machen ihn zu einem Block-Element, so dass er die gesamte Breite beansprucht (absichtlich sehen weder die Liste noch das letzte Listenelement einen Abstand vor), und weisen ihm das gewünschte Hintergrundbild, eine Höhe sowie einen Innenabstand zu. Schlussendlich wünschen wir noch einen kleinen Effekt, wenn dieser Link aktiviert wird, mit einem anderen Bild und weißer Farbe: li a:focus, li a:hover, li a:active { background-image:
margin: 15px 0 0 3px; padding: .6em 10px .6em 77px; } p { display: inline; } ol { background: url(bilder/schatten.jpg) top right no-repeat; list-style: none; padding-top: 1.5em; } li.vevent { padding: .6em 1em .6em 2em; } li a { background: url(bilder/abrundung-unten.gif) bottom no-repeat; color: #000; display: block; height: 2.7em; padding: .9em 1em 0 2em; text-decoration: none; } li a:focus, li a:hover, li a:active { background-image: url(bilder/abrundung-unten-alt.gif); color: #FFF; } Kapitel
dass das Formular »abgeschnitten« wird. Ein overflow -Wert von auto schafft Abhilfe, führt aber zu anderen Problemen, zum Beispiel mit Opera. Ein sicherer, aber hier absichtlich nicht beschrittener Weg ist im Zweifelsfall das Setzen einer festen Höhe über die heightEigenschaft. 162 Was wir an dieser Stelle machen, ist nichts anderes, als allen Beschriftungen (Labels) und Formularelementen vorzugeben, dass sie »gefloatet« werden, und ihnen gleichzeitig auch eine Breite zuzuweisen (das ist gemäß