www.archive-de-2014.com » DE » M » MADDESIGNS

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".

    Archived pages: 254 . Archive date: 2014-10.

  • Title: Sven Wolfermann | maddesigns - Part 9
    Descriptive info: Alle Beiträge von Sven Wolfermann.. Gastartikel im Webstandards-Blog: CSS Sprite.. Mai 2010.. Als Gastautor beschreibe ich im.. Webstandards-Blog.. die Vorteile von CSS Sprites.. Durch das zu zusammenlegen von mehreren Einzelgrafiken zu einer großen lassen sich Ladezeit der Website und HTTP-Requests verringern.. Am Beispiel einer Länderauswahl mit Flaggen-Icon erkläre ich die Vorteile in diesem Artikel.. Link zu.. CSS Sprite Ladegeschwindigkeit optimieren und HTTP-Requests verringern.. Tweet.. Blog-Artikel CSS3 linear-gradient Hintergrundverläufe mit CSS.. 4.. Im Marit AG TYPO3 Blog habe ich einen Artikel zum Thema Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient) geschrieben.. Dabei geht es um die Gestaltung von Teaserboxen ohne Bilder, also ausschließlich mit CSS.. Hier der Link:.. http://blog.. marit.. ag/2010/05/04/teaserboxen-mit-verlauf-ohne-bilder-css3-linear-gradient/.. Online Scheidung Deutschland überarbeitet.. 14.. Oktober 2008.. Online Scheidung, schnell und unkompliziert? Auf.. Online Scheidung Deutschland.. können Sie Kosten sparen, wenn Sie sich bei der Trennung mit dem Ehe-Partner einig sind.. maddesigns überarbeitete den Online-Auftritt zum Thema Scheidung.. Petplan the pet people in Australia.. Juli 2007.. Für unseren australischen Kunden Design Industries in Melbourne hat maddesigns die grafischen Vorlage für Petplan (eine Tierversicherung) mit XHTML CSS umgesetzt.. Die Templates sind validiert und benutzerfreundlich, aber mit einem hohen grafischen Anspruch.. Machen Sie sich selbst ein Bild von.. PetPlan Australia.. For our australian client.. Design Industries..  ...   einreichen können.. Es wurde sehr großen Wert auf die technische Umsetzung gelegt, sodass die Website ausschließlich mit CSS gestaltet wurde um modernsten Anforderungen zu entsprechen.. Das hat zudem den positiven Nebeneffekt, dass die Website suchmaschinenoptimiert ist.. Schnelle und unkomplizierte Abwicklung Ihrer einvernehmlichen Scheidung durch einen Anwalt:.. www.. scheidung-deutschland.. de.. SEO für Rechtsanwälte in Ludwigsfelde.. Januar 2007.. Die Rechtsanwaltskanzlei Bucksch Rasehorn Zimmermann in Ludwigsfelde beauftragte maddesigns mit der Suchmaschinenoptimierung ihrer bestehenden Seite www.. ra-lf.. Die bestehende Website beinhaltete ein kleines CMS, das erhalten bleiben sollte.. Alle Dateien wurden nach den Suchbegriffen optimiert und bei den Suchmaschinen angemeldet.. Am bestehenden Design wurden keine Veränderungen vorgenommen.. Zudem wurde ein Kunden-Bereich programmiert, in dem die Kunden den Status Ihrer Fälle einsehen können.. Rechtsanwaltskanzlei Bucksch Rasehorn Zimmermann in Ludwigsfelde.. DH Immobilien startet im Web.. Februar 2006.. DH Immobilien präsentiert sich jetzt ebenfalls im www.. Die langjährige Erfahrung im Immobilienhandel hat die Firma zum Spezialisten für Grundstücke und Häuser in Teltow-Fläming und LDS gemacht.. Dabei werden die Immobilienangebote unter www.. immonet.. de gepflegt und gleichzeitig automatisch in der Website aktualisiert.. Das hat den gleichzeitigen Vorteil der höheren Interessentenzahl bei Immonet und der ständigen Aktualität.. Natürlich wurde auch hier auch die Barrierefreiheit und W3C-Konformität geachtet.. dh-immobilien.. net.. Zurück.. Werk 83.. Pepo..

    Original link path: /author/sven/page/9
    Open archive

  • Title: CSS3 Adventskalender 2011 – Tag 22 | maddesigns
    Descriptive info: CSS3 Adventskalender 2011 – Tag 22.. 22.. Dezember 2011.. …im Webstandard Blog zum Thema “.. CSS4 Die Zukunft des Webdesign.. “.. CSS4.. Beitragsnavigation.. Vorheriger Beitrag.. Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21.. Nächster Beitrag.. Box-Sizing – CSS3 Adventskalender Tag 23..

    Original link path: /css3-adventskalender-2011-%e2%80%93-tag-22-1591.html
    Open archive

  • Title: CSS4 | maddesigns
    Descriptive info: Schlagwort-Archiv: CSS4..

    Original link path: /tag/css4
    Open archive

  • Title: Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21 | maddesigns
    Descriptive info: 21.. Dirk Weber.. Die letzten 3 Jahre haben uns Designern aufregende neue Möglichkeiten für die typografische Gestaltung von Schrift im Internet geschenkt.. Schriften über.. @font-face.. direkt ins Dokument einzubinden ist mittlerweile zur Selbstverständlichkeit geworden, neue.. CSS Filter.. und.. Transformationen.. haben unser gestalterisches Vokabular entscheidend erweitert.. Darüber hinaus versprechen neue CSS Eigenschaften wie.. mask-image.. (derzeit nur Webkit) und Javascript Libraries wie.. lettering.. js.. nie dagewesene Kontrolle über die Schriftdarstellung im Web.. Und trotzdem reichen alle diese Lösungen noch immer bei weitem nicht aus, um an die Grenzen des Möglichen zu kommen.. Jeder, der einmal versucht hat, einen HTML-Text mit einem Verlauf zu füllen, weiss wovon ich rede.. Ich möchte hier eine Methode vorstellen, die zu Unrecht noch nicht die Beachtung gefunden hat, die Sie verdient: das Gestalten von Text mit der HTML5 Canvas.. Dass die Canvas über viele aufregende typografische Methoden verfügt, hat sich bisher kaum herumgesprochen.. Wahrscheinlich liegt das daran, dass sie bisher eher als Domäne der Spieleentwickler wahrgenommen wurde.. Das ist Schade, denn Sie bietet uns Möglichkeiten, die weit über die klassischen Methoden die CSS zu bieten hat hinausgehen und das auch noch in allen modernen Browsern: Verläufe oder Bitmaps in Füllung und Outline, Masken, Schatten, Blendmodes sind nur einige ihrer Methoden.. Ich werde zu Beginn die Textwerkzeuge der Canvas API zu Schriftgestaltung vorstellen und im zweiten Teil zeigen, wie sich diese Methoden nutzen lassen um aufregende, barrierefreie und suchmaschinenfreundliche Webtypografie zu erzeugen.. Die Textfunktionen der Canvas.. Ich setze voraus, dass Ihr schon wisst wie man eine Canvas in einem HTML Dokument erstellt und anspricht.. Eine bestehende Canvas (wir haben den Kontext wie meist üblich mit ctx bezeichnet) muss zunächst vorbereitet werden.. Mit der Anweisung Font legen wir fest, welche Schrift in welcher Größe wir verwenden wollen:.. ctx.. font = "50px 'Helvetica' ";.. Weiterhin müssen wir festlegen, wie die Grundlinie verankert werden soll.. Fünf Möglichkeiten stehen zur Auswahl:.. top.. hinging.. middle.. alphabetic.. demographic.. bottom.. Die Entscheidung fällt uns leicht: bis auf.. werden alle Ausrichtungen von jedem Browser anders interpretiert Die Anweisung lautet somit:.. textBaseline = 'alphabetic';.. Für Typografen sicherlich von Interesse ist die Möglichkeit für die gesamte Canvas eine Skalierung festzulegen.. Gut zu wissen für den Fall, dass man mal für hochauflösende Displays entwickelt:.. scale(1,1);.. Bleibt zu klären, wie wir unseren Text füllen möchten.. Zur Auswahl stehen solide Farben, Verläufe oder Bitmap-Muster.. Der Einfachheit halber starten wir mal mit einer Farbe:.. fillStyle = "#ff0000";.. Die einfachste Methode, Text in eine bestehende Canvas zu schreiben ist die Methode.. fillText.. Die folgende Methode schreibt Hallo Welt in die Canvas, 50px von rechts und eine 100px von oben verschobene Grundlinie:.. fillText("Hallo Welt", 50, 100);.. Neben der.. Methode können mit der Methode.. textStroke.. auch Umrisslinien gezeichnet werden:.. lineWidth = 3; ctx.. strokeStyle = "#0000ff"; ctx.. textStroke("Hallo Welt", 50, 100);.. Verläufe.. Um anstelle einer soliden Farbe eine Verlaufsfüllung zu verwenden, muss diese vorher definiert werden.. Das geschieht in 2 Schritten:.. 1: Start- und Endpunkt festlegen:.. var gradient = ctx.. createLinearGradient(0, 0, 200, 50);.. Hier haben wir einen Verlauf mit dem Startpunkt (x:0, y:0) und dem Endpunkt (x:200, y: 50) definiert.. Color-Stops hinzufügen.. So sähe es aus, wenn wir einen Verlauf von weiss(0%) nach schwarz(50%) nach rot(100%) festlegen wollten:.. gradient.. addColorStop(0, 'white'); gradient.. addColorStop(0.. 5, 'black'); gradient.. addColorStop(1, 'red');.. Bitmapfüllungen.. Bitmaps können ebenfalls als Füllungen verwendet werden.. In dem meisten Fällen wird man ein jpg oder png verwenden, aber es lassen sich auch interessante Effekte erzielen, indem man dynamisch in einer Canvas generierte Bilder als Füllung einsetzt.. var img = new Image(),pattern; img.. src = "img/myimage.. jpg"; img.. onload = function(){ pattern = ctx.. createPattern(img, "repeat"); }.. Hier ist zu beachten, dass wir unbedingt warten müssen bis das Bild vom Server geladen wurde, bevor wir das Muster in der Canvas verwenden.. Das schöne an Verläufen  ...   die Grafik als Hintergrundbild zu.. Mach den HTML Text des Elementes transparent, damit er nicht mehr zu sehen ist, aber selektiert und kopiert werden kann und für Crawler und Screenreader zur Verfügung steht.. EIn Beispiel macht den Prozess verständlich: nehmen wir an, auf einer Website befindet sich eine.. h2>.. der folgender CSS Stil zugewiesen ist:.. #headline{ font-family: 'Helvetics', sans-serif; font-size: 40px; }.. zuerst ermitteln wir Stileigenschaften und Textinhalt:.. var elem = documentGetElementById("headline"), text = elem.. textContent, style = document.. defaultView.. getComputedStyle(elem, null), font = style.. getPropertyValue("font-family").. match(/^[^,]*/gi).. replace(/['"]*/gfont,""), size = parseFloat(style.. getPropertyValue("font-size")), topPadding=parseFloat(style.. getPropertyValue("padding-top")), leftPadding=parseFloat(style.. getPropertyValue("padding-left"));.. Jetzt wird s kompliziert: damit wir den Text in der Canvas deckungsgleich mit dem HTML Text auf dieselbe Grundlinie setzen können, müssen wir diese Grundlinie mit einem komplizierten Trick ermitteln.. Ich werde nur kurz beschreiben, wie die Technik funktioniert, wer mehr wissen will, sollte am besten die Source zu diesem Beispiel studieren:.. Zuerst müssen wir mit Javascript ein Element mit denselben Texteigenschaften wie unser.. ins Dokument schreiben, In dieses Element hängen wir nun ein 1 x 1 Pixel Bild mit der CSS-Eigenschaft vertical-align: baseline.. Wir lesen die offsetTop Eigenschaft dieses Bildes aus und haben mit diesem Wert auch die Position der Baseline.. Natürlich entfernen wir unsere Testelemente nachher wieder ordentlich.. Nun können wir die Canvas erstellen und der.. als Hintergrundbild zuordnen:.. var canvas = document.. createElement("canvas"), top = topPadding+height; if (this.. canvas.. getContext) { var ctx = canvas.. getContext('2d'); ctx.. font = size+"px '"+font+"'"; ctx.. textBaseline = 'alphabetic'; ctx.. scale(1,1); ctx.. fillStyle = "green"; ctx.. fillText (txt, Padding, top); var img = canvas.. toDataURL(); elem.. style.. color="rgba(0,0,0,0.. 0)"; elem.. backgroundImage="url("+img+")"; }.. Im vorliegenden Fall wurde eine einfarbige Schrift durch eine einfarbige Schrift ersetzt.. Das macht natürlich außer zu Demonstrationszwecken keinen Sinn.. Diese kleine Galerie zeigt aber, welche Möglichkeiten uns diese Methode sonst noch eröffnet.. Die Beispiele wurden mit.. fontastiq.. erstellt, einer Javascript Library für Schriftmanipulation mittels Canvas an der ich zurzeit arbeite und die Ihr auf Github Forken könnt sobald ich die gröbsten Kinderkrankheiten entfernt habe.. Selbstverständlich muss man sich nicht nur mit den Standardfunktionen der Canvas zufrieden geben.. Schließlich gibt es mittlerweile eine große Zahl an Javascript Libraries zur Grafikmanipulation wie z.. :.. Pixastic.. paintbrush.. Caman.. oder.. Bitmapdata.. , mit denen sich aufregende Effekte erzielen lassen.. Ich hoffe jedenfalls, dass dieser kurze Artikel Euch einige Anregungen geben konnte um weitere ausgefallene typografische Effekte zu schaffen.. Gastautor.. Dirk Weber (eleqtriq).. ist Interfacedesigner und Webentwickler im schönen Hilden bei Düsseldorf.. Dirk schreibt in seinem Blog.. eleqtriq.. com/de/.. über Webstandards, UX und Flash.. Eines seiner Projekte ist.. CSS3Warp.. ein Text-to-Path Generator.. Dirk.. twittert.. zudem aktiv über seine Projekte.. Demo.. Welche Möglichkeiten sich daraus ergeben, wird in der.. Canvas-Demo.. deutlich.. canvas.. CSS3 Adventskalender 2011 – Tag 20.. 4 Gedanken zu Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21.. Pingback:.. Adventskalender am 21.. Dezember F-LOG-GE.. Anselm H.. sagt:.. Dezember 2011 um 08:32.. Wie ist es denn mit Accessibility von solchen Javascript-erzeugten Canvas Texten? Und mit Abwärtskompaibilität?.. Ich denke, auch das trägt dazu bei, dass diese Methode noch wenig Beachtung bekommt.. Peter.. Dezember 2011 um 18:25.. Man kann zwischen öffnendem und schließendem Canvas-Tag Ersatzinhalt notieren.. Im Endeffekt ist Canvas nichts anderes als ein normales Bild-Element, auch in Hinblick auf Accessibility.. dirk.. Dezember 2011 um 23:53.. @Anselm, diese Methode generiert, wie im Artikel beschrieben, ein Bild, das Data URI encoded als Hintergrundbild an ein Element gehängt wird.. Nutzer älterer Browser oder ohne Javascript sehen dann halt den ursprünglichen HTML-Text.. Deswegen ist Accessibility und Degradation kein Prob, alle Browser bis hinunter zu Mosaic 1.. 0 werden unterstützt.. @peter: stimmt, ist aber in diesem Fall nicht notwendig.. Schließlich ist die Canvas hier nur ein Vehikel um besagtes Bitmap zu erzeugen und taucht garnicht erst im DOM auf.. Kommentare sind geschlossen..

    Original link path: /fortgeschrittene-webtypografie-mit-canvas-und-css-2-1561.html
    Open archive

  • Title: Dirk Weber | maddesigns
    Descriptive info: Alle Beiträge von Dirk Weber..

    Original link path: /author/eleqtriq
    Open archive

  • Title: CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19 | maddesigns
    Descriptive info: CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19.. 19.. Christian (derSchepp) Schaefer.. Nachdem CSS 2.. 1 uns Ende der 90er einigermaßen solide Werkzeuge zum Layouten von Seiten ohne Tabellen an die Hand gegeben hat, ging es bei CSS3 zunächst viel darum, uns mit mehr dekorativen Gestaltungsmöglichkeiten auszustatten.. Heute haben wir endlich einbettbare Schriftarten, runde Ecken, Farbverläufe, semitransparente Elemente und Farbwerte, Box- und Textschatten usw.. Soweit, so gut.. Der Blick in Richtung Photoshop und dessen Featureset offenbart jedoch immer noch Lücken.. In Photoshop haben wir zum Beispiel die Möglichkeit, Bereiche zu entsättigen oder zu schärfen und weichzuzeichnen.. Wofür könnten wir diese Effekte brauchen? Nun, ein Entsättigen oder ein Weichzeichnen bestimmter Areale einer Seite hilft dem Benutzer, sich auf unangetastete Bereicher besser zu fokussieren.. Ein unscharf maskieren, was ein unglücklicher Name für eigentlich eine Nachschärfungsmethode ist, könnte man im Browser kleinskalierte, und damit einhergehend detailarm gewordene Bilder wieder knackiger machen.. Schön wäre, wenn wir diese Effekte genauso auftragen könnten, wie wir mit.. opacity.. ganze Areale transparenter machen.. Für einen Entsättigungseffekt müssten wir stattdessen aufwändig per JavaScript durch die Farbwerte aller betroffenen Elemente zirkeln, und diese durch ihre entfärbte Pendants ersetzen.. Leider scheitert dieser Ansatz spätestens in dem Moment, wo wir auf usergeneriertes Bild- oder Videomaterial treffen.. Hier könnten wir zu.. HTML5 Canvas wechseln, das es uns erlaubt, jeden Pixelwert einzeln zu manipulieren.. Dabei helfen uns zwar bestimmte Canvas-Effektbibliotheken wie.. CamanJS.. Hoverizr.. , aber die Umsetzung bleibt anstrengend.. Einen Unschärfeeffekt können wir bislang ebenfalls nur tricksen, indem wir Texte mit.. einem text-shadow gleicher Farbe versehen.. und bei.. einfarbigen Boxen einen box-shadow zum Einsatz bringen.. Wieder müssten wir für Bilder oder Videos auf Canvas ausweichen.. Einen ziemlich brutalen Ansatz fährt das Framework.. blurry.. , das nämlich weichzuzeichnende Bereiche inklusive Text via Cufón nach Canvas überführt und sie dort im Ganzen weichzeichnet.. Unscharf Maskieren, also nachschärfen, können wir hingegen gar nicht mit CSS umsetzen.. Hier würde der Weg einzig und allein über Canvas führen.. Filter über SVG.. SVG kennt eine riesige Palette an.. Filtern.. , so etwa Überblenden, Farbüberlagerungen, Helligkeits- und Kontrastanpassungen, Beleuchtung und Reliefeffekte, gausssche und bewegte Unschärfe, Wolken und Rauschen, et cetera pépé.. Wir haben mit SVG einerseits die Möglichkeit, anstatt unseren Texte und Bilder in HTML einzubetten,.. diese in ein SVG zu packen, innerhalb dessen wir dann Filter auftragen können.. Es dürfte Markup-technisch jedoch ungewohntes Terrain sein, Texte mit folgender Syntax einbauen zu müssen:.. text id="header" font-family="Arial" font-weight="900" font-size="40" x="20" y="55%" SVG Example /text.. Cooler ist daher das ForeignObject/xlink in SVG, das es uns erlaubt,.. normale HTML-Abschnitte in das SVG einzusetzen.. , die dann via Filter umgestaltet werden können.. Damit lässt sich.. eine komplette HTML-Seite ins SVG einbetten und von A-Z umfärben.. ein nur einzelnes eingebettetes Bitmap-Bild weichzeichnen.. Der Grad der Unterstüzung ist schon.. recht weit gediehen.. , fehlt nur noch der IE, der mit Version 10 endlich nachzieht.. Firefox geht seit Version 3.. 5 noch einen Schritt weiter und ermöglicht es, in HTML SVG-Filter anzuwenden, die in einer externen SVG-Datei definiert  ...   { filter: url(blur.. svg#gaussian_blur); }.. ie img { margin: -2px; filter: progid:DXImageTransform.. blur(pixelradius=2); zoom: 1; } /style /head body img src="stadt.. jpg" alt="Some rights reserved by zigazou76" width="500" height="333" /body /html.. margin: -2px gleicht den erhöhten Platzverbrauch aus.. zoom: 1 sind bei Filtern für die IE6/7 immer notwendig.. Wichtig zu wissen ist, dass der IE 10 keine Filter mehr unterstützen wird.. Hier das erweiterte Beispiel.. Weil man nun aber erkannt hat, wie unglaublich praktisch die SVG-Filter von Firefox sind, hat sich das W3C gedacht, man müsste diesen Ansatz doch mal standardisieren, und so wurde die W3C FX Task Force gegründet, welche nun die ersten Drafts für offizielle.. W3C Filter Effekte vorgelegt hat.. Diese Filter funktionieren im Prinzip genau so, wie sie der Firefox vorexzerziert, also mit Verweis auf eine externe URL, die den Filter unter einer id bereithält.. Darüberhinaus definiert man aber auch ein paar Filter-Shortcuts für die prominentesten Filter, die dann keine externe Datei benötigen.. Diese Shortcut-Filter wären:.. grayscale.. sepia.. saturate.. hue-rotate.. invert.. brightness.. contrast.. blur.. drop-shadow.. Das Gute an den Filter-Shortcuts ist zudem, dass man per Shortcut angewendete Filter in CSS animieren kann, z.. so:.. foo { filter: blur(2px); transition: filter 1s ease-in-out; }.. foo:hover { filter: blur(0); }.. Zu guter letzt soll auch noch eine Möglichkeit bereitgestellt werden, OpenGL/WebGL-Verformungs- und Shaderfilter zu definieren,.. die das entsprechende Element z.. dreidimensional verformen.. :.. Praktischerweise sind vergangene Woche endlich erste Umsetzungen dieser Filter in der WebKit-Engine gelandet und nehmen nun den Weg über die.. WebKit-Nightlies.. (im OSX-Nightly läuft es schon) über.. Chrome Canary.. , dann über die.. Chrome Beta.. , um schließlich in 3 Monaten im stabilen Allerwelts-Chrome zu landen.. Und irgendwann sicherlich auch im Safari.. Und damit wären die wichtigsten Filter in 90% 95% aller Browserversionen am Markt verfügbar.. Für WebKit fügen wir für unser Beispiel also einfach ein.. -webkit-filter: blur(2px);.. zusätzlich ein, und machen es in dem Zug noch ein wenig interaktiv und zumindest im WebKit animiert:.. svg#gaussian_blur); -webkit-filter: blur(2px); -webkit-transition: -webkit-filter 1s ease-in-out; } img:hover { filter: none; -webkit-filter: blur(0); }.. blur(pixelradius=2); zoom: 1; }.. ie img:hover { margin: 0; filter: none; } /style /head body img src="stadt.. Das finale Beispiel gibt es.. online zu sehen.. give me money.. Eine erste Demo-Spielerei, die nicht nur CSS Filter verwendet, sondern auch CSS 3D Tranforms gibt es übrigens ganz frisch bei.. Simurai zu bewundern.. Viel Spaß mit den CSS Filtern!.. Update.. : Im aktuellen Chrome Canary sind die CSS Filter nun auch angelandet, sowohl unter Mac, als auch unter Windows.. Christian ”Schepp” Schaefer ist freiberuflicher Webentwickler aus Düsseldorf.. Er ist Autor der Ladezeitenbeschleuniger-Bibliothek.. CSS-JS-Booster.. sowie Moderator des wöchentlich erscheinenden.. Working Draft Podcasts.. and er verfolgt Eure Tweets mit seinem Account.. derSchepp.. filter.. CSS3 Adventskalender 2011 – Tag 18.. 4 Gedanken zu CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19.. Adventskalender am 19.. Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21 | maddesigns.. Box-Sizing – CSS3 Adventskalender Tag 23 | maddesigns.. Effects for the Web! | @drublic..

    Original link path: /css3-filter-1525.html
    Open archive

  • Title: Canvas | maddesigns
    Descriptive info: Schlagwort-Archiv: canvas..

    Original link path: /tag/canvas
    Open archive

  • Title: Internet Explorer 10 mit CSS3 linear-gradient Support | maddesigns
    Descriptive info: Internet Explorer 10 mit CSS3 linear-gradient Support.. 13.. April 2011.. 3 Kommentare.. Microsoft ist aufgewacht und arbeitet kontinuierlich an der Weiterentwicklung des Internet Explorer.. Gestern stellten Sie auf der.. MIX11 Konferenz.. in Las Vegas die neue Preview des IE10 vor.. Umfangreiche Neuerungen sind bereits integriert.. Ein Highlight ist, dass mit Erscheinen der finalen Version endlich auch der Internet Explorer CSS3-Verläufe unterstützen wird.. Nach dem aktuellem W3C Standard ist linear-gradient und radial-gradient in der zum Download frei gegebenen.. Preview des IE10.. implementiert.. background: -ms-linear-gradient (yellow, blue);.. Das halbe Dutzend ist also perfekt.. linear-top { /* Für WebKit alt (Safari, Chrome, etc.. ) */ background: -webkit-gradient(linear, left top, left bottom, ⏎ from(#c8482c), to(#fff)); /* Für WebKit neu (Safari, Chrome, etc.. ) */ background: -webkit-linear-gradient(top, #c8482c, #fff); /* Für Mozilla/Gecko (Firefox etc) */  ...   der linear-gradients.. Weitere CSS3-Neuerungen im IE10 sind CSS3 Multi-column Layout, CSS3 Grid Layout, CSS3 Flexible Box Layout, CSS3 Transitions und CSS3 3D Transforms es bleibt abzuwarten, wie schnell die finale Version veröffentlicht wird.. Ich denke dieses Jahr nicht mehr.. IE9 mit CSS3 border-radius und linear-gradient Problemen.. TYPO3.. org Relaunch könnte besser sein.. 3 Gedanken zu Internet Explorer 10 mit CSS3 linear-gradient Support.. Markus.. 15.. April 2011 um 08:49.. toll wäre wenn der aktuelle standart von w3c bei allen browsern funktionieren würde.. dann musste man nicht 6 Zeilen schreiben sondern nur 1!.. April 2011 um 08:53.. ich hoffe, dass das bald der Fall sein wird.. Philipp.. April 2011 um 14:20.. Hoffen wir nur das Microsoft sich zukünftig bei der Entwicklung neuer Browserversionen etwas ranhält und wir nicht ewig auf neue warten müssen..

    Original link path: /internet-explorer-10-mit-css3-linear-gradient-support-847.html
    Open archive

  • Title: IE9 mit CSS3 border-radius und linear-gradient Problemen | maddesigns
    Descriptive info: März 2011.. 18 Kommentare.. Nach Einführung des IE9 ist es nicht nur.. Fritz Weisshart.. aufgefallen, dass der IE9 zwar die propritären CSS-Eigenschaft filter zum Erstellen von Verläufen, wie im IE6-8 zwar weiterhin unterstützt, aber diese nicht so funktionieren wie erhofft.. Runde Ecken über border-radius unterstützt der Internet Explorer 9 nun ohne jeglichen Vendor-Präfix.. border-radius: 20px;.. Bisherige Internet Explorer konnten wie im.. CSS3 Adventskalender 2010 Tag 3.. beschrieben per.. bzw.. -ms-filter.. auch einfache Verläufe darstellen.. Leider unterstützt der IE9 keine Verläufe über CSS3 linear-gradient, sondern nur über Einbindung einer SVG-Grafik.. Deshalb müssen ab jetzt SVG-Grafiken erstellt werden, damit im Zusammenspiel mit border-radius auch der IE9 das Design darstellt wie vorgestellt.. Michael Barrett hat in seinem Blog abouthalf.. com das.. Problem.. ausführlich beschrieben.. Um das Beispiel des CSS3 Adventskalender 2010 Tag 3 aufzugreifen, sind kleine zusätzliche Änderungen notwendig.. SVG-Sprite Grafik erstellen.. Im Schritt 1 erstellen wir eine SVG-Grafik mit den Farbverläufen:.. 0" encoding="UTF-8" standalone="no"? !DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.. 1//EN" ⏎ "http://www.. dtd" ⏎ svg width="100" height="600" version="1.. org/2000/svg" defs linearGradient id="linear-top" x1="0%" y1="0%" x2="0%" y2="100%" stop offset="0%" style="stop-color: #C8482C; stop-opacity: 1;"/ stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/ /linearGradient linearGradient id="linear-right" x1="100%" y1="0%" x2="0%" y2="0%" stop offset="0%" style="stop-color: #C8482C; stop-opacity: 1;"/ stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/ /linearGradient linearGradient id="linear-bottom" x1="0%" y1="100%" x2="0%" y2="0%" stop offset="0%" style="stop-color: #C8482C; stop-opacity: 1;"/ stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/ /linearGradient linearGradient id="linear-left" x1="0%" y1="0%" x2="0%" y2="100%" stop offset="0%" style="stop-color: #C8482C; stop-opacity: 1;"/ stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/ /linearGradient linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%" stop offset="0%" style="stop-color: #E0EDF3; stop-opacity: 1;"/ stop offset="100%" style="stop-color: #30393D; stop-opacity: 1;"/ /linearGradient linearGradient id="searchForm" x1="0%" y1="0%" x2="0%" y2="100%" stop offset="0%" style="stop-color: #E0EDF3; stop-opacity: 1;"/ stop offset="100%" style="stop-color: #ffffff; stop-opacity: 1;"/ /linearGradient /defs rect x="0" y="0" width="100" height="100" ⏎ style="fill: url( #linear-top ) rgb(0, 0, 0);"/ rect x="0" y="100" width="100" height="100" ⏎ style="fill: url( #linear-right ) rgb(0, 0, 0);"/ rect x="0" y="200" width="100" height="100" ⏎ style="fill: url( #linear-bottom ) rgb(0, 0, 0);"/ rect x="0" y="300" width="100" height="100" ⏎ style="fill: url( #linear-left ) rgb(0, 0, 0);"/ rect x="0" y="500" width="100" height="100" ⏎ style="fill: url( #gradient ) rgb(0, 0, 0);"/ rect x="0" y="400" width="100" height="100" ⏎ style="fill: url( #searchForm ) rgb(0, 0, 0);"/ /svg.. erstellte SVG-Grafik im Sprite-Verfahren.. CSS anpassen.. Im 2.. Schritt werden über Conditional Comments für den IE9 spezielle Eigenschaften zugewiesen.. !--[if ie 9] style type="text/css" media="screen".. searchForm,.. searchButton,.. linear-top,.. linear-right,.. linear-bottom,.. linear-left,.. gradient { filter: none; background-image: url(gradients.. svg); background-size: 100% 600%; zoom: 1; } /style ![endif]--.. Für den IE9 wird die SVG-Grafik als Hintergrund zugewiesen (.. background-image: url(gradients.. svg);.. ) und die Hintergrundgröße auf 600% Höhe (.. background-size: 100% 600%;.. ) ausgedehnt.. Das wird durch die generierte Sprite-Grafik nötig (.. Michael Barett beschreibt die Vorgehensweise genauer.. ).. Zudem wird die Filter-Eigenschaft deaktiviert.. Für die einzelnen Elemente, die die SVG zugewiesen bekommen, ist es noch notwendig die.. background-position.. zuzuweisen um den richtigen Teil des Hintergrundes anzuzeigen.. CSS3 linear-gradient (Verlauf) IE9 Demo.. Es bleibt zu hoffen, dass Microsoft dem Internet Explorer, so.. wie Opera.. doch noch den aktuellen W3C-Syntax implementiert.. CSS3 gradient jetzt auch in Opera.. 18 Gedanken zu IE9 mit CSS3 border-radius und linear-gradient Problemen.. René.. März 2011 um 16:08.. Warum wundert es mich nicht mehr im Geringsten, dass Microsoft es einfach  ...   die aktuelle Version installiert hat.. Das würde unser Leben so viel leichter machen.. Die User hätten ein besseres Erlebnis und die Webentwickler weniger Stress beim entwickeln.. xor.. April 2011 um 17:25.. Oh Mann, jmartsch, wie alt bist Du?.. IE Boykott? Solche Aufrufe gibt es seit fast 20 Jahren!.. Und wenn es nur EINE Rendering Engine gäbe, hätten wir heute noch kein Javascript und keine Cookies und kein XHR und kein SVG und kein HTML5.. Außerdem wäre dann jeder Mensch Webentwickler, so wie auch jeder Autofahrer ist, oder?.. Tom.. 12.. April 2011 um 20:16.. Also mit der Variante geht s.. filter: progid:DXImageTransform.. gradient( startColorstr= #66CCFF , endColorstr= #1CB7FF ,GradientType=0 );.. April 2011 um 21:50.. Ja, aber nicht mit runden Ecken, da ragt der Verlauf über die runden Ecken hinaus.. André.. April 2011 um 15:18.. Doch, geht auch mit runden Ecken.. Um die Box mit dem Verlauf ein DIV-Element herumlegen, diesem Element die runden Ecken nochmal geben sowie overflow: hidden setzen.. Trotzdem danke ich wäre gar nicht drauf gekommen, dass ich überhaupt eine Lösung brauche, da ich bei meinem aktuellen Projekt gar nicht gesehen habe, dass der Verlauf aus den Ecken herausguckt (sehr kleiner Radius, sehr schwacher Verlauf).. Aber die Zoom-Funktion brachte es nun doch ans Licht.. Revision 22: IE10, Live.. js und Favicons | Working Draft.. April 2011 um 10:28.. Das macht aber kein Sinn, da wir dann wieder extra Markup haben, dann lieber SVG, tut ja nicht weg.. Jonas.. 28.. September 2011 um 16:35.. Was muss ich beim erstellen des SVG beachten? Irgendetwas verhindert, dass das SVG bei.. gradient {.. filter: none;.. zoom: 1;.. }.. richtig geladen wird.. Ich kann die Datei auf dem Webserver direkt öffnen und es wird korrekt angezeigt.. Wenn ich die Datei von hier nehme:.. http://maddesigns.. de/wp-content/uploads/2011/03/gradients.. svg.. geht es auch.. Nur eben nicht, von meniem Webserver warum das?.. 30.. September 2011 um 12:19.. hm, schwer zu sagen hast du den richtigen Doctype?.. IE9 CSS3 Support – CSS3 Adventskalender Tag 15 | maddesigns.. Verlauf und runde Ecken beim IE - XHTMLforum.. Gunnar Bittersmann.. Januar 2012 um 20:32.. Danke für den Tip.. Hat auch fast auf Anhieb funktioniert.. Fast, denn im Code auf der Seite hast du.. style= fill: url( #linear-top ) rgb(0, 0, 0);.. zu stehen, was kein valides SVG ist.. Im SVG selbst hast du escapet:.. Einfache Anführungszeichen (entweder als äußere oder als innere) hätten es auch getan.. Bei url() sind aber gar keine erforderlich:.. style= fill: url(#linear-top) rgb(0, 0, 0);.. wäre meine bevorzugte Variante.. PS: „on Samstag 19, 2011“? Irgendwas scheint mit deinem Theme nicht ganz zu stimmen.. Januar 2012 um 21:17.. habe den SVG-Code angepasst.. Danke für den Hinweis!.. Corner.. 27.. März 2013 um 13:18.. Hi,.. ich habe ein Problem unzwar wird der Verlauf zwar richtig angezeigt jedoch füllt er nicht den gesamten Bereich aus.. Das heisst wenn das Template zu breit ist dann habe ich an der rechten seite eine schmalen weißen Rand, der nciht mit dem Verlauf gefüllt wird.. Genau das selbe Problem habe ich wenn sich die Höhe des Contents ändert.. Dann habe ich je nach dem unten oder oben einen weißen Balken.. Habe schon versucht die Größe anzupassen, jedoch ohne Erfolg.. Kann mir da vielleicht jemand helfen?.. Vielen Dank im voraus.. mfg Corner..

    Original link path: /ie9-mit-css3-border-radius-und-linear-gradient-problemen-813.html
    Open archive

  • Title: linear-gradient (Verlauf) – CSS3 Adventskalender Tag 3 | maddesigns
    Descriptive info: linear-gradient (Verlauf) CSS3 Adventskalender Tag 3.. 3.. Dezember 2010.. 8 Kommentare.. Einen einfachen Farbverlauf für Hintergünde in CSS3 zu erstellen bedarf schon etwas Schreibarbeit Als Webkit 2008 begann die Eigenschaft umzusetzen, orientierten sie sich an der Spezifikation für.. Canvas.. Mozilla entwarf daraufhin einen einfacheren Syntax und dieser Syntax ist derzeit auch der empfohlene des W3C.. Bisher ist der Syntax nicht angeglichen.. Als Farbwerte können definierte Farbnamen, Hexadezimalwerte, RGB und HSL, oder RGBa und HSLa verwendet werden (aber was das alles bedeutet, zeigen wir in einem anderen Adventskalender Türchen).. Jetzt erstmal ein Code-Beispiel:.. linear-gradient(yellow, blue); linear-gradient(top, yellow, blue); linear-gradient(bottom, blue, yellow); linear-gradient(-90deg, yellow, blue); linear-gradient(270deg, yellow, blue); linear-gradient(top, yellow 0%, blue 100%);.. Alle diese Schreibweisen ergeben diesen Verfauf (theoretisch):.. Grundsätzlich sind 3 Werte wichtig:.. Wert: Beginnpunkt des Verlaufs / Gradzahl (also Richtung).. erste Farbe (ab Start).. zweite Farbe (bis Ende).. Für die verschiedenen Browser übersetzt, bedeutet das dann folgendes.. linear-top { /* Für WebKit (Safari, Chrome, etc.. ) */ background: -webkit-gradient(linear, left top, left bottom, ⏎ from(#c8482c), to(#fff)); /* Für Mozilla/Gecko (Firefox etc) */ background: -moz-linear-gradient(top, #c8482c, #fff); /* aktueller W3C working draft */ background: linear-gradient(top, #c8482c, #fff); /* Für Internet Explorer 5.. 5 - 7 */ filter: progid:DXImageTransform.. gradient⏎ (GradientType=0, startColorstr=#c8482c, endColorstr=#ffffff); zoom: 1; /* Für Internet Explorer 8 */ -ms-filter: "progid:DXImageTransform.. gradient⏎ (GradientType=0, startColorstr=#c8482c, endColorstr=#ffffff)"; }.. Ja, auch der Internet Explorer kann einfache Farbverläufe.. Über die Filter-Eigenschaft kann ein Farbverlauf auch im IE6-IE8 sichtbar gemacht werden.. Verlauf mit 4 verschiedenen Richtungen:.. Und der Quellcode der verschiedenen Richtungen:.. linear-right { background: -webkit-gradient(linear, right top, left top, ⏎ from(#c8482c), to(#fff)); background: -moz-linear-gradient(right, #c8482c, #fff); background: linear-gradient(right, #c8482c, #fff); filter: progid:DXImageTransform.. gradient⏎ (GradientType=1, startColorstr=#ffffff, endColorstr=#c8482c); -ms-filter: "progid:DXImageTransform.. gradient⏎ (GradientType=1, startColorstr=#ffffff, endColorstr=#c8482c)"; zoom: 1; }.. linear-bottom { background: -webkit-gradient(linear, left bottom, left top, ⏎ from(#c8482c),  ...   background: -moz-linear-gradient(top, #56666d, #30393D); background: linear-gradient(top, #56666d, #30393D); filter: progid:DXImageTransform.. gradient ⏎ (GradientType=0, startColorstr=#56666d, endColorstr=#30393D); -ms-filter: "progid:DXImageTransform.. gradient ⏎ (GradientType=0, startColorstr=#56666d, endColorstr=#30393D)"; } /* IE7 Fix */ *+html.. searchButton { vertical-align: top; margin-top: 1px; zoom: 1; }.. UPDATE:.. Webkit.. Opera.. IE9.. haben den Syntax geändert/erneuert.. Demo-Datei zu CSS3 linear-gradient (Verlauf) mit IE9-Support aufrufen.. Browser-Support:.. Safari 4+, Chrome 2+, Firefox 3.. 6+, IE 6-8, Opera 11.. 10beta.. IE9 unterstützen die Methode mit SVG-Hintergrundbildern.. Am Tag 4 geht es im.. Webstandard-Blog.. mit Detailierter Verlauf CSS3 Adventskalender.. weiter.. CSS3 Adventskalender Tag 2.. CSS3 Adventskalender Tag 4.. 8 Gedanken zu linear-gradient (Verlauf) CSS3 Adventskalender Tag 3.. Tobias Barth.. Dezember 2010 um 08:59.. Man ist ja richtiggehend erstaunt, dass auch der IE Verläufe kann.. Immerhin ist die Syntax schräg.. Oben sollte es übrigens Hexadezimalwerte heißen statt Heximalwerte , nehme ich an.. Dezember 2010 um 09:01.. Hexadezimalwerte ist korrekt.. Danke für den Tipp! (war spät gestern.. Dieter.. Dezember 2010 um 20:01.. Hallo Sven,.. herzlichen Dank für dieses Artikel.. Für den Firefox und Webkit-Browser (Chrome und Safari) habe ich Farbverläufe mit gradient (CSS3) in meinem Blog bereits realisiert.. Filter für den Internet Explorer hatte ich die Ersatzlösung mit Filter erst einmal gelassen, aber nach diesem Türchen des CSS3-Adventskalenders nun doch ergänzt.. Hilfreich dabei war mir übrigens der CSS Gradient Generator unter.. display-inline.. fr/projects/css-gradient/.. , den ich hierfür empfehlen kann.. Freue mich schon auf die weiteren Türchen des Adventskalenders.. Beste Grüße.. box-shadow (Schatten) CSS3 Adventskalender Tag 5 | maddesigns.. WebKit ändert CSS3 Gradient Support und orientiert sich am Mozilla Syntax | maddesigns.. CSS3 gradient jetzt auch in Opera | maddesigns.. 18.. März 2011 um 19:33.. Der IE9 macht das total kaputt.. Der Verlauf bleibt nicht innerhalb von border-radius.. Ein Hack anybody?.. IE9 mit CSS3 border-radius und linear-gradient Problemen | maddesigns..

    Original link path: /linear-gradient-verlauf-css3-adventskalender-tag-3-363.html
    Open archive

  • Title: CSS3 gradient jetzt auch in Opera | maddesigns
    Descriptive info: Gestern wurde mit der.. Veröffentlichung der Beta von Opera 11.. 10.. der Support von linear-gradient unterstützt.. Damit reiht sich.. in die Liste der Browser (z.. Chrome, Safari, Firefox) die Hintergrundverläufe mit CSS3 unterstützen.. Auch Opera hat wie viele Andere gradient über den Vendor-Präfix implementiert.. background: -o-linear-gradient (yellow, blue);.. Man kann also die Eigenschaften für CSS3 Gradient jetzt wie folgt angeben:.. ) */ background: -webkit-linear-gradient(top, #c8482c, #fff); /* Für Mozilla/Gecko (Firefox etc) */ background: -moz-linear-gradient(top, #c8482c, #fff); /* NEU NEU NEU  ...   background: linear-gradient(top, #c8482c, #fff); }.. Leider unterstützt der Anfang der Woche veröffentlichte Internet Explorer 9 kein CSS3 linear-gradient, sondert nur die Möglichkeit über SVG.. Wer unbedingt einen einfachen linear-gradient (Verlauf) für Internet-Explorer 6-8 einbinden möchte, dem empfehle ich den Artikel aus dem.. CSS3 Adventskalender 2010.. CSS Performance Artikel Teil 2.. 3 Gedanken zu CSS3 gradient jetzt auch in Opera.. linear-gradient (Verlauf) CSS3 Adventskalender Tag 3 | maddesigns.. Klaus.. Mai 2011 um 13:09.. Habe ich sofort geändert bzw.. ergänzt.. Herzliche Grüße..

    Original link path: /css3-gradient-jetzt-auch-in-opera-799.html
    Open archive





  • Archived pages: 254