CSSGURU.DE

Firefox 4.0 Beta ist da

admin — Wed, 07 Jul 2010 09:13:13 +0000

Ab sofot steht die Firefox 4 Beta 1 zum download bereit, allerdings nur in englisch und nur für Windows, Linux und OS X.
Zu den ersten Verbesserungen gehören Support for WebM Video, CSS 3, Canvas, Web Sockets, ein neuer Add-ons Manager, Crash Protection und ein Jetpack SDK update. Eine Übersicht aller Änderungen findet man in den Release-Notes.
Ausserdem würde an der Ladegeschwindigkeit gearbeitet, sodass die 4er Version deutlisch schneller läuft als die 3.x.

Mozilla feiert zwei Milliarden Firefox Add-on Downloads

admin — Mon, 05 Jul 2010 17:54:13 +0000

Laut Mozilla haben Firefox-Benutzer mittlerweile über zwei Milliarden Add-ons für ihren Browser heruntergeladen.
Die erste Milliarde hatte Mozilla mit den zusätzlichen Tools für Firefox im November 2008 geknackt
Laut eigenen Angaben hatten die Verantwortlichen damit gerechnet, dass es wohl drei Jahre dauern würde, bis man diese Zahl verdoppeln könnte. Zur Feier des Tages ruft Mozilla alle Firefox-Benutzer dazu auf, die besten 25 Add-Ons zu wählen.

CSS clearfix

admin — Tue, 22 Jun 2010 16:25:53 +0000

Das Problem mit “float-Elementen” innerhalb eines Container ist, dass diese manchmal “ausbrechen”. Der Grund dafür ist, dass der Float, den Fluss unterbricht und somit das überstehende Element nicht weis wie hoch es sein soll. Da man es eigentlich schlecht erklären kann – hier ein Beispiel was gemeint ist:

Box 1

Box 2

In diesem Beispiel sieht man ganz gut, dass die Box 2 aus der Box 1 ausbricht, obwohl sich diese innerhalb befindet.
Um dieses zu unterbinden kann man entweder ein “clear: both” hinter dem float-element hinzufügen, oder auch den sogenannten “clearfix” benutzen. Das CSS dafür sieh so aus:

