Schlagwort: CSS Design

Kategorien
Stylesheets Webentwicklung

How to use the target attribute

Prozess Pyramide

target

Die Eigenschaft target ersetzt das nicht mehr valide HTML-Attribut target="".

Mit den Werten none, window und tab kann festgelegt werden, ob der Browser einen Link im gleichen Fenster, in einem neuen Fenster oder als neuen Tab öffnen soll.

Der :target-Selektor ist eine dynamische Pseudoklasse und selektiert Elemente, die Ziel eines Verweises sind.

Beispiel:

a:target { 
  color: red; 
}

In diesem Beispiel wird jeweils das aktuell angesprungene Verweisziel in roter Schrift dargestellt.

Kategorien
Stylesheets Webentwicklung

How to use Background-Size

CSS Programming Image

Allgemein

Background-Size wird zwar von vielen Browsern unterstützt, allerdings hat jedes Programm noch seine eigene Implementierung mit eigener Syntax. Alle folgenden Anweisungen sind nötig, um background-size auf allen Browsern, sofern diese die Technik auch unterstützen, zum Laufen zu bringen.

-moz-background-size:50% 30%; /* Firefox */
-webkit-background-size:50% 30%; /* Safari, Chrome */
background-size:50% 30%; /* Opera, IE*/

Hintergrundbilder lassen sich mit vier Schreibweisen einsetzen: mit Schlüsselwörtern, mit einem Wert, mit zwei Werten und mit der Syntax für mehrere Hintergrundbilder.

.schieberegler { 
   background-image: url(x_test_x.jpg);
   background-size: cover;
}

Bei mehr als einem Hintergrundbild sitzen die Größenangaben in einer Komma getrennten Liste.

background-size: 200px;
background-size: 200px 100px;
background-size: 200px 100px, 400px 200px; 
background-size: auto 200px;
background-size: 50% 25%;
background-size: contain;
background-size: cover;

Browser-Support: Alle modernen Browser (IE ab Version 10).

SVG-Grafik ist besonders gut geeignet als Hintergrundbild, da sich SVG an die Größe anpassen lässt. Ihr müsst ein wenig damit probieren bis ihr das richtige Layout gefunden habt. Viel Erfolg.

Kategorien
Stylesheets Webentwicklung

How to use CSS property resize

html code beispiel

resizeoutline

Die Eigenschaft resize bestimmt, ob ein Element durch die Maus vergrößert, bzw. verkleinert werden kann.

Mit outline kann ein Rahmen zum Hervorheben um Elemente herumgelegt werden, der aber nicht die Box breiter macht.

Eine Veränderung der Größe ist nur möglich und sinnvoll, wenn die overflow-Eigenschaft des Elements einen Wert hat, der verschieden von visible ist.
Chrome und Safari lassen keine Verkleinerung des Elementes zu.

Kategorien
Stylesheets Webentwicklung

Das klassische Boxmodell einfach erklärt

Prozess Pyramide

Mit CSS können Sie Elementen (feste) Breiten, Höhen und Abstände geben und diese nebeneinander positionieren.

Die rechteckigen Blöcke, die im Elementbaum erzeugt und auf dem Bildschirm dargestellt werden, folgen einem Schema, dem „Box-Modell“. Es ist somit Grundlage jeden Layouts.

Jedes Block-Element wie Textabsätze (p), -Abschnitte (div, article, main, aside, …) und Überschriften (h1, h2, …) bildet eine rechteckige Box, die Sie frei formatieren können.

Beispiel:

overflow-x, overflow-y

Mit overflow-x und overflow-y kann der „Überlauf“ eines Elementes(overflow) für jede Richtung einzeln eingestellt werden (also ob z.B. ein Scrollbalken angezeigt werden soll).

box-sizing

Mittels box-sizing kann eingestellt werden ob sich die Breite eines Elementes auf deren Inhalt oder auf Inhalt+Rahmen+padding bezieht. (Webkit: -webkit-box-sizing)

calc()

Die Eigenschaft calc(), die z.B. innerhalb einer CSS-Eingeschaft wie width oder height stehen kann, ist es möglich Breiten- und Längenangaben direkt auszurechnen.

Kategorien
Webentwicklung

What to know about Super HTML 8.5

html code beispiel

