Tag css3
Hamburger-Menus gehören heute ja nicht mehr nur zu der mobilen Version einer Webseite, sondern sind immer öfter auch Teil eines Mega Menus. Mit einem Klick auf so ein Menu öffnet sich irgendwo ein verstecktes Menu. Der Vorteil dieser Art ist, man kann das Menu mehr stylen als bei einem Drop-down-Menu. Viele Webseiten zeigen einfach das […]... mehr auf chefblogger.me
Ich sage immer, dass Buttons das wohl wichtigste Element einer Webseite sind, denn ein schlechter Button wird übersehen und ein guter Button treibt den CTA in die Höhe. Leider machen viele Webdesigner ihre Buttons meistens sehr langweilig oder sie verstecken sie ganz (Cookie-Banner). Im Minimum gibt man einem Button Platz zum Atmen und eine klare [... mehr auf chefblogger.me
Wenn man eine neue Webseite designt ist man immer auf der Suche nach coolen Ideen und heute möchte ich euch eine zeigen. Ich habe hier nämlich eine Idee wie ihr Cards designen und positionieren und animieren könnt. Ich habe das schon mehrmals auf Webseite gesehen wo wichtige Infos gezeigt werden wollen oder um die letzten […]... mehr auf chefblogger.me
Diese sogenannten Blobs, man könnte es auf Deutsch als Tropfen übersetzen, sieht man zur Zeit immer öfters im Webdesign. Ja es ist fast ein Trend. Diese Elemente werden als normale Formen in Webseiten eingesetzt oder sogar als ganz wilde Animationen. Heute zeige ich euch wie ihr so eine Blob Animation als Hintergrund einsetzen könnt. Video […... mehr auf chefblogger.me
Laut Statistik sind ja unter meinen Lesern / Zuschauer ganz junge wie auch ganz alte Säcke (so wie ich einer bin) und darum erinnern sich nur ein Teil an ein legendäres Game aus den Nuller Jahren und zwar hiess es Moorhuhnjagd. Heute werden wir was ganz ähnliches machen und zwar ein Game mit HTML, CSS […]... mehr auf chefblogger.me
Heute zeige ich euch wie man so einen springenden Ball zeichnen und animieren kann. Video HTML <div class="ball"></div> CSS :root { --bg: #b4838d; --ball: #f36725; --rand: #000; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg); display: flex; justify-content: center; align-items: cent... mehr auf chefblogger.me
Mit Clip Path kann man nicht nur Bilder verrückte Formen geben, sondern sie auch als Teil einer Animation für Texte und andere Elemente verwenden. Clippy habe ich euch ja schon öfters gezeigt, denn dieses Tool ist sehr praktisch wenn man Bilder oder wie wir heute lernen auch andere Elemente zuschneiden können. Heute zeige ich euch […]... mehr auf chefblogger.me
Man sieht es bei Webseiten immer wieder – anstatt dass es der normale Mauszeiger ist, hat die Webseite eine eigene Version erstellt. Ich rede hier jetzt nicht davon, einfach ein SVG einzubinden – das könnte man auch machen. Nein, ich rede von einem mit CSS designten Mauszeiger. Viele denken, so ein Mauszeiger müsse sehr kompliziert […]... mehr auf chefblogger.me
Da ich mich in letzter Zeit immer häufiger mit CSS3 beschäftigt habe stieß ich neulich per Zufall auf Daniels Blog und habe die in einem Artikel beschriebene CSS-Uhr mit PHP zu einer funktionierenden Uhr weiterentwickelt. Wie auch die ursprüngliche Uhr benötigt die funktionsfähige Uhr nur HTML, CSS und PHP und arbeitet mit CSS-Animation und CSS-Tra... mehr auf netroid.de
Dank CSS3 ist es nun auch möglich, Webseiten ohne Flash, animierte GIFs oder JavaScript zu animieren. So ist der Genuss von Effekten ohne Plugin oder unzählige HTTP-Requests möglich, während der Einbau dennoch ohne komplexe Script-Konstruktionen möglich ist. Wenn diese Möglichkeiten geschickt genutzt werden, dann können sie einen wirklichen Mehr... mehr auf braekling.de
Nachdem wir vor wenigen Tagen die theoretischen Grundlagen für Animationen in CSS3 präsentiert haben, möchten wir heute einmal ein praktisches Beispiel für eben jene Animationen präsentieren: Eine Uhr, die zum Funktionieren keinerlei Javascript benötigt – nur ein wenig CSS und HTML reicht aus, um eine prinzipiell funktionsfähige Uhr zu erstel... mehr auf netroid.de
Mit CSS3 bekommen Webdesigner neue Möglichkeiten, um Farben zu definieren. Dadurch gibt es natürlich nicht schlagartig mehr Farben, aber sie können je nach Einsatzgebiet einfacher verwendet werden. Hinzu kommt Alphatransparenz, die ansprechende Transparenzeffekte ohne den Einsatz von Grafiken ermöglicht. Dieser Beitrag erklärt die neuen Farbnota... mehr auf braekling.de
Eine hochinteressante, neue Eigenschaft in CSS3 ist transform. Sie ermöglicht lineare Transformationen beliebiger Seitenelemente, d.h. wir können sie verschieben, rotieren, skalieren und scheren. Auf den ersten Blick wirkt das Konzept recht kompliziert und mag so manchen abschrecken, der von Vektoren und Matrizen Ausschlag bekommt. In Wirklichke... mehr auf braekling.de
Mit den DOM-Objekten localStorage und sessionStorage serviert HTML5 uns eine wunderbare Alternative zu den bisherigen Cookies. Zunächst werden die Daten dadurch nicht mehr bei jedem Request vollständig mitgesendet, was so manche Kopfschmerzen bei der Performance-Optimierung von Webseiten ersparen sollte. Außerdem werden die Begrenzungen von Cook... mehr auf braekling.de
Vor wenigen Tagen haben wir kurz in das Modul 2D-Transformationen in CSS3 geschaut, welches ja mittlerweile von allen moderneren Browsern unterstützt wird, möchten wir heute ein darauf aufbauendes weiteres CSS3-Modul blicken, welches noch ein wenig neuer und auch etwas komplizierter bzw. umfangreicher ist: Transformationen in der 3. Dimension. War ... mehr auf netroid.de
Für den modernen Webdesigner gehört es natürlich dazu, die Möglichkeiten, die einen die Webbrowser mit den brandneusten CSS-Modulen bieten, vollkommen auszureizen und zu testen. Ich nehme mich selber dabei nicht heraus. Ich probiere auch gerne die allerneusten Features aus. Und sehr gerne verwendet man diese neuen Features auch sofort in einem neue... mehr auf netroid.de
Lange Zeit ist es her, als der erste Teil der Miniserie über Animationen mittels CSS3 hier veröffentlicht wurde – zugegebenermaßen geriet die Serie im Laufe der Zeit ein wenig in Vergessenheit. Dennoch möchten wir heute noch einen zweiten Teil nachtragen. Nachdem wir bereits Transitionen vorgestellt haben und einen kleinen Exkurs hin zu den 2... mehr auf netroid.de
Eine kleine E-Grußkarte aus einem Kaffee-Becher. - Auch zum selber verschicken ;-).... mehr auf alexander-ploner.com
Zwar befindet sich CSS3 auch nach über 10 Jahren der Entwicklung noch immer in keinem fertigen, stabilen Zustand, dennoch veröffentlichten bekanntlich die Browserhersteller einige Neuerungen schon vorab – ein paar vereinzelte davon sind schon als stabil eingestuft (beispielsweise die Text-Schatten). Viel interessanter sind jedoch zumeist die ... mehr auf netroid.de
Nachdem wir vor wenigen Tagen Animationen mit CSS3 via transition vorgestellt haben, wollen wir dieses Mal noch eine Grundlage für weitere nette Möglichkeiten der Animation mit CSS3 legen und damit ein weiteres experimentelles CSS3-Modul vorstellen: 2D-Transformationen (siehe Link für die genaue Spezifikation vom W3C). Da es neben den 2D-Transforma... mehr auf netroid.de
Dank CSS3 erhalten Webdesigner endlich die Möglichkeit, ansehliche Schatteneffekte ohne Grafiken zu verwirklichen. Somit können Webseiten optisch geschickt aufgewertet werden, ohne den Quelltext unnötig kompliziert zu gestalten und ohne zusätzlichen Datenballast zu erzeugen. Die dazu notwendige Eigenschaft box-shadow wird mittlerweile abgesehen ... mehr auf braekling.de
Neben den neuen Schatteneffekten liefert CSS3 mit der Eigenschaft border-radius eine weitere Gestaltungsmöglichkeit, die zuvor nur mit Trickserei und Grafiken umzusetzen war. Endlich lassen sich so mit den Bordmitteln des Browsers abgerundete Ecken erzeugen, was z.B. in geschickter Kombination mit Schatten für anspruchsvolle, plastische Layouts ... mehr auf braekling.de
Das seit 2010 bestehende Responsive Webdesign, bietet eine automatische Anpassung von Webseiteninhalten an die Displaygröße und Auflösung verschiedener Endgeräte, sei es für den herkömmlichen Desktoprechner, für Smartphones, Smart-TVs oder Tablets. Die moderne nutzerfreundliche Technologie, ist eine flexible Gestaltungsmethode, um fließende Rasterl... mehr auf private-words.com
Die Entwicklung im Web ist sehr rasant. Nur wer dran bleibt und aktuelle Techniken effektiv einsetzt, kann sich Vorteile gegenüber Mitbewerbern verschaffen. Ein schönes Buch dazu stelle ich euch heute vor. Es behandelt die moderne Webentwicklung und zeigt vor allem auch den Einsatz der HTML5 Elementen. Das Fachbuch behandelt auf 291 Seiten sehr aus... mehr auf webmaster-glossar.de
In knapp 4 Wochen ist Weihnachten – habt ihr auf euren WordPress Seiten denn alle schon Weihnachten eingeläutet? Nun entweder könnt ihr natürlich eure Banner, Headerbilder und anderes mit Weihnachtsmotive verschönern, ihr könnt natürlich auch von Hand zum Beispiel ein CSS3 Schneegestöber einprogrammieren oder aber ihr singt euren Besuchern ei... mehr auf chefblogger.me
Wiedereinmal finden wir uns zusammen, um die Highlights des letzten Monats Revue passieren zu lassen. Es erwarten uns viele durchschnittliche Komödien, aber auch einige Perlen sind diesmal dabei, besonders Brothers, Black Swan und Tron: Legacy dürfen sich hier angesprochen fühlen. Meine Frau, unsere Kinder und ich Ein weiterer Teil der Meine Frau, ... mehr auf normansblog.de
CSS Profile-Card: Panels mit Titel/Untertitel
CSS Profile-Card: Panels mit Titel/Untertitel. Bild wird bei Mouseover durch Füllfarbe ausgeblendet und Social Icon schweben von unten in den Card-Footer. See the Pen #0048 – Panels with titl... mehr auf pixeltuner.de
Du hast verschiedene kleine Vorschaubilder und möchtest dem Besucher schnell und smart die Großversion zeigen, ohne eine neue Seite zu laden oder gar ein neues Fenster/Tab. In diesem Tutorial zeige ich dir, wie du das mit etwas JavaScript und die tollen Möglichkeiten mit CSS selbst erstellen kannst.... mehr auf webmaster-glossar.de
Früher war das Internet noch sehr einfach. Damals war CSS noch nicht so ausgeklügelt und man konnte fast nichts machen. Damals sahen alle Formulare gleich aus. So auch die Checkboxen die sie hier sehen können. Dann hat sich CSS entwickelt und jetzt mit CSS3 (und natürlich HTML5) kann man wirklich geile Sache machen. Heute bin […]... mehr auf chefblogger.me
Eine kleine E-Grußkarte aus einem Kaffee-Becher. - Auch zum selber verschicken ;-).... mehr auf alexander-ploner.com
Die Nischenseiten-Challenge ist nun schon 6 Monate her und ich möchte über die Entwicklung meiner Nischenseite schreiben. Dazu gehe ich auch auf die vielen Optimierungsmaßnahmen und Auswirkungen ein. ... mehr auf webmaster-glossar.de
I wanted to help getting the look and feel of Firefox closer to the native design of OS X Yosemite. This made me to fix a bug to refine the dropshadow for the Awesomebar and Search bar. I submitted a simple patch that got reviewed quickly, but I wasn't fully comfortable with what I have done. I wanted to change this and I did.... mehr auf alexander-ploner.com
Abzocke oder unumgängliche Preiserhöhung? Ich denke, ich bin nicht der einzige, der sich etwas auf die Füße getreten fühlt bei den derzeitigen Preisen für eine Kinokarte (ganz interessant dazu auch meine Kinostatistik 2010). Die Karte für Avatar damals kam genau 11€ ohne Brille, was schon ziemlich teuer ist aber naja.. Logenplätze, 3D-Vorstellung, ... mehr auf normansblog.de
..die CSS Eigenschaften meist selbsterklärend. Mit CSS3 kamen bereits einige tolle Eigenschaften, die ich hier immer wieder in meinen Tutorials nutze oder im Webmaster-Glossar.de Theme schon integriert habe..... mehr auf webmaster-glossar.de
Manchmal ist die Lösung so banal.. Dass der IE6 manchmal ein übler Troll sein kann und sein Nachfolger IE7 ihm in dieser Hinsicht in nichts nachsteht, brauch ich euch ja wohl kaum erzählen (ich habs jetzt natürlich trotzdem gemacht, einfach um ein cooles Intro zu haben ). Jedenfalls bin ich neulich erst auf einen richtig [...]... mehr auf normansblog.de
Da isser wieder! Heute ist zwar schon der 24. aber hier kommt erst das 15. Türchen. Ich wünsche euch und euren Familien ein schönes Fest und hoffe ihr vergebt mir meinen Rückstand bezüglich des Adventskalenders. Natürlich werde ich versuchen ihn trotz allem noch dieses Jahr zu komplettieren, wir werden sehen, ob das klappt. Die letzten [...]... mehr auf normansblog.de
CSS3 gibt uns Webdesigner viele Möglichkeiten, vorallem weil man damit wunderschöne UI Elemente kreieren können. Heute stelle ich ein Button vor, der sich bei Hover rotierend (rotate) vergrößert, die Farbe wechselt und Schatten (box-shadow) erhält.... mehr auf webmaster-glossar.de
CSS Profile-Card: Bildunterschrift und Bild mit Hover-Effekt
CSS Profile-Card: Profilfeld mit Bildunterschrift und Bild. Mehrere Symbole schweben von rechts auf die Karte. See the Pen #0051 – Profile box with caption, imag... mehr auf pixeltuner.de
Wenn man an einer Webseite rumprogrammiert ist man immer wieder auf der Suche nach einer coolen Idee mit der man die Aufmerksam der Webseitenbesucher / Kunden fesseln kann. Meistens reicht es schon wenn man kleine Effekte einbaut. Heute möchte ich euch mal ein Titel Effekt zeigen, der wirklich sehr einfach aufgebaut ist, aber sehr viel […]... mehr auf chefblogger.me
Für alle, die mal in den diesen Fehler rennen, hier die Lösung! C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/defaults.rb:57:in `exist?': "\x81" to UTF-8 in conversion from Windows-1252 to UTF-8 (Encoding::UndefinedConversionError) from C:/RailsInstaller/Ruby1.9.3/lib/ruby/site_ruby/1.9.1/rubygems/defaults.rb:57:in `default_... mehr auf normansblog.de