.clearfix:after {  /* für Firefox, IE8, Opera, Safari, etc. */
    content: ".";  
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
 
* + html .clearfix { /* für IE7 */
    display: inline-block;
}
 
* html .clearfix { /* für IE6 */
	height: 1%;
}

Und hier das HTML mit der “clearfix” Klasse:

<div class="test_clearfix_box clearfix">
    <p>Box 1</p>
    <div class="float_left_box">Box 2</div>
</div>

Und hier das Ergebniss wie es eignlich aussehen sollte:

Box 1

Box 2

CSS3 Box und Text-Shadow

admin — Tue, 27 Apr 2010 19:33:56 +0000

Firefox und Safari bieten die Möglichkeit an per CSS Schatten-Effekte beim Text oder auch beim Box-Model zu zaubern.
Beim Text-Shadow sieht es so aus:

text-shadow: 2px 2px 2px #000;

Die ersten 2px sind für den Schatten rechts und die nächsten 2px für den Schatten unten.
Danach folgt noch der Abstand in PX und die Farbe des Schatens:

Ich bin ein Text mit Schatten

Beim dem Box-Shadow Effekt siehts ähnlich aus. Man braucht auch hier 3 angeben (Schatten rechts, Schaten unten und der Blur-Effekt)

-moz-box-shadow: 5px 5px 5px #999; /* Firefox hack */
-webkit-box-shadow: 5px 5px 5px #999; /* Safari and Chrome hack */
box-shadow: 5px 5px 5px #999;

Bei dem Beispiel unten habe ich noch ein padding von 10px für den inneren Abstannd hinzugefügt.

Ich bin eine Box mit Schatten

Leider werden diese Eigenschaften (wie immer) von den Internet Explorer nicht ünterstützt.

Wireframing Tools und Templates

admin — Sun, 07 Feb 2010 18:43:59 +0000

Planung und Kommunikation sind zwei wichtige Elemente bei der Entwicklung einer erfolgreichen Website.
Das Wireframing bietet eine schnelle und einfache Methode einen Prototypen einer neuen Website zu erstellen.
Es ist einer der besten Möglichkeiten um Ideen mit anderen zu kommunizieren und zu planen, oder um Funktionen zu definieren und diese dann zu überprüfen.
Wie auch immer, der heutige Beitrag besteht aus einer Sammlung an nützlichen Tools und Templates für das Wireframing.

Online Wireframing Tools:

pidoco.com

iplotz.com

hotgloo.com

gomockingbird.com

gliffy.com

Templates und Toolkits

Free Sketching & Wireframing Kit

Form, Button, Windows etc.

Wireframe Icons

OmniGraffle Wireframe UI Stencils

Einstieg in jQuery

admin — Wed, 23 Dec 2009 18:01:31 +0000

Jquery ist ein frei verfügbares Javascript-Framework, welches das Entwickeln von JavaScript Anwendungen erleichtert.
Es gibt zwar noch andere Framworks, doch JQuery ist relativ einfach zu verstehen und bietet eine schlanke Syntax.
Ausserdem gibt es unzählig viele Plugins für verschiedene Ajax-Effekte, Bildergalerien, Navigationen, Slider, Tabs usw.

Hier eine Übersicht der Vorteile:
———————————————–
* schlanker Code im Vergleich zum purem JavaScript
* einfach zu erlernen
* Wiederverwendbarkeit
* viele Plugins / Tutorials etc

So, nun aber genung geredet. Fangen wir am besten mit einem einfachen Tutorial an.
Zuerst müssen wir uns auf die jQuery Seite begeben und die letzte Version downladen.
Jetzt erstellen wir ein leeres HTML Dokument und binden die “jquery.min.js” ein:


<html>
  <head>
    <title>jQuery Tutorial</title>
    <script src="jquery.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h4><a href="#" id="toggle_link">Zeige mehr...</a></h4>
    <div id="show_more" style="display: none;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  </body>
</html>

Ich habe dem Dokument noch einen Link mit der ID “toggle_link” und einwenig Text in einem Div-Element mit der ID “show_more” hinzugefügt um diesen später per jQuery ansprechen zu können. Ausserdem würde mit dem inline Style “display:none;” das Div ausgeblendet.
Um mit der DOM Manipulaion beginnen zu können müssen wir zuerst jQuery aufrufen:

$(document).ready(function(){
  // jQuery-Code
});

Dieses bewirkt dass alle Funktionen innerhalb des jQuery Codes ausgeführt werden, sobald das komplette HTML Dokument (DOM) geladen würde. Für alle die es ein wenig schlanker haben möchten, können es wie folgt abkürzen:

$(function(){
  // jQuery-Code
});

Jetzt bauen wir einen einfachen “Toggle-Effekt” welcher den Text in dem Div ein- und ausblenden lässt.
Um die von uns gewollten DOM-Elemente anzusprechen, benutzen wir das Dollarzeichen ($) als ein Selektor.
Ein paar Beispiele dafür wären:

$("#id")
$(".klasse")
$("div, p, a, span, li")

Im Einsatz sieht es dann so aus:

<script type="text/javascript">
  $(function(){
    $("a#toggle_link").click(function(){
      $("div#show_more").toggle();
     });
  });
</script>

Wenn man jetzt auf den Link mit der ID “toggle_link” klickt, ruft man die Funktion “toggle” auf welche wieder das Div-Element mit der ID “show_more” manipuliert. Der “toggle” Befehl von jQuery sorgt dafür dass der Text ein- und ausgeblendet wird.

Hier das fertige Ergebniss (Link anklicken):

Zeige mehr…

10 moderne Online Shop Designs als Inspirationsquelle

admin — Mon, 12 Oct 2009 19:34:56 +0000

Um auf das nächsten E-Commerce Projekt gewappnet zu sein habe ich hier 10 schöne Designs von Online-Shops zusammengestellt:

www.kolibrishop.com

www.fashion.de

www.maisonsdumonde.com

Hier nochmal ein paar interessante Links / Inspirationsquellen:
http://vandelaydesign.com/blog/galleries/ecommerce-ui/

HTML 5 Layout

admin — Tue, 11 Aug 2009 11:32:47 +0000

Die Arbeit am HTML 5 ist zwar noch nicht abgeschlossen, da es aber von dem W3C-Konsortium vorgestellt und schon von den modernen Browsern unterstützt wird, werde ich in diesem Artikel zeigen wie man ein Seitenlayout mit HTML 5 erstellt.

Als Vorlage werde ich ein einfaches Design wie dieses hier verwenden:

Das HTML 5 Grundgerüst sieht dann wie folgt aus:


<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>HTML5 Layout</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" />
  </head>
  <body>
  ...
  </body>
</html>

Bis auf den Doctype sieht die Synthax eigentlich nicht viel anders aus als bei einem XHTML/HTML 4 Document.
Um mit der Umsetzung des Layouts weiter zu machen, habe ich noch eine kleine Grafik erstellt, um die Synthax von HTML 5 besser darzustellen:

Jetzt kommt die Struktur:

<div id="doc">
  id="header">
    <h1>HTML5 Layout</h1>
    
      <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
      </ul>
    </nav>
  </header>
  id="content">
    
      <h2>Artikel Überschrift</h2>
      <p>Lorum ipsum...</p>
    </article>
  </section>
  
    <h2>Sidebar</h2>
    <p>Lorum ipsum...</p>
  </aside>
  
    <a href="#">Impressum</a>
  </footer>
</div>

Wie man eindeutig erkennen kann, bekommt die HTML 5 Struktur mehr Symantik. Die einzelnen Elemente wie z.b. Header, Navigation, Sidebar usw. bekommen endlich eigene Tags was auch zu einem schlankerem Code führt. Das eine “div” wird verwendet, um dem Layout eine feste Breite zu verschaffen und um alles zu zentrieren.

Damit jetzt alles Form und Farbe bekommt folgt nun das CSS:

/* HTML5 HACK -------------------------------------- */  
header, section, footer, aside, nav, article {  
	display: block;  
}
 
/* LAYOUT ------------------------------------------ */
 
body {
  background: #fff;
  font-size: 12px;
  font-color: #444;
  font-family: Verdana, Arial, sans-serif;
  margin: 0;
  padding: 0;
}
 
#doc  {
  width: 800px;
  margin: 0 auto;
}
 