SuperHTML Web Studio 8.5 ist ein professioneller, deutschsprachiger HTML/Webeditor. Er ist unter anderem zur Erstellung von Homepages, Webseiten, Webanwendungen und CMS-Templates geeignet.

SuperHTML Web Studio ist in erster Linie ein Code-basierter Editor, der volle Kontrolle über den Quellcode und maximale Flexibilität und Präzision bietet. Speziell für HTML-Dokumente steht aber auch ein bequemer WYSIWYG-Modus zur Verfügung, der besonders für Anfänger mit wenig HTML-Kenntnissen geeignet ist.

Das Programm unterstützt alle gängigen Sprachen aus dem Webumfeld wie HTML, XHTML, XML, CSS, JavaScript, PHP, Perl, Ruby, WML u.v.m. und ist damit ein unverzichtbares Werkzeug für jeden professionellen Webentwickler. Weiterhin ist SuperHTML Web Studio vollständig Unicode-fähig und kann Dokumente für alle Zeichensätze und Sprachen bearbeiten und erstellen (ANSI, UTF-8 und UTF-16).

Features in Super HTML Web Studio 8.5

Verbesserte Windows Vista-Unterstützung

Auch Windows Vista wird nun vollständig von SuperHTML Web Studio unterstützt. Unter Windows XP, Windows 2000 und Windows 98/ME lässt sich die Anwendung ebenfalls nach wie vor problemlos einsetzen.

Office 2007 Look & Feel

Mit der neuen Benutzeroberfläche im Office 2007 Stil (mit Multifunktionsleiste) erreichen Sie nun noch schneller mit weniger Klicks alle Funktionen. Und wer von dieser neuen Form der Benutzerschnittstelle noch nicht überzeugt ist, kann alternativ weiterhin die klassische Darstellung mit Menüs und Symbolleisten verwenden, die natürlich komplett Benutzer-anpassbar ist!

Projektverwaltung

Endlich verfügt SuperHTML nun auch über eine Projektverwaltung. Mit der Projektverwaltung lassen sich nicht nur alle Dateien, die zu einem Projekt gehören, einfach verwalten und schneller zugreifen, sondern auch Projekt-spezifische Einstellungen wie z.B. (S)FTP-Profil, Aufgabenlisten oder Offline-Includes-Optionen zusammen speichern.

Verzeichnis-weites Suchen in Dateien

Mit dem neuen, leistungsfähigen Suchassistenten lassen sich beliebige Wörter oder Texte in Dateien bestimmter Verzeichnisse suchen. Dabei können zusätzlich auch bereits im Editor geöffnete Dateien miteinbezogen werden.

Unterstützung der aktuellen Version von Tidy.exe

Das Tool Tidy.exe hat sich zum de facto Standard für Syntax-Ãœberprüfung und Code-Validierung bzw. Reparatur und Aufbereitung von (X)HTML/XML-Code etabliert. Während SuperHTML Web Studio 8.0 nur die proprietäre Tidy-Lib von 2003 unterstützt hat, arbeitet die neue Version nun direkt mit Tidy.exe zusammen.

So kann dieses Tool auch zukünftig leicht aktualisiert werden. Natürlich kann SuperHTML Web Studio auch beliebige Tidy-Konfigurations-Dateien laden bzw. Ihre Konfigurationen zur späteren Verwendung speichern.

Drag & Drop zwischen (S)FTP/SSH-Client und dem Windows Explorer / Arbeitsplatz

Lokale Dateien aus beliebigen Windows-Explorer bzw. Arbeitsplatzfenstern lassen sich nun per Drag & Drop auf den (S)FTP-Server kopieren. Der umgekehrte Weg funktioniert natürlich genauso. Somit brauchen Sie wirklich kein externes (S)FTP-Programm mehr.

Neue Syntax-Highlighting-Schemes

Neben den zahlreichen Syntax-Highlighting-Schemes für viele Websprachen gibt es nun auch Syntax-Schemes für Ruby, Rails und Apache-Konfigurationsdateien. Natürlich können Sie auch Ihre eigenen Syntax-Schemes erstellen oder bestehende nach Ihren Wünschen anpassen.

Programm-Startseite

Auf Wunsch erscheint nun bei jedem Programmstart eine aktuelle Startseite, welche Sie über verfügbare Updates und nützliche Funktionen im Programm informiert. So verpassen Sie keine Updates oder kostenlose Maintenance Releases mehr!

