Bananas Development Blog: share your thoughts

Schöne Buttons

Schönes CSS Projekt für einheitliche und schöne Buttons sogar mit Icons.


CSS3 Buttons
CSS3 Buttons is a simple framework for creating good-looking GitHub style button links.


Download the source
Github Projekt

Schöne Sache, dass !

CSS drop shadow

CSS kann ja nun sehr viel ( ausser mal wieder im IE ). Ein tolles Feature ist ja der Schatten, der nun endlich ohne Bilder auskommen kann.

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.


CSS drop-shadows without images

Hier die Beispiele dazu.


Wenn wir schon bei dem Thema CSS sind habe ich hier noch eine Übersicht über die CSS Framework Systeme:
27 Great CSS Frameworks You Must Check Out


Preload von JS ohne es auszuführen

Preload CSS/JavaScript without execution
Preloading components in advance is good for performance. There are several ways to do it. But even the cleanest solution (open up an iframe and go crazy there) comes at a price - the price of the iframe and the price of parsing and executing the preloaded CSS and JavaScript. There's also a relatively high risk of potential JavaScript errors if the script you preload assumes it's loaded in a page different than the one that preloads.


Mal sehen was man damit alles machen kann...

Es muss nicht immer Flash sein

Flash hat ja in der vergangenen Zeit viel auf die Mütze bekommen.

Nun geht es noch weiter, denn mit HTML 5 und CSS 3 kann man schon Dinge erstellen, die man bisher mit Flash gemacht hat.

z.B ein Kleines Spielchen Anigma:
We often use Flash (or Silverlight) for rich and interactive web-based video games. This CSS3 demonstration is a puzzle game and a proof-of-concept of how we can use open standards to create games - though admittedly, not as facile as Flash yet if you compare it to Flash games on sites like Kongregate. HTML5’s


oder auch einen Music Player:
With HTML5’s <audio> and <video> APIs, which will enable us to utilize multimedia without dependence from proprietary plugins, we’ll eventually have a need for GUIs that provide our users with controls for the media we serve them. Though we could use static images in conjunction with other HTML elements (such as buttons) to build these interfaces, using just HTML and CSS to render media controls mean we’ll have a more malleable solution.


Noch mehr gibt es hier:
10 Interesting CSS3 Experiments and Demos

Schöne Buttons nur mit CSS

Mittlerweile ist es ja möglich die normalen Systemknöpfe nur mit CSS zu verschönern. Ohne irgendwelche Graphiken.

Hier folgt nun eine weitere Übersicht wie man dies machen kann.

Super Simple CSS Buttons



CSS abhängig von der Viewportgröße

Man kann ja via Javascript herausfinden wie groß der Anzeigebereich (Viewport) des Browsers ist.
Anhand davon kann man ja unterschiedliche CSS Dateien einbinden und somit die Anzeige anpassen.

Was nun aber schon funktionieren soll, ist das Selbe nur mit CSS, ohne JavaScript:
Different Stylesheets for Differently Sized Browser Windows

Sogar als W3C Media Queries deklariert

Das finde ich eine gute Lösung und macht manches einfacher.

Welcher Browser kann schon HTML5 oder CSS3

HTML5 und CSS3 sind geplant und gewisse Dinge werden schon unterstützt.
Wenn man aber wissen möchte was von welchem Browser, dann steht man erster mal alleine da.

Hier gibt es nun eine schöne Website die eine Übersicht gibt, was alles von den neuen Sachen in welchem Browser funktionieren.
Lohnt sich auf jeden Fall. Und als Bookmark sollte man sich das auch setzten

Social Media Icons nur mit CSS

Jeder kennt ja die tollen Social Media Icons.
Bisher sind das ja immer irgendwelche Icons und mann muss immer die passenden finden.

Nun kann man sowas aber auch mit css machen.
Create Social Media Icons in Pure CSS

Buttons nur mit CSS3 gestalten

Ashley Ford hat in seinem Blog ein tolles Tutorial mit Demo erstellt wie man buttons nur mit CSS3 rund, farbig und schön erstellt.

We want to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers. A button that is scaleable meaning that we can make it a variety of sizes and colours with ease.

Pretty CSS3 buttons

Was CSS 3 und border radius alles kann

Woha, ich wusste schon, dass das geht und ich verwenden das in manchen Dingen schon, aber hier sind nun ein paar Beispiele die es schon in sich haben:

So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images.

The hidden power of border-radius

CSS 3 Techniken

Was CSS3 alles so kann, hat man hier mal anhand von ein paar Beispielen zusammengefasst.
Denn es gibt ja viele Seiten auf den was geasgt wird aber immer ohne Beispiel.

Ihr braucht aber einen Browser der dies auch kann. (Firefox, Chrome, Safari, Opera)

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!
CSS3 Techniques You Should Know

CSS Tipps

Hintergrundfarbe und Schriftfarbe für selektierten Text ändern.
Geht mal wieder nicht im IE....

Runde Ecken mit CSS2 & CSS3
Habe ich schon erwähnt, dass da der IE mal wieder hinten an steht ?!

Roundup

Hier mal eine kleine Sammlung von interesanten Links die sich so angesammelt haben:

What is a good VCS today
-> Eine Übersciht was gerade bei den Version Control Systems los ist.

Really Useful CSS Tips and Tricks for Web Designers and Developers
-> Da kann man sich bestimmt was nützliches raussuchen.

Top 10 Programming Books
-> Einach mal auf Amazon nach der deutschen Ausgabe suche. Es lohnt sich.

Fapulous CSS Framework

Das hier scheint mir eines der wenigen CSS Frameworks zu sein, dass nicht zu überladen ist und dazu moch doe Möglichkeit bietet nur bestimmte CSS Teile zu verwenden.

Fapulous ist eine XHTML/CSS-Entwicklungsumgebung, die auf der "Faux Absolute Positioning (FAP)"-Technik basiert.


Fapulous Features:
• auf Flexibilität und schnelles Coding ausgelegt,
• fertige XHTML/CSS-Konstrukte mit CSS-Schaltern für häufige Anwendungsfälle,
• leicht verständlicher und erlernbarer Code,
• stabile und performante Techniken,
• modularer Aufbau und freie Lizenz.


Das XHTML/CSS-Framework für professionelle Websites