/* HEADER & NAVIGATION ------------------------------ */
 
#header {
  background: #333;
  padding: 0 15px;
}
 
#header h1 {
  margin: 0;
  padding: 15px 0;
  color: #A5A5A5;
}
 
#header nav ul {
  list-style-type: none;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
 
#header nav ul li {
  display: inline;
  margin: 0;
  padding: 0;
}
 
#header nav ul li a {
  display: inline-block;
  padding: 2px 10px;
  color: #fff;
  background-color: #CC3366;
  text-decoration: none;
}
 
#header nav ul li.active a,
#header nav ul li a:hover {
  background-color: #fff;
  color: #444;
}
 
/* CONTENT ------------------------------------------ */
 
#content {
  width: 440px;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
}
 
/* SIDEBAR ------------------------------------------ */
 
aside {
  width: 300px;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
}
 
/* FOOTER ------------------------------------------ */
 
footer {
  clear: both;
  background: #DDD;
  text-align: right;
  padding: 10px 15px;
  margin: 10px 0 0 0;
}
 
footer a {
  color: #999;
}

Am Anfang des CSS Files befindet sich ein kleiner Hack, damit sich die HTML 5 Elemente (header, section, footer, aside usw.) wie ganz normale Block-Level-Elemente verhalten. Wie es auch bei einem “div” der Fall ist.
Das komplette Ergebniss aus HTML und CSS kan man hier sehen.

Wie schon oben erwähnt befindet sich HTML 5 noch in der Entwicklung und wird zur Zeit leider in nur wenigen Browsern unterstützt. Für den IE gibts halt wie immer Workarounds. Es ist aber gut das man jetzt schon mit HTML 5 arbeiten kann.

