CSS Transitions

24Feb2013

Hier ist das Ergebnis:

Oldie-Night Flyer 2012


So einfach funktioniert der Hover-Effekt der Arbeiten auf TZ-Design:

1
2
3
4
5
6
7
8
9
.element{
  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
}
 
.element:hover{
  -webkit-transform: scale(0.65);
  -moz-transform: scale(0.65);
}

Das sieht nicht nur einfach aus, es ist auch so einfach.

Was man sonst noch alles in Verbindung mit jQuery machen kann, könnt Ihr euch hier ansehen. jQuery Transit


flatOffice – Clean is delicious

13Feb2012

Endlich online….

FlatOffice ist ein WG-Planner, der das Denken für dich übernimmt. Es reduziert die Arbeiten in eurer WG auf einzelne Aufgaben und sorgt somit für einen Aufräumprozess, welcher sich extrem positiv von der normalen Excel-Liste oder handschriftlichen Plänen und festen Zeiten ab, indem die Motivation erhöht und die Arbeitsschritte transparenter macht. Das heißt statt das ganze Badezimmer macht Montag nur jemand das Waschbecken sauber und jemand anders die Toilette und im Laufe der Woche ein andererden Spiegel.

Es fühlt sich direkt nach weniger Arbeit an und durch das Punktesystem denkt man das man weniger tut. Zusätzlich gibt es Strafpunkte und auch Geschenke für die Fleißigen unter euch, sollte der Fall eintreten, dass jemand nicht alle Punkte innerhalb des Monats erreicht.

flatOffice  enthält

  • Todo-Liste
  • Shopping-Liste
  • Regeln
  • Geschenke
  • Statistiken über eure Wohnung

Zur Zeit gibt es auch schon eine Web App, welche ihr auf dem iPhone selbstverständlich
auch auf dem Homebildschirm ablegen könnt, allerdings ist iOS5 erforderlich.

 

Alles im allen ist flatOffice extrem ausbaufähig und wird bald auch auf facebook vertreten sein. Eine facebook-App für die Verbindung an die Außenwelt ist in Planung und so wird das Aufräumen und managen der WG zum sozialen Spaß.

www.flat-office.com

 

 


Apple Muster/Texture Tutorial

08Dec2011

Eines der geilsten Texturen, welche je die Welt erblickt habt, ist auf jeden Fall die von Apple. Ob in iOS oder auf dem Lion – Es sieht einfach klasse aus.

Ich will euch in ein paar Schritten Zeigen wir ihr sie ganz leicht auch machen könnt und mit Abwandlung euren Style oder eurer Design eine dezente Apple-Note hinzufügt.

Photoshop auf und LOS!

Macht eurer Dokument immer ein Stück größer. Braucht ihr 500px
nehmt einfach so um die 550px:

Dann kann es losgehen. Weiterlesen


Google maps – Starts here

03Dec2011

Für mein neues Projekt brauche ich viel Beistand von Google-Maps.
Die Dokumentation ist echt gut!

Als ich aber vorhin nach PIN-Integration gesucht habe, fand ich folgende Seite:

GOOGLE-MAPS TOUR

 

Ich beneide den Typen, der nur diese Tour bauen durfte.
Echt gut geworden. Das ist der Beweis leute. Keiner Braucht Flash !

Nur jeder Braucht einen Browser der funktioniert!

Ladet euch Firefox oder Chrome runter.


Siri wird kommen

14Nov2011

Jetzt ist es ziemlich sicher! Siri wird kommen.
Nicht nur das Apple keine Aussagen diesbezüglich gegeben hat, nein jetzt gibt es eine interne iOS5 Version.

Auf dieser wird momentan, so berichten viele Quellen im Internet, Siri auf anderer Hardware als iPhone4s getestet.

Es macht nur Sinn. Hier noch einmal meine Gründe die ich direkt nach dem iOS5 Release geschrieben habe.

Siri muss allein aus marketing und Kunden gründen kommen. Ich bin gespannt wie es ausgeht und wie schnell wir alle Siri haben.


Danke Apple für “-webkit-overflow-scrolling:touch”

16Oct2011

Endlich Apple! Ich weiß noch wie ich das erste Mal mit “iScroll” am verzweifeln war. Ich hatte Stunden lang gebraucht bis meine WebApp sich angefühlt hatte wie eine echte App.

Viel Code, viel Viewport-Verständnis und immer wieder ärger.

