Advitum.de auf Google+

Kategorie: CSS

Kategorie: CSS

Hier werden alle Artikel zum Thema CSS geschrieben.

CSS Animation Tutorial: hypnotische Spirale

CSS Animation Tutorial: hypnotische Spirale
Von am
Kategorien: CSS, Programmieren, Tutorials

Vor ein paar Tagen habe ich ein interessantes Gif gesehen, eine Animation einiger konzentrischer Halbkreise, die unterschiedlich schnell rotieren. Ich war drauf und dran, den gleichen Effekt mit ein bisschen JavaScript nachzubauen, als ich bemerkte, dass der gleiche Effekt sehr einfach mit CSS erzielt werden kann.

In diesem Artikel wende ich CSS-Animationen an, um einen interessanten Effekt zu erzielen. Artikel weiterlesen

CSS3-Transformationen mit Matrizen – flexibler geht nicht

CSS3-Transformationen mit Matrizen – flexibler geht nicht
Von am
Kategorien: CSS, Programmieren, Tipps

Als leidenschaftlicher Transformations-Nutzer habe ich diese Woche einen großen Schrecken bekommen, als plötzlich die CSS-Transformation skew nicht mehr funktionierte. Des Rätsels Lösung: Skew wurde aus dem CSS-Transform-Draft entfernt und wird deshalb in Firefox 14 plötzlich nicht mehr unterstützt. Doof nur, dass viele visuelle Tricks, die im Internet verwendet werden, ohne das Scheren eines Elementes nicht mehr funktionieren.

Auf meiner Suche nach einer Alternative stieß ich darauf, dass man in der Transformation auch direkt mit einer Matrix vollziehen kann. Leider ist das nicht ganz so einfach wie bisher, aber wenn man weiß wie es geht, ist die Transformations-Matrix sehr flexibel. Ich zeige Dir in diesem Artikel die gängigsten Transformation, die man mit einer Matrix vollziehen kann. Artikel weiterlesen

Templates, CSS und TypoScript – Typo3: Extension selbst erstellen

Templates, CSS und TypoScript – Typo3: Extension selbst erstellen
Von am
Kategorien: Content Management Systeme, CSS, PHP, Programmieren, Tutorials, Typo3

Im letzten Teil der Artikelserie »Typo3: Exension selbst erstellen« haben wir begonnen, ein kleines Kontaktformular für Typo3 zu programmieren. Die Extension funktioniert zwar, doch kann man noch vieles verbessern. Deshalb fügen wir in diesem Artikel nun HTML-Templates, CSS-Styles und TypoScript-Konfiguration ein.

Aus Grundlage dient uns hier die Kontaktformular-Extension, die wir im letzten Artikel erstellt haben. Artikel weiterlesen

Tagcloud mit PHP und JavaScript erstellen – Word Cloud d3

Tagcloud mit PHP und JavaScript erstellen – Word Cloud d3
Von am
Kategorien: CSS, JavaScript, PHP, Programmieren, Tutorials

Seit einigen Monaten quälte mich ein Problem. Ich hatte angefangen, Wordles in Javscript zu implementieren, um diese dann auf einer Seite dynamisch einzubinden. Doch leider scheiterte ich an der Performance. Doch endlich habe ich eine Lösung gefunden, denn Jason Davies hat es geschafft, Word Clouds mit JavaScript zu rendern.

Das ist wunderbar, denn diese sind mit ein paar JavaScript-Kenntnissen sehr flexibel in eine Seite einbindbar. Doch gibt es dabei einiges zu beachten. Damit der Einstieg auch gut gelingt, schreibe ich hier ein kleines Tutorial, wie man einfach mit Word Cloud d3 eine Tagcloud erstellt. Artikel weiterlesen

Designen einer Scrollbar – so geht es richtig

Designen einer Scrollbar – so geht es richtig
Von am
Kategorien: CSS, Design, JavaScript, jQuery, Tutorials

Am Anfang war der Frame. Und mit dem Frame kamen die Scollbars innerhalb der Seite. Und der Programmierer sah, dass es gut war.

Jahrelang war auch alles gut, bis dann schließlich die Designer die unendlichen Weiten des Webs unsicher machten. Alles wollten die Designer verändern, alles sollte schöner werden. Doch an Scrollbars bissen sie sich die Zähne aus. Scollbars ließen sich leider nicht ohne weiteres anpassen.

In diesem Artikel zeige ich, wie man trotzdem, übrigens ganz ohne iFrames, Scollbars erstellen kann, die auch noch toll aussehen. Artikel weiterlesen

Sass im Überblick – Gastartikel im NUMBOO Magazin

Sass im Überblick – Gastartikel im NUMBOO Magazin
Von am
Kategorien: CSS, Design, Programmieren, Tutorials

Heute ist, nach langem Warten, endlich die zweite Ausgabe des NUMBOO Magazins erschienen. Mit dabei sind diesmal Ebenenkompositionen in Photoshop, ein Interview mit Jonas Hellweg vom kulturbanause-Blog, minimalistische Webdesigns, HTML5 Boilerplate, fokus 2012 und ein mein Artikel, in dem ich Sass vorstelle.

Sass ist, kurz gesagt, eine Meta-Sprache, mit der CSS-Code strukturiert und flexibel geschrieben werden kann. Schaut euch den Artikel oder besser noch das ganze NUMBOO Magazin an, es lohnt sich!

Google-Map richtig auf der eigenen Internetseite einfügen

Google-Map richtig auf der eigenen Internetseite einfügen
Von am
Kategorien: Arbeit, CSS, Design, JavaScript, Programmieren, Tutorials