Unterstützung von weichen TABS

Zur besseren Lesbarkeit von Code (HTML, PHP oder andere Sprachen) werden Absätze häufig mit TABS (Tabstops) eingerückt. Da die dargestellte Länge eines TABS auf unterschiedlichen Systemen jedoch variieren kann, wirkt u.U. der Code nur noch schlecht lesbar. Weiche TABS sind eine Verkettung von Leerzeichen in der Länge eines TABS. So sieht Ihr Code auf allen Systemen gleich „gut“ aus.

Verbesserte UTF-8-Unterstützung

Durch das automatische Einfügen von Codierungs-Meta-Tags und die verbesserte Erkennung von UTF-8-Dateien (auch wenn diese keine Sonderzeichen enthalten!), fällt die Arbeit mit UTF-8-codierten Dateien in SuperHTML Web Studio nun noch leichter.

Verbesserte CSS-Unterstützung in vielen Assistenten

In vielen Assistenten (z.B. zum Einfügen von Tabellen oder Hyperlinks) können nun CSS-Klassen angegeben werden und optional auch der generierte Code mit CSS-Formatierungen statt mit normalen HTML-Formatierungen ausgegeben werden.

Neue Möglichkeiten in der Vorschau

In der Vorschau informiert eine Info-Zeile nun stets über den aktuellen IE-Browser-Modus (Quirks-Mode bzw. Standards-Compliant-Mode). Außerdem lassen sich für Formular-Steuerelemente (z.B. Buttons oder Eingabezeilen) die Betriebssystem-spezifischen Skinning-Effekte (wie unter Windows XP oder Vista) ein- oder ausschalten.

Zahlreiche kleinere Detailverbesserungen und Bugfixes

Viele Detailverbesserungen machen die Arbeit mit SuperHTML Web Studio nun noch angenehmer als bisher. Die neuen Version 8.5 ist der Beweis dafür, dass sich auch bei voller Kontrolle über den Quellcode eines Dokuments komfortabel arbeiten lässt.

*Quelle: mirabyte.com

Kategorien
Stylesheets Webentwicklung

CSS Hacks, unglaublich was alles geht

CSS Programming Image
IE7 Zoom Funktion

Im IE7 können sie ausser der Schriftgröße auch die ganze Seite zoomen, inklusive Grafiken und anderer Elemente. Wenn Links im Text mit einem HOVER Effekt versehen werden und diesen eine Hintergrundfarbe zugewiesen wird, kann es passieren, dass diese Hintergrundfarbe beim zoomen nicht mehr über den Links positioniert ist und sich auch der Text verschiebt.

Weiterlesen „CSS Hacks, unglaublich was alles geht“
Kategorien
Stylesheets Webentwicklung

How to create an multi column layout

CSS Programming Image

column

Um die Erstellung eines mehrspaltigen Seitenlayouts ohne viel Code zu ermöglichen, sollen drei neue CSS-Eigenschaften eingeführt werden.

Zum einen kann man mit column-count festlegen, wie viele Spalten erzeugt werden sollen, mit der Eigenschaft column-gap gibt man den Abstand zwischen den einzelnen Spalten an und mit column-width legt man die Breite der Spalte fest. Dabei sollen nur prozentuale Angaben möglich sein.

Beispiel:

body {
    display: grid;
		gap: 10px;
}

@media (min-width: 500px) { 

body {
 grid-template-columns: 1fr 3fr 1fr;	
 grid-template-rows: auto 1fr 100px;
}

header,footer {
  grid-column: 1 / -1;
}

Zusammenfassend kann gesagt werden: Das Holy-Grail-Layout ist ein Webseiten-Layout, das mehrere, trotz unterschiedlichen Inhalts gleich hohe Spalten hat.

Weiterführende Infomationen findet ihr auf: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/mehrspaltige_Layouts

Kategorien
Stylesheets Webentwicklung

How to set properties with selectors

Prozess Pyramide

CSS 3 Selektoren

Damit Formateigenschaften auf ein Element angewendet werden können, muss definiert werden, welche Elemente angesprochen werden. Dies geschieht über Selektoren.

Ein CSS-Selektor nennt die Bedingungen, die auf ein Element zutreffen müssen, damit der nachfolgende Regelsatz an CSS-Deklarationen auf das Element angewendet wird. Der Selektor ist somit der Teil vor den geschweiften Klammern.

Mit neuen Selektoren kann man Elemente noch genauer auswählen.

Beispiele: 

first-of-type
first-letter
Kategorien
Stylesheets Webentwicklung

How to use browser switches with CSS3

CSS Programming Image

Der Umstand, dass sich CSS-Layouts langsam in der breiten Masse durchsetzen ist zu einem großen Teil dem Fakt geschuldet, dass sich an dem etablierten Standard seit vielen Jahren nichts geändert hat. Bereits der IE bot eine recht ordentliche CSS2-Unterstützung doch erst mit frisch veröffentlichten Internet Explorer 7 wird diese endlich einigermaßen fehlerfrei. Dazwischen liegen 6 Jahre. Auch andere Browser haben Zeit für den Reifeprozess benötigt.

Die Neuerungen von CSS 3 ermöglichen eine völlig neue Denkweise bei der Layouterstellung. Der Spaltensatz und die Möglichkeiten des neuen Box-Modells können zu erheblichen Vereinfachungen der Quelltextstruktur einer Webseite führen.

Doch in der Realität müssen Webdesigner auch jetzt schon eine Vielzahl an Browsern und dabei jeweils in zahlreichen mindestens zwei oder mehr Generationsstufen unterstützen. Das wird sich auch nach der Einführung von CSS3 nicht großartig ändern.

Doch wie soll man die neuen Techniken einsetzen, wenn gleichzeitig ältere Browsergenerationen noch mit dem gleichen CSS klar kommen sollen? Eine theoretische Möglichkeit wären CSS-Browserweichen.

Auf diese Weise ließen sich alte Browser mit reiner CSS2.x-Unterstützung gezielt mit gesonderten Stylesheets versorgen. Ob das reicht, ist dabei noch fraglich denn beispielsweise beim Spaltensatz könnten mit CSS 3 selbst aufwändige CSS-Layouts auf nur wenige erforderliche Container zusammen schrumpfen. Die Möglichkeiten von CSS 3 lassen sich vermutlich erst dann voll ausschöpfen, wenn auf CSS 2 (bei dem zusätzliches Markup benötigt würde) keine Rücksicht mehr genommen werden braucht.

Box-Modell-Chaos

Wer in dem neuen Box-Modell das Konzept der alten Internet Explorer-Versionen erkannt hat, liegt nicht daneben. Microsoft hat bereits beim IE5 die Probleme erkannt und ein fortschrittlicheres Box-Modell implementiert.

Leider verstieß es zum damaligen Zeitpunkt gegen den W3C-Standard und hat damit die Layoutentwicklung nicht wirklich vereinfacht. Der Internet Explorer 6 hat das Box-Modell zumindest im Standardkonformen Darstellungsmodus korrekt interpretiert und im IE7 funktioniert es endlich auch im Quirks Modus.

Und jetzt, wo der Browser endlich macht, was der Standard vorgibt, wird mit CSS 3 das „fehlerhafte“ Box-Modell des IE plötzlich offiziell eingeführt.

Kategorien
Stylesheets Webentwicklung

Background property in Stylesheets

CSS Programming Image
Bessere Steuerung von Hintergrundbildern

background-origin, -clip

Mit background-origin kann man angeben, ob das Hintergrundbild am Rahmen, am Innenabstand oder am Inhalt ausgerichtet werden soll. (Webkit: -webkit-background-composite)

background-clip gibt an, ob sich das Hintergrundbild bis in den Rahmen erstrecken soll oder nicht hinter dem Rahmen angezeigt werden soll. (Webkit: -webkit-background-clip)

Größe von Hintergrundbildern

background-size

Mit background-size kann die Größe von Hintergrundbildern angegeben werden. Dies ist vor allem Wichtig um zukünftig SVG Grafiken sinnvoll als Hintergrundbilder einzusetzen.

Mehrere Hintergrundbilder

Mehrere Hintergrundbilder

In CSS3 können für ein Bild mehrere Hintergrundbilder angegeben werden. Dadurch müssen für viele Effekte keine ansonsten unnötigen HTML-Elemente eingefügt werden.

Für mehr Informationen schaut auch auf: https://wiki.selfhtml.org/wiki/CSS