Tag css3
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
Heute möchte ich euch mal eine kleine Einführung geben zu den modernen CSS Selektoren :has & :not. Damit kann man nämlich in CSS „programmieren“ und eine Art If / Then abfrage starten. In ein paar Jahren braucht ihr weder JS noch PHP und könnt ihr alles in CSS direkt machen 🙂 Und zwar bauen wir […]... mehr auf chefblogger.me
Habt ihr euch auch schon mal gefragt wie man es hinbekommt, dass man ein Element (Bild hier) das vor und das danach positioniert ist auch noch manipulieren kann? Im heutigen Blogbeitrag zeige ich euch wie das geht. Ihr könnt so aus einer Reihe von Bilder eines mit der Maus auswählen / hovern und ihr seht […]... mehr auf chefblogger.me
Wolltet ihr schon mal eine Art Zeitungsdesign in eure Webseite einbauen? Dieses Block Design kann man mit CSS bekommen. Heute zeige ich euch wie ihr so ein Split Screen erstellen könnt. Damit bleiben die Inhalt eurer Seite immer bei 50% / 50%. Video HTML <div class="container"> <div class="links"> <article> &... mehr auf chefblogger.me
Heute möchte ich euch ein neues CSS Feature zeigen und zwar heisst es corner-shape. Damit kann man wie es der Name schon sagt, den Ecken eine neue Form geben. Damit kann man viele coole Dinge machen. Ich stelle euch nicht nur ie neuesten Formen vor, sondern zeige euch an einem Beispiel was ihr damit alles […]... mehr auf chefblogger.me
Die sogenannten Tabs sind Elemete in einer Webseite wo man verschiedene Inhalte mehrmals am gleichen Ort positionieren kann und der Wechsel macht man über einen einfachen Button. Tabs gehören heute zur Grundausstattung einer Webseite. Ich persönlich mag sie nur bedingt, denn meistens sind sie immer sehr chaotisch. Heute zeige ich euch wie man so ei... mehr auf chefblogger.me
Heute zeichnen wir mal wieder etwas in CSS – mit solchen Experimente kann man nämlich immer viel lernen. Es gibt Vollprofis da draussen die können ganze Bilder malen wie die Künstler aus alten Tagen. Sehr beeindruckend. Heute zeiche ich mit euch ein Tropfen auf einer Oberfläche. Besonders spannend ist die Arbeit mit border-radius und box-shad... 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
CSS Profile-Card mit Titelfläche auf Bild
CSS Profile-Card mit Titelfläche auf Bild. Bei Hover dreht sich die Titelfläche und zeigt Social Icons. See the Pen #0062 – Title/Image with icons on hover by LittleSnippets.net (@littlesnippets) o... mehr auf pixeltuner.de