Es gibt ein paar Seitenelemente, die meine Kunden eigentlich immer auf ihrer Internetseite haben wollen—ein Beispiel hierfür ist eine Karte. Dank Google ist das Einbetten von Karten in Internetseite fast lächerlich einfach: Google-Maps öffnen, Position wählen und Code kopieren, so einfach kann das Leben sein—zumindest, wenn man keine besonderen Anforderungen hat.

Das Problem ist aber, das der durchschnittliche Kunde immer irgendwelche Extrawünsche hat—das fängt schon beim eigenen Firmenlogo als Marker-Icon an. Hier stößt das Kopieren und Einfügen des Embed-Codes von Google an seine Grenzen und nach einer kurzen Recherche ist klar: Wir müssen das mit der Google-Maps-API machen, das kann ja nicht so schwer sein—ist es aber doch.

Ich weiß nicht, ob es nur mir so geht, aber meiner Meinung nach ist das Referenzhandbuch der Google-Maps-API v3 extrem unübersichtlich. Ich musste stundenlang rumsuchen und rumprobieren, bis alles so war, wie ich es wollte. Deshalb will ich in diesem Artikel anhand eines Beispiels zeigen, was ich gefunden habe. Artikel weiterlesen

CSS Gradient Generator – CSS3 Farbverläufe generieren – CSS Quick-Tip

CSS Gradient Generator – CSS3 Farbverläufe generieren – CSS Quick-Tip
Von am
Kategorien: Arbeit, CSS, Design, Quick-Tips, Tipps

Vor einiger Zeit habe ich in einem Artikel einen Farbverlauf-Generator empfohlen, den ich damals benutzte. Aber mittlerweile benutze ich einen anderen Generator, den Ultimate CSS Gradient Generator von Colorzilla. Artikel weiterlesen

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?

Typo3 Tutorial: Wie wird aus einem Design eine fertige Typo3-Seite?
Von am
Kategorien: Arbeit, CSS, Design, PHP, Programmieren, Tutorials, Typo3

Content Management Systeme sind ein geniales Konzept — einmal eingerichtet und gut konfiguriert, brauchen die Editoren und Redakteure keinerlei technisches Know-How, um die Seite mit Inhalten zu füttern. Ich baue alle Seiten für meine Kunden auf einem CMS auf, denn der Kunde kann dann die Seite selbst verwalten.

Schaut man sich im Internet nach einem guten CMS um, so wird einem eine lange Liste angeboten, aus der man wählen muss. Meine Erfahrungen zur Wahl des richtigen Content Management Systems habe ich in dem Artikel Welches Content Management System nutzt ihr? geschildert.

Je besser ein CMS am Anfang vom Profi eingerichtet und konfiguriert wird, desto einfacher kann der Laie hinterher die Seite verwalten. Ein CMS-Riese, der dieses Prinzip perfektioniert hat und der deshalb immer wieder genannt wird, ist Typo3. Einmal eingerichtet, macht die Verwaltung und Änderung der Inhalte nahezu keine Arbeit mehr. Die Einrichtung des Systems selbst ist allerdings kompliziert, wobei die lückenhafte, schwer verständliche und über Hunderte von Webseiten verteilte Dokumentation von Typo3 und die meisten Tutorials keine große Unterstützung bieten.

Dabei ist das System hinter Typo3 — einmal verstanden — im Grunde sehr einfach und logisch aufgebaut.

Dieser Artikel richtet sich deshalb an alle Interessierten, die auf der Suche nach einem Einsteigertutorial sind und gerne das Prinzip von Typo3 verstehen wollen. Ich schreibe diesen Artikel in der Hoffnung, das ihr, wenn ihr diesen Artikel gelesen habt, euch nicht in den Irrwegen von Typo3 verstrickt, wie ich es anfangs getan habe. Artikel weiterlesen

Howto: Photoshop-Entwurf mit HTML & CSS umsetzen – ein Gastbeitrag auf t3n.de

Howto: Photoshop-Entwurf mit HTML & CSS umsetzen – ein Gastbeitrag auf t3n.de
Von am
Kategorien: Arbeit, CSS, Design, Photoshop, Programmieren, Tutorials

Auf t3n.de ist ein neuer Artikel von mir veröffentlicht worden. Hier eine kurze Artikel-Vorschau:

Photoshop-Entwurf mit HTML & CSS umsetzen

Der Großteil des modernen Internets setzt sich aus HTML und CSS zusammen, den Grundbausteinen einer jeden Internetseite. Was man sieht, wenn man eine Internetseite öffnet, sind nichts weiter als viele Zeilen HTML-Markup und CSS-Code, aber am Anfang jeder Internetseite steht doch die Idee für das Design im Kopf irgendeines Webdesigners.

Natürlich wäre es möglich, dass der Webdesigner jetzt sofort loslegt und seine Ideen codet, wahrscheinlicher ist aber, dass zunächst ein ganz anderes Programm sich auf seinem Desktop öffnet – Photoshop. Dank Photoshop können Designer und Kreative ihre Ideen vollständig auf das Papier beziehungsweise den Bildschirm bringen, im Grunde müssen sie dafür weder HTML noch CSS beherrschen. Der Designprozess kann also komplett vom Coding abgekoppelt werden, der Designer muss nicht zwingend auch der Coder sein.

Der kreative Kopf hinter einer Internetseite ist also immer der Designer — in diesem Artikel wollen wir uns aber dem Prozess des Codings zuwenden. Wie wird aus einem Photoshop-Entwurf das fertige Design in HTML & CSS?

Hier könnt ihr den ganzen Artikel lesen: Howto: Photoshop-Entwurf mit HTML & CSS umsetzen Artikel weiterlesen

  1. 1
  2. 2