Archive for category: HTML & CSS

Bildeffekte / Bilder-Galerien

Bildeffekte / Bilder-Galerien

 

Bilder per Overlay zoomen

Fancybox: http://fancybox.net/ und http://fancyapps.com/fancybox/

Graybox: http://designresourcebox.com/greybox-jquery-lightbox/

Lightbox: http://leandrovieira.com/projects/jquery/lightbox/ , http://lokeshdhakar.com/projects/lightbox2/

Lytebox: http://www.ajaxupdates.com/lytebox-script/

ThickBox: http://jquery.com/demo/thickbox/

Übersicht der Lightbox-Clone: http://planetozh.com/projects/lightbox-clones/

 

Hover-Effekt für Bilder: http://www.inwebson.com/jquery/jquery-image-hover-effects/

 

Galerien mit JS

JonDesign’s SmoothGallery 2.0: http://smoothgallery.jondesign.net/

AD Gallery: http://coffeescripter.com/code/ad-gallery/

Galleria: http://galleria.io/themes/

minishowcase: http://minishowcase.net/

E(2) Photo Gallery: http://www.e2interactive.com/e2_photo_gallery/

 

Specials

Highslide JS: JavaScript thumbnail and media viewer: http://highslide.com/

Reflection.js 2.0: Add reflections to images on your webpage using Javascript. http://cow.neondragon.net/stuff/reflection/

Pixastic: Online JavaScript Photo Editor: http://editor.pixastic.com/

Permanenter Link zum Beitrag (77 words, estimated 18 secs reading time)
26. April 2012 Comments are Disabled Read More
Lightbox – Link in der Beschreibung

Lightbox – Link in der Beschreibung

Endlich habe ich eine Möglichkeit gefunden, bei der Verwendung von Lightbox einen Link in die Caption/Beschreibung einzubauen.

und so geht’s…

Die Bild­be­schrei­bung ein­fü­gen
Um nun zu einem Bild eine Bild­un­ter­schrift anzu­zei­gen fügt man noch einen wei­tere Klei­nig­keit dem Link-Tag hinzu: Das Title-Element.
Ein Link würde also inkl. der Bild­un­ter­schrift fol­gen­der­ma­ßen aus­schauen:
<a href="images/image-1.jpg" rel="lightbox[album1]" title="Bildunterschrift">thumbnailimage #1</a>

Und schließ­lich einen Link als Bildunterschrift

So. Nun haben wir wun­der­bar ein­fach Bild­un­ter­schrif­ten ein­ge­fügt, und wie in der FAQ-Frage auf der Lightbox2 Web­site unter der Frage »Can I insert links in the cap­tion?« schon kurz beant­wor­tet wurde, ist es natür­lich auch mög­lich Links in diese Bild­un­ter­schrift zu packen.

Lightbox – Link in der Beschreibung. Den ganzen Beitrag anzeigen...
25. April 2012 Comments are Disabled Read More
Transparenter iframe – Hintergrund der Quellseite scheint durch

Transparenter iframe – Hintergrund der Quellseite scheint durch

Bei einem neuen Projekt stand ich vor der Problmatik, einen iframe zu nutzen, damit eine aussenstehende Person eigenständig die News aktualisieren kann.

Der iframe-Tag ist schon sehr alt und bietet eine Vielzahl von Optionen.

Man kann wirklich viel einstellen…ABER: Der Inhalt des iframes hat immer irgendeinen Hintergrund. Definiere ich in der referenzierten HTML-Seite einen transparenten Hintergrund, so wird der Hintergrund des iframes leider meist grau dargestellt – scheint also system- und browser-abhängig zu sein.

Will man nun einen iframe in eine bestehende Seite so einbauen, dass der Hintergrund der Quellseite durchscheint, benötigt man folgende HTML-Eigenschaft:

allowtransparency=”true”

Transparenter iframe – Hintergrund der Quellseite scheint durch. Den ganzen Beitrag anzeigen...
3. April 2012 1 comment Read More
Hauchdünne Trennlinien mit dem hr-Tag

Hauchdünne Trennlinien mit dem hr-Tag