Mehr Informationen gibts hier (english):
http://www.w3.org
http://html5doctor.com

Warum der IE6 noch benutzt wird

admin — Wed, 15 Jul 2009 17:48:28 +0000

Vor kurzem hat Digg in seinem Blog einen Beitrag veröffentlicht in dem es seine User fragt ob man den IE6 noch unterstützen soll, da noch ca. 10% der Nutzer mit dem Dinosaurier bei Digg unterwegs sind. Bei der Umfrage wollte man wissen welche Browser zuhause und welche am Arbeitsplatz verwendet wird und warum dabei noch der IE6 zum Einsatz kommt.

Hier erstmal das Ergebniss der Umfrage als Grafik:

Bildquelle: http://blog.digg.com

Wie es aussieht können ca. 75% der User am Ihrem Arbeitsplatz nicht upgraden weil: Sie entweder keine Administrationsrechte besitzen, oder das Betriebssystem es nicht zulässt (bzw jmd versucht es ihnen einzureden). Hier liegt das Problem höchstwahrschenlich an den alten Windows Betriebssystemen (Windows 2000, ME, 98) bei welchen ein Update auf IE7/8 nicht möglich ist, und auf der anderen Seite an den Admins die es nicht für nötig halten auf deren Client-PC’s einen aktuellen Browser wie Firefox oder Chrome zu installieren.
Den Kommentar für die restlichen 25% werde ich mir sparen

Ob man den IE6 supporten möchte oder nicht bleibt jedem selbst überlassen. Im schlimmsten Fall verzichtet man auf ca. 10% seines Traffics (was meiner Meinung nach doch noch ziemlich viel ist). Youtube hat jedenfalls vor den Stecker für den IE6 zu ziehen – andere werden wohl bald folgen.

Blueprint CSS Framework

admin — Mon, 08 Jun 2009 17:58:43 +0000

Das Blueprint Framework ist vorgefertigtes Gerüst welches einem sehr viel Arbeit abnehmen kann. Es ist ein typografisch angepassten Layout in einem 24 Spalten (Grid) Design mit einer “Reset.css” und einem Stylesheet fürs Drucken. Ansonsten findet man noch ein CSS-File für schöne Formulare und noch ein paar Plugins für Buttons, Tabs und Sprites.
Das tolle an Blueprint ist, dass man in nur wenigen Minuten verschiedene CSS Layouts zusammen bauen kann, welche auf den 24 Grids basieren:

Um es zu verwenden muss man zuerst mindestens die Dateien “screen.css”, für den Internet Explorer die “ie.css” und optional die “print.css” in den Header einbinden. Jetzt kann man z.b. ein ganz einfaches Layout wie dieses hier erstellen:

Hier das Markup:

<div class="container">
    <div class="span-16">
        <h1>Main Content</h1>
    </div>
    <div class="span-8 last">
         <h2>Sidebar</h2>
    </div>
</div>

Wie man sehen kann werden die einzelnen Grids mit der CSS-Klasse “span” definiert.
Zu beachten ist, dass man der letzten Spalte noch ein “last” hinzufügt.

Das obere Beispiel ist natürlich nichts besonderes, will man aber z.b. mehrere Blöcke ineinander verschachteln, merkt man schnell wie hilfreich Blueprint ist.

Und hier das HTML:

<div class="container">
    <div class="span-16">
        <h1>Main Content</h1>
        <div class="span-8">
            <h3>InnerA</h3>
        </div>
        <div class="span-8 last">
            <h3>InnerB</h3>
        </div>
    </div>
    <div class="span-8 last">
        <h2>Sidebar</h2>
    </div>
</div>

Ich hoffe man kann anhand des kurzen Beispiels sehen wozu ein CSS Framework nützlich sein kann.
Ob man es einsetzen soll oder nicht bleibt jedem selbt überlassen, allerdings muss ich sagen dass es die Arbeit an komplexeren Seiten deutlich erleichtert.

Mehr Informationen gibts hier:
http://www.blueprintcss.org

Eine Alternative mit einem “Online-Grid-Baukasten” findest du hier:
http://960.gs