Das ist jetzt vorbei und einfacher geht es kaum!

Hier der wundervolle Code:

1
 -webkit-overflow-scrolling:touch;

Was auch neu ist und gut zu wissen, ist das position:fixed überarbeitet wurde. Auf meiner Seite der Shadow ist ein div welches fixed positioniert ist. Das hat auf iOS4 nicht funktioniert und der Shadow hatte immer die gleiche Größe und hing über dem Content.

Hier gibts ein Beispiel (Natürlich mit iPhone oder ähnliches testen mit iOS5 ;) )

Das klappt jetzt super!


Box-shadow macht Webdesigner glücklich!

16Oct2011

Ich freue mich immer einen Ast, wie gut Box-Shadow eigentlich funktioniert und wie geil es eigentlich ist, wenn man endlich den 4ten Pixel-Parameter versteht.

Ich will euch anhand ein paar Beispielen den 4ten tollen Paramenter erklären.

Die einfachste Form:

1
box-shadow:1px 1px 4px #000

Beispiel:

So richtig gut sieht das ja noch nicht aus. Doch das ist als würde man in Photoshop auf Shadow drücken und gut. man hat jetzt viele Möglichkeiten den Shadow zu beeinflussen. Kurze Erklärung was macht eigentlich welcher Pixelwert und wie nutzt man sie richtig nutzt.

  1. X-Achse – Hiermit könnt Ihr die Schattenposition für X festlegen. Positive Werte gehen nach Rechts, negative Werte gehen nacht Links.
  2. Y-Achse – Hiermit könnt Ihr die Schattenposition für Y festlegen. Positive Werte gehen nach Unten, negative Werte gehen nacht Oben.
  3. Größe - Ausbreitung des Shattens>
  4. Füllung - Ähnelt dem Photoshop Punkt Spread (Überfüllen), für mich nach dem Farbwert der wichtigste Punkt beim Box-Shadow
  5. Farbe – Nimmt alle Formen an RGB,HEX,RGBA. Die besten Ergebnisse bekommt man mit RGBA. Schatten ist immer durchsichtig.

Zur Anwendung:

Die besten Ergebnisse, wie ich finde, gibt es mit negativen Werten in der Füllung (Punkt 3.).
Ein Beispiel:

1
box-shadow:1px 1px 10px -8px #000

Versteht man die Thematik, kann man mit den Werten wirklich gute Ergebnisse erreichen, welche keines Falls billig aussehen.

Hier zum Beispiel ein Schatten der unten aus dem Div hervorschaut:

1
box-shadow:1px 20px 20px -30px #000

Bei Größeren Schatten und Schatten für Layer muss meißtens noch der Farbwert geändert werden und dazu nehme ich ausschließlich RGBA. Hier ein Beispiel:

1
box-shadow:1px 20px 20px -30px rgba(0,0,0,0.2)

Wie ich finde ist dieser Schatten reine Übungssache und macht echt Spaß.
CSS3 ist echt eine Bereicherung und Browserkopatibilität ist eigentlich gar keine Ausrede mehr für Box-Shadow. Der IE hat halt Pech gehabt und kriegt halt per CSS-Hack einfach einen Border.
Ab IE-9 geht Box-Shadow nun auch einfach -ms-box-shadow nutzen.

Viel Spaß damit!


iCloud und die Gema

15Oct2011

Ja das ist ja super! Apple bringt was raus und dann kommt die Gema und haut Ihnen sprichwörtlich ins Gesicht! Der recht coole Service “Musik überall verfügbar” (wenn man den überhaupt Lieder bei iTunes gekauft hat) ist für Deutschland gesperrt. Was soll der Mist, reicht es der Gema nicht das sie schon Spotify gekillt haben? Warum sehen sie es nicht ein, dass etwas anderes kommt (im Fall von Spotify = Grooveshark). Ist es dann wiederrum in Ordnung TelekomCloud zu nutzen??

Deutschland ist so ******

 

Weite News zu dem Thema gibts hier

Quelle: apfelnews


Siri und das iPhone4

13Oct2011

Zu Beginn erst mal ein “Danke Jobs, für die tolle Firma die du uns hier gelassen hast” Ruhe in Frieden !

20111013-223007.jpg

Nichts wurde wahrscheinlich schon öfter gesucht, als “Geht Siri auch für iPhone4?” oder “Warum nur iPhone4s und Siri ?”. Weiterlesen