Um horizontale Linien in HTML zu erzeugen gibt es schon seit Jahren den hr-Tag.

Die von HTML vorgesehenen Möglichkeiten der Formatierung sind sehr eingeschränkt.

Will man mittels des hr-Tags nun eine hauchdünne horizontale Linie darstellen, kann man das super mit CSS realisieren.

Der Trick dabei besteht darin, mit der CSS-Eigenschaft “Border” zu arbeiten.

Hier mal ein Beispiel in CSS:

hr {
text-align:left;
margin-left:0;
background-color: transparent;
background:none;
width:95%;
height: 1px;
border-top-style:dotted;
border-top-color: #7b7e81;
border-top-width: 1px;
border-bottom: none;
border-left: none;
border-right: none;
}

Hauchdünne Trennlinien mit dem hr-Tag. Den ganzen Beitrag anzeigen...
3. April 2012 Comments are Disabled Read More
Listen ohne Einrückung

Listen ohne Einrückung

Welcher angehende Webdesigner kennt das nicht: Man hat innerhalb des Content eine Liste mit Aufzählungen, diese wird standardmäßig aber immer eingerückt, dadurch steht die Liste nicht auf gleicher Höhe wie der Fließtext.

Hier ein kleiner Tip, wie man das ganz einfach umgehen kann.

 

Liste:

ul { margin:1em; padding:0; }

Lasst einfach das <ul> weg, dann werden die Zeilen in den <li> Tags nicht eingerückt…

Mit list-style-position: können Sie das Einrückungsverhalten kontrollieren.
Erlaubt ist eine der folgenden Angaben.

inside = eingerückt.
outside = ausgerückt (Voreinstellung).

http://forum.de.selfhtml.org/archiv/2004/11/t94690/

http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_position

Permanenter Link zum Beitrag (89 words, estimated 21 secs reading time)
13. April 2011 Comments are Disabled Read More
CSS-Hacks für den Internet-Explorer

CSS-Hacks für den Internet-Explorer

CSS-Hacks für den Internet-Explorer

Moderne Browser wie der Forefox oder Opera können mittlerweile die meisten CSS-Angaben korrekt interpretieren und darstellen. Doch leider gibt es da ja noch den so heiß geliebten Internet Explorer. Der IE ist für Webdesigner immer ein Graus, aber in der Programmierung von Webseiten nicht wegzudenken. Leider ist der IE fester Bestandteil fast aller Windows-Versionen. Da es noch immer Benutzer gibt, die nicht wissen, das es auch andere Browser wie z.B. den FF gibt, muss man als Webdeigner manchmal komische Wege gehen.

Hier kommen die sogenannten CSS-Hacks zum Einsatz…

CSS-Hacks für den Internet-Explorer. Den ganzen Beitrag anzeigen...
13. April 2011 Comments are Disabled Read More
Zwei Hintergrundbilder auf einer Homepage mit CSS

Zwei Hintergrundbilder auf einer Homepage mit CSS

Und es geht doch: Zwei Hintergrundbilder auf einer Homepage mit CSS

 

Es werden zwei CSS-Container benötigt

1. der 1. Container wird auf die gesamte Homepage (body-Bereich) oder den Inhaltsbereich angewendet.

2. Wird im Inhaltsbereich eine Tabelle mit 1 Zeile und 1 Spalte angelegt, die 100% Höhe und 100% Breite definiert bekommt

3. Der 2. Container wird dann auf diese Tabelle angewendet.

CSS-Code (in externer CSS-Datei)

.bgrechts {background-image:url(‘images/bg-grafik2.png’); background-repeat:no-repeat; background-position:bottom right; }

.bglinks {background-image:url(‘images/bg-li-u.png’); background-repeat:no-repeat; background-position:bottom left;}

 

HTML-Code

<body>

<table cellpadding=”0″ cellspacing=”0″ width=”100%” height=”100%”>
Dein Content

Zwei Hintergrundbilder auf einer Homepage mit CSS. Den ganzen Beitrag anzeigen...
13. April 2011 Comments are Disabled Read More