css | Page 2 of 8 | WordPress & Webwork

Der Tag (Schlagwort) "css"

Hier sind alle Beiträge aufgelistet, die mit css verschlagwortet sind.

CSS3: Infos und Auflistung über aktive Mediaqueries

Von Vladimir am 07. 11. 2011 um 13:34

Drüben bei Jens entdeckte ich ein nettes Tool für CSS-Entwickler auf CSS Media Queries.com:

Dort werden eine Reihe von Mediaqueries samt Erklärungen aufgelistet und die aktiven bzw. für dein System passenden hervorgehoben. In meinem Fall wären dies:

@media only screen and (min-width : 1224px)
@media screen

Schalte ich die Sidebar in meinem Firefox aus, dann kommt folgendes Mediaquery hinzu:

@media only screen and (min-width : 1824px)

Kommentare (3)

Hinweis:
WordPress 3.3 für Autoren & Redakteure
Der schnelle und unkomplizierte Einstieg auf 45 DIN-A4-Seiten

Humor mit CSS

Von Vladimir am 04. 10. 2011 um 13:31

Das auch Webworker Humor haben, beweist die Seite CSS Humor.com. Dort werden witzige Sachen in den CSS-Code integriert. Wie man unschwer erkennen kann, hat der schwarze, makabere und bissige Humor einen wichtigen Stellenwert. Hier ein paar Beispiele:

.elvispresley {visibility: hidden; position: top;}

Es gibt einige Beispiele die sich mit Michael Jackson beschäftigen, zum Beispiel:

.michael.jackson {background-color: black;}
.michael-jackson {color: white !important;}

Aber auch andere Berühmtheiten werden "berücksichtigt":

#justin_bieber .talent {display: none;}
.JohnLennon {widows: 1;}
#william_shatner {pause-after: 100ms;}
.danny.devito {max-height: 0; width: 100%;}

Viel Spaß beim Stöbern.

Kommentare (4)

Hinweis:
WordPress 3.3 für Autoren & Redakteure
Der schnelle und unkomplizierte Einstieg auf 45 DIN-A4-Seiten

CSS3: Mehrspaltiger Text

Von Vladimir am 27. 09. 2011 um 19:13

Eine einfache Möglichkeit um mehrspaltige Artikel zu erstellen, wie man sie aus den Zeitschriften kennt, wünschen sich einige Webworker schon seit langer Zeit. In der Vergangenheit war das nur mit diversen Tricks oder manuell möglich. Entweder hat man auf Javascript-Lösungen zurückgegriffen, wie zum Beispiel Columnizer jQuery Plugin oder man hat die Spalten selber definiert, mit floats gearbeitet und manuell die Texte auf die jeweiligen Spalten verteilt.

Mit dem CSS Multi-column Layout Module von W3C gibt es seit einiger Zeit den Ansatz, dass Browser die mehrspaltigen Inhalte unterstützen sollen. Hier ein Beispiel:

Ich bin der Text in der ersten Spalte… Lorem Ipsum und hast du nicht gesehen.

Ich bin der Text in der zweiten Spalte… Lorem Ipsum und hast du nicht gesehen.

Hier der entsprechende Code: (weiterlesen…)

Kommentare (5)

Hinweis:
250+ Professionelle WordPress-Themes
Premium WordPress-Themes, 24 davon mit deutschem Support

Links: WordPress, Google+, Editoren, CSS3, Chrome

Von Vladimir am 21. 09. 2011 um 13:41

Ich muss mich mal ein paar Browser-Tabs entledigen, die ich vom Browserstart zum Browserstart, teilweise seit Wochen mit mir herumschleppe:

Auf Theme Code Matters, Too gibt es einen interessanten und ausführlichen Artikel für Entwickler von WordPress-Themes. Es wird u.a. die Code-Qualität und Standard-Techniken angesprochen.

Es dürfte sich mittlerweile herumgesprochen haben, dass Google+ seine Pforten für alle geöffnet hat. Wer darüber und die aktuellen Neuerungen in Google+ lesen möchte, einfach hier vorbei schauen:

Drüben bei Guido gibt es eine kleine Auflistung nützlicher Erweiterungen für den Code-Editor Notepad++. Der Besuch bei ihm erinnerte mich, dass ich Anleitung für die schicken CSS-Buttons:

seit mehr als zwei Wochen in den offenen Tabs herumschleppe. Die Anleitung ist ausführlich und das ganze kann man sich im Demo-Bereich anschauen.

Auf Entwickler.com werden 10 Quellen aufgelistet, die wiederum jeweils zwischen 8 bis 32 Erweiterungen für Google Chrome auflisten, die dem Webworker bei der Arbeit helfen.

Kommentare (0)

Mit HTML-Editor Dokumente und E-Books für Amazon Kindle erstellen (2)

Von Vladimir am 05. 09. 2011 um 15:05

Nach dem du im ersten Teil dieser Artikelserie die Entwicklungs- und Testumgebung eingerichtet und dich mit ihr vertraut hast, geht es nun darum das erste Kindle-Dokument zu erstellen.

Erstelle eine leere HTML-Datei und füge dort ein Grundgerüst ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <title>Titel deines E-Books</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="author" content="Dein Name" />
</head>
<body>

</body>
</html>

Ich persönlich habe im konkreten Fall mit XHTML 1.0 transitional gearbeitet. Du kannst mit der strict-Variante arbeiten, auf HTML 4 oder 5 ausweichen oder komplett auf den Doctype verzichten. Ich habe mich dennoch für einen Doctype entschieden, man muss sich ja nicht unnötigerweise eine Fehlerquelle verschaffen, auch wenn sie nur hypothetischer Natur sein könnte. (weiterlesen…)

Kommentare (5)

Mit HTML-Editor Dokumente und E-Books für Amazon Kindle erstellen (1)

Von Vladimir am 04. 09. 2011 um 17:26

KindlePreviewer im Einsatz Wie ich es bereits im Artikel Amazon Kindle: unser erstes WordPress-E-Book versprochen habe werde ich hier auf perun.net beschreiben, wie man lediglich mit einem Text- bzw. HTML-Editor Dokumente und E-Books für Amazon Kindle erstellt.

Doch bevor du loslegst musst du ein paar Vorbereitungen treffen und die Entwicklungsumgebung einrichten.

Die Vorbereitung

Um Dokumente und E-Books für Kindle zu erstellen benötigt man keine teure Entwicklungsumgebung … im Grunde genommen muss man kein Cent extra Geld ausgeben, wenn man es nicht möchte.

Folgende Komponenten sind notwendig: (weiterlesen…)

Kommentare (8)

Validierung, CSS3 vs. Photoshop, responsive Webdesign

Von Vladimir am 03. 09. 2011 um 13:25

Zur Abwechslung gibt es mal wieder drei Links zu CSS3:

Wie man den CSS-Validator so einstellt, dass zumindest die Vendor-Präfixe nicht als Fehler angekreidet werden.
Im Artikel CSS3 vs Photoshop: Transforms werden die Fähigkeiten von CSS3 und Photoshop in Bezug auf Transformationen (Rotation, Skalierung etc.) vergliechen.
Unter dem Beitrag The ultimate responsive web design roundup verbirgt sich eine sehr lange Auflistung zu Quellen, die sich mit dem Thema responsive Webdesign (an das Ausgabegerät anpassen) beschäftigen.

Viel Spaß beim Lesen.

Kommentare (0)