Tag css3
Diese Art Eingabefelder sieht man immer wieder, vorallem in Apps oder grossen Webseiten ist das keine Seltenheit. Anstatt dass man ein einfaches Input Feld verwendet, habe ich hier mehrere genommen und diese nebeneinander angeordnet. Jetzt sieht es wieder aus wie ein Feld, aber man kann nun sehr schöne Eingaben machen. Natürlich muss es nicht nur [... mehr auf chefblogger.me
Habt ihr euch schon mal gefragt wie man einen gestreiften Hintergrund mit CSS machen kann? Dann hat das warten ein Ende, denn ich zeig euch heute wie sowas umsetzbar ist Video HTML <div class="container"></div> CSS :root { --farbe-gruen: #289a6a; --farbe-gelb: #ffcd00; --farbe-rot: #ef3340; } html, body { height: 100%; margi... mehr auf chefblogger.me
Habt ihr euch schonmal gefragt wie ihr einen Text auf eurer Webseite schützen könnt, so dass man ihn nicht rauskopieren kann? Hier zeige ich euch einen Weg wie ihr das machen könnt. Denkt einfach daran, dass so ein Weg eigentlich nichts bringt denn wenn man eine Webseite am Browser öffnet gibts eine lokale Kopie genannt […]... mehr auf chefblogger.me
Heute zeige ich euch also wie man einen einfachen Slider für seine Webseite bauen kann. Man braucht dazu nur HTML und eine kleine Portion CSS. Damit habt ihr eine gute Basis um auf diese grossen Slider Plugin verzichten zu können. Video HTML <div class="slider"> <img src="bilder/bild1.jpg" alt="Bild 1"> <... mehr auf chefblogger.me
Heute zeige ich euch, dass man für Scroll Animationen nicht unbedingt GSAP brauchen muss sondern es auch mit reinem CSS geht. Scroll Animationen sind eine coole Sache und bisher musste man dafür GSAP verwenden. GSAP ist eine (neu) freie Bibliothek mit dem man coole Animationen erstellen kann. Ich habe ja darüber schon öfters hier Scripte […]... mehr auf chefblogger.me
Heute zeige ich euch wie man einen Hintergrund Slider mit CSS erstellen kann. So wird das Hintergrundbild ausgetauscht während die Elemente gleich bleiben. Natürlich ist auch alles immer schön Responsive. Video HTML <body onload="slider()"> <div class="banner"> <div class="slider"> <img src="i... mehr auf chefblogger.me
Heute zeige ich euch mal eine kleine verrückte Idee wie ihr einen Titel erstellen könnt. Und zwar ists heute kein einfacher Text sondern ein Text der sich dreht – wie in einer Walze… Ein echt spannendes Experiment von dem man viel lernen kann. Video HTML <div class="container"> <div> <span style="--i:1;&#... mehr auf chefblogger.me
Heute möchte ich euch einen kreative Weg zeigen wie ihr Informationen in eure Webseiten präsentieren könnt. Entweder könnt ihr ein Schlagwort zeigen oder das ganze auch als Button verwenden. Video HTML <div class="container"> <div class="card"> <p><span>Info 1</span></p> <p>... 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
