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: maddesigns – Freelancer für Responsive Webdesign, HTML5 & CSS3
    Descriptive info: .. maddesigns.. Suchen.. Primäres Menü.. Zum Inhalt springen.. Publikationen / Vorträge.. Kontakt.. Impressum.. Suche nach:.. CSS3.. ,.. RWD.. Responsive Tabellen.. 26.. August 2014.. Sven Wolfermann.. 7 Kommentare.. Responsive Retrofitting Teil 1.. Wenn wir mit bestehenden Inhalten planen müssen, kommt es oft vor, dass wir Daten-Tabellen responsive darstellen sollen.. Diese Tabellen sind naturgemäß meist sehr schwierig auf kleinen Bildschirmen abzubilden, viele Tabellen sind sehr groß und enthalten viele Daten.. Das rührt daher, dass Redakteure (bzw.. diejenigen, die für den Inhalt verantwortlich sind) versuchen über Excel-Tabellen komplexe Daten abzubilden und die Daten so ins Web übernommen werden (sollen).. In der Vergangenheit war der Platz auf großen Bildschirmen vorhanden, im Multi-Screen-Zeitalter und in einer responsiven Website heutzutage, meist nicht mehr.. Weiterlesen.. css.. responsive.. tabelle.. Responsive SVG-Logos.. 24.. Juli 2014.. 1 Kommentar.. Letztens flog mal wieder ein Link durchs Netz, der vielversprechend klang –.. http://www.. responsivelogos.. co.. uk/.. (via.. @gisugosu.. ) – ein Showcase wie sich Logos ebenfalls „responsive” verhalten können und dabei aber ihre Wiedererkennbarkeit erhalten bleibt.. Ich hatte mich auch gefreut, als ich ein SVG als Quelldatei sah, was dann geschah, glaubt ihr nicht….. böses heftig.. co – geh weg!.. Logo.. svg.. CSS.. SVG Sprites vs.. Icon-Fonts.. 8.. 11 Kommentare.. Aktuell stellt sich mir häufiger die Frage „SVG-Icons oder Icon-Fonts” zu verwenden.. Wer für ein Multi-Display-Web entwickelt, kommt nicht drumherum Bilder und Icons hochauflösend bereit zu stellen.. Mit dem iPhone4 und dem sog.. „Retina Display” hat man schnell gemerkt, dass normal auflösende Bildinhalte auf dem Display pixelig aussehen.. Bisher war die einfache Lösung, die Icon-Sprites (PNG) in doppelter Auflösung anzulegen bzw.. generieren zu lassen.. Das Problem, dass die Icons dann trotzdem nur in einer „Ansichtsgröße” vorliegen, bestand weiterhin.. Iconfonts, also Schriften á la Dingbats, die anstatt Buchstaben und Ziffern Symbole haben, wurden bisher als ein adäquates Mittel für skalierbare Icons eingesetzt.. Dass das auch immer mit Problemen behaftet ist, werden viele Webentwickler schon festgestellt haben.. iconfonts.. icons.. CSS3 – position: sticky.. 16.. Mai 2014.. 4 Kommentare.. Mit position: sticky können wir nun endlich einen Container/Element ab einer bestimmten Position festsetzen.. css3.. position.. sticky.. Testing.. Webfonts *richtig* verwenden.. 6.. März 2014.. 5 Kommentare.. Da fragt sich jetzt der ein oder andere Webentwickler „Was kann man da falsch machen? Man bindet den.. (new) Bulletproof @font-face Syntax.. ein und gut ist“.. Problem hierbei wie immer unser geliebte OldIE, der Webfonts zwar schon im zarten Alter von Version 5.. 5 beherrschte, aber immer noch einen „alten“ Syntax braucht.. Das Problem:.. faux-bold.. Fehldarstellung – der Browser interpoliert die Schriftfetten.. font-face.. fonts.. performance.. webfonts.. Responsive  ...   hauptsächliche Arbeit beschleunigen und verbessern kann.. Mein aktueller Job besteht zumeist darin, Responsive Webdesigns in HTML-Templates umzusetzen, die dann im Anschluss in der Software-Entwicklung weiter verarbeitet werden.. Manchmal sind es Templates für Content-Management-Systeme, oft ist es aber auch die Grundlage für Java-betriebene Webseiten.. Ich habe überlegt, wie ich schnell und flexibel statische HTML-Templates generieren, gleichzeitig mit Sass (Compass) entwickeln und ein Browser-Reload (Live-Reload) machen kann.. Einige Systeme habe ich mir angeschaut und möchte kurz meine Erfahrung teilen.. Grunt.. Styleguide generieren mit Sass Grunt.. Ein in größeren Projekten immer wichtiger werdendes Thema ist in meinen Augen ein Styleguide, der einerseits als Dokumentation und andererseits für externe Dienstleister als Referenz genutzt werden kann.. Früher™ als man das Design ausschließlich in Photoshop machte, wurde natürlich auch der Styleguide in Photoshop erstellt — mit Bemaßung LOL! Diese Vorlage sollten Webentwickler dann nutzen, um ein Design möglichst pixelgenau umzusetzen.. Ich kann mich an keinen „Styleguide“ erinnern, der zu 100% stimmte.. Häufig waren Fehler in der „Bemaßung“ oder in Farbwerten… ihr kennt das.. grunt.. sass.. styleguide.. Mobile First IE8 Fallback mit Sass (Teil2).. 20.. Dezember 2013.. Im ersten Teil.. Mobile First IE8 Fallback mit Sass.. ging es darum, wie man mit dem IE8 umgeht, wenn man CSS und Media Querys nach dem „Mobile First“ Prinzip erstellt.. Das Mixin-Plugin.. Sass-IE.. hilft dabei ein gesondertes.. Stylesheet.. für den IE8 ohne @media Angaben zu generieren.. Die Lösung hat jedoch ein paar Schwächen, so können z.. Media Querys nur für einen Wert (min-width bzw.. max-width) und ein Medium (@media screen ) generiert werden.. Es ist also nicht möglich ein Media Query für zwei Werte zu schreiben.. Leider geht.. @media screen and (min-width: 450px and max-width: 650px).. damit nicht.. breakpoint.. fallback.. ie8.. internet explorer.. SCSS.. Beitrags-Navigation.. 1.. 2.. 9.. Weiter.. Ich bin Frontend-Entwickler und arbeite mit Webstandards, HTML5, CSS3, jQuery sowie Sass & Compass.. Zudem habe ich ein Augenmerk auf Performance-Optimierung, Accessibility und Responsive Webdesign.. Ich biete zudem Workshops und Schulungen für modernes Webdesign an.. auf.. Tag-Cloud.. #t3cm10.. adventskalender.. animation.. bestpractice.. border-radius.. box-shadow.. buch.. bug.. button.. compass.. crossbrowser.. first-child.. html.. html5.. ie.. ie9.. javascript.. last-child.. linear gradient.. media-queries.. multi-column.. nth-child.. pagespeed.. pseudo-selektor.. rahmen.. text-effekte.. text-shadow.. transform.. transition.. verlauf.. verlosung.. yslow.. Letzte Kommentare.. bei.. Henry Zeitler.. Stefan.. Andrea.. Links vom 26.. August 2014 - Florian Heinz.. Kategorien.. Adventskalender.. (48).. (22).. (33).. (61).. (1).. (11).. (6).. (2).. Wordpress.. Seiten.. Moderne Webentwicklung mit HTML5 CSS3 / Responsive Webdesign.. maddesigns blog.. In meinem Blog geht es um neue Techniken wie CSS3, HTML5 und Responsive Webdesign, sowie Sass & Compass.. Stolz präsentiert von WordPress..

    Original link path: /
    Open archive

  • Title: Vorträge und Publikationen von Sven Wolfermann | maddesigns | maddesigns
    Descriptive info: Vorträge.. demnächst:.. Responsive Webdesign mehr als ein Designtrend.. AMH-Herbsttagung, Hochschule Magdeburg 29.. 09.. 2014.. Programm.. Agiler Responsive Workflow.. Code.. Talks, Hamburg 09.. -10.. 10.. Session.. Responsive Webdesign as easy as it sounds.. TYPO3 Conference, Berlin 08.. SVG – weniger Pixel, mehr Fun!.. WebTechCon, München 26.. -29.. Sessions.. Frontends effektiv.. Web Developer Conference kompakt, Köln 02.. 12.. Frontends testen.. passé:.. Die Zukunft des E-Commerce ist Responsive.. Mobile Tech Con, Berlin 01.. -04.. Slides.. Tools und Tipps für den modernen Frontend-Workflow.. DWX, Nürnberg 14.. -16.. 07.. Faster RWD Development with Sass.. RWD Summit (online), 01.. -03.. 04.. Responsive Enhancement.. Webkongress, Erlangen 20.. -21.. 03.. Webinale Hands-On, München 02.. 2013.. Mobile Browser Wars.. Webinale, Berlin 02.. 06.. MobileTech Conference, München 18.. -20.. Testen von Responsive Webdesign.. Usability Stammtisch, Berlin 16.. Den Responsive Workflow leben.. Workshop Beschreibung.. RESS – RWD and Server Side Components.. webtechcon München, 27.. -30.. Schneller RWD-Projekte umsetzen mit Sass.. RWD – Die Geister die ich rief.. digitalvisions, Wien 04.. Responsive Webdesign Webseiten für unterschiedliche Endgeräte.. JavaScript Days, Berlin 25.. -27.. Workshop.. Typografie im Responsive Webdesign.. mobiletechcon, Berlin 02.. -05.. und.. Video.. CSS3 – verkannte und neue Features.. DWX Developer Week, Nürnberg 24.. Responsive Images/RWD Performance.. Webinale Berlin 03.. Responsive Web Design Process.. DWX Developer Week Nürnberg 24.. Webinale, Berlin 03.. Mobile Web – The Power of HTML5.. Mobile Forum, Stuttgart 17.. 0.. 5.. Session Slides.. Responsive Images.. Webmontag Karlsruhe, 13.. 05.. 2013.. Responsive Web Design with Sass Compass.. TYPO3camp Regensburg 26.. -28.. 2012.. Modern Frontend Development with Sass Compass – 1-tägiger Workshop.. Universität Ulm, 08.. The Responsive Web Design Process.. T3CON12 Stuttgart, 04.. -06.. Video (ungeschnitten mit technischen Pannen und grausligem Englisch).. Introduction to Sass Compass.. TYPO3camp Stuttgart 27.. 12,.. mobilecamp Dresden 16.. -17.. Modern Frontend  ...   4.. 6 und ein Ausblick auf die Version 4.. 7.. http://it-republik.. de/php/artikel/TYPO3-4.. 6 rebase-4574.. html.. T3N Ausgabe 27/2012:.. TYPO3 mit sozialen Netzwerken verknüpfen.. Wir zeigen, welche Lösungen und Extensions dabei helfen, soziale Netze mit TYPO3 zu verknüpfen.. de/magazin/typo3-entwicklung-typo3-sozialen-netzwerken-verknupfen-229577/.. Webstandards-Magazin 09-11:.. Standardkonforme HTML-Newsletter.. Wir zeigen Tipps und Tricks für erfolgreiche Newsletter-Vorlagen, die in allen Mail-Clients funktionieren.. webstandards-magazin.. de/index.. php/index/09-performance.. Webstandards-Magazin 08-10:.. CSS3 goes IE.. Wie Sie CSS3 kompatible Webseiten für den Internet Explorer erstellen, ohne zu verzweifeln.. (17.. 10).. php/index/08-10-kunst-und-kommerz.. T3N Ausgabe 21/2010 :.. jQuery trifft TMENU.. Animierte TYPO3-Menüs mit JavaScript und CSS (16.. 08.. 2010).. de/magazin/animierte-typo3-menus-javascript-css-jquery-trifft-tmenu-225810/.. Blog Gast-Artikel.. „Alle müssen ein Verständnis aufbauen, wie modernes Webdesign funktioniert“.. T3N Interview 17.. de/news/webtech-conference-2014-alle-567390/.. Responsive Image Rendering in TYPO3 6.. 2.. TYPO3 Blogger 22.. http://typo3blogger.. de/responsive-images-typo3-6-2/.. Responsive HTML-Newsletter.. T3N 13.. de/news/responsive-html-email-newsletter-446979/.. Adaptive Images in TYPO3 integrieren.. TYPO3 Blogger 25.. de/typo3-adaptive-images/.. TYPO3 Retina Images.. TYPO3 Blogger 21.. de/typo3-retina-images/.. Responsive Design mit TYPO3 – Türchen 22.. de/responsive-design-mit-typo3/.. Barrierefrei und TYPO3 – Türchen 18.. TYPO3 Blogger 18.. de/barrierefrei-und-typo3/.. Eigenes Wetter mit der Google-Weather API in TYPO3 einbinden – Türchen 12.. TYPO3 Blogger 12.. de/wettereinbindung-in-typo3/.. TYPO3 Ländermenü mit CSS Sprites.. Marit AG Blog 06.. 2010.. http://blog.. marit.. ag/2010/10/06/typo3-landermenu-mit-css-sprites/.. Formular Design mit CSS3 Visuelle Gestaltung und der Verzicht auf Grafiken.. Webstandard-Blog 12.. http://webstandard.. kulando.. de/post/2010/07/12/formular-design-mit-css3-visuelle-gestaltung-und-der-verzicht-auf-grafiken.. Facebook-Share und Twitter-Update Button mit Typoscript.. Marit AG Blog 08.. ag/2010/07/08/facebook-share-und-twitter-update-button-mit-typoscript/.. CSS Sprite Ladegeschwindigkeit optimieren und HTTP-Requests verringern.. Webstandard-Blog 26.. de/post/2010/05/26/css-sprite-ladegeschwindigkeit-optimieren-http-requests-verringern.. Teaserboxen mit Verlauf ohne Bilder (CSS3 linear-gradient).. Marit AG Blog 04.. ag/2010/05/04/teaserboxen-mit-verlauf-ohne-bilder-css3-linear-gradient/.. Tweet.. Hinterlasse eine Antwort.. Antworten abbrechen.. Deine E-Mail-Adresse wird nicht veröffentlicht.. Erforderliche Felder sind markiert.. *.. Name.. E-Mail.. Website.. Kommentar.. Du kannst folgende.. HTML.. -Tags benutzen:.. a href= title= abbr title= acronym title= b blockquote cite= cite code del datetime= em i q cite= strike strong..

    Original link path: /publikationen-und-vortrage
    Open archive

  • Title: Kontakt | maddesigns
    Descriptive info: Bitte füllen Sie das Kontaktformular aus, wenn Sie Fragen zu unseren Dienstleistungen haben.. Ihre Name (Pflichtfeld).. Ihre Email (Pflichtfeld).. Betreff.. Ihre Nachricht.. maddesigns Sven Wolfermann.. Berliner Str.. 6 14959 Trebbin.. Tel.. 01702017511.. E-Mail:.. sven@maddesigns.. de.. maddesigns.. Xing:.. https://www.. xing.. com/profile/Sven_Wolfermann.. Twitter:.. http://twitter.. com/maddesigns.. Facebook:.. facebook.. webdeveloper.. Werk 83.. Pepo..

    Original link path: /kontakt
    Open archive
  •  

  • Title: Impressum | maddesigns
    Descriptive info: 6 | 14959 Trebbin.. E-Mail: sven@maddesigns.. UstId-Nr.. : DE233516627..

    Original link path: /impressum
    Open archive

  • Title: CSS3 | maddesigns
    Descriptive info: Kategorie-Archiv: CSS3.. Um die Begriffsklärung „Mobile First“ soll es heute nicht gehen.. Das ist teils eine philosophische Frage und viele behaupten zurecht, bevor man sich über Design und die Umsetzung Gedanken macht, sollte der Content, für den man gestaltet, vorliegen — also quasi „Content First“.. Für viele hat aber „Coffee First“ am Morgen eines Arbeitstages die höchste Priorität.. In dem Artikel geht es um die technischen Möglichkeiten für den Internet Explorer 8 automatisiert eine.. optimierte.. ähnlich gute.. Ansicht der Responsive Website zu generieren.. IE9 border-radius right-to-left (direction: rtl) Bug.. 22.. März 2012.. Wer schon mal Layouts für arabische Websites umgesetzt hat, kennt sicherlich das HTML-Attribut.. dir.. , das man z.. im body-Tag einfügen kann um die Leserichtig des Dokuments von links-nach-rechts auf rechts-nach-links zu ändern.. In CSS ist die Anweisung direction dafür zuständig.. Für beide Möglichkeiten kann man die Werte  ...   IE9, aber nicht richtig und auch nicht immer gewollt.. Bei gleichmäßig abgerundeten Ecken kann man den Bug natürlich nicht nachvollziehen, deshalb fällt er selten auf.. right to left.. rtl.. Das große Weihnachtsgewinnspiel Tag 24 im CSS3 Adventskalender 2011.. Dezember 2011.. …im.. Webstandard Blog.. Großartige Preise haben uns.. www.. galileo-videotrainings.. galileo-press.. addison-wesley.. oreilly.. zur Verlosung an die Leser des CSS3 Adventskalender zur Verfügung bestellt.. Was man muss tun, um gewinnen zu können?!.. …wird im Webstandard-Blog erklärt:.. Das große Weihnachtsgewinnspiel.. Allen Teilnehmern viel Spaß, Glück natürlich auch Erfolg!.. Box-Sizing – CSS3 Adventskalender Tag 23.. 23.. Hans Christian Reinl.. 2 Kommentare.. Einer der am meist bekannten vermeintlichen Bugs der richtig alten Internet Explorer Versionen (IE6 in Quirks Mode oder älter) ist sicherlich die Darstellung von Elementen mit einer bestimmten Breite (.. width.. ) und definiertem Innenabstand (.. padding.. ):.. Der Box-Modell-Fehler.. box-sizing.. 7..

    Original link path: /category/css3-2
    Open archive

  • Title: RWD | maddesigns
    Descriptive info: Kategorie-Archiv: RWD.. Individuelle responsive Gridsysteme mit Sass.. November 2013.. Für Responsive Webdesign ist ein Gridsystem der Grundstock um den Inhalt auf vielen verschiedenen Ausgabegeräten flexibel auszugeben.. Gridsysteme sind mittlerweile unbedingt notwendig um ein Design zielgenau (nicht pixelgenau) umzusetzen.. Um genau zu sein, sollte das Design bereits einem Raster folgen, das dann in der Entwicklung so umgesetzt wird.. Grids.. Der Viewport — das unbekannte Wesen.. August 2013.. Seit wir uns mit Responsive Webdesign „herumschlagen müssen“, begegnet uns immer wieder das Wesen der Post-PSD-Ära – der Viewport.. Mittlerweile beherrscht er unser Tun und stellt uns immer wieder Fallen.. Wir versuchen  ...   Monate mit Euch teilen.. Browser resizing – daily business (danke an @scheibo_ für das wiederfinden des GIFs).. Vielerorts.. findet.. man.. Anwendungen.. , die über einen iframe die eingegebene Website „responsive“, also in einem bestimmten Viewport darstellen.. Soweit so gut.. Das ist durchaus nützlich, spiegelt aber oft nicht das Ergebnis auf den echten Geräten wieder.. Man kann dabei lediglich sehen, ob die Layout-Container entsprechend umbrechen oder wie Texte laufen und Bilder sich anpassen, häufig reicht das ja auch.. Vieles hängt aber bei der Darstellung auf den mobilen Endgeräten von den verwendeten Media-Queries und dem Viewport-Meta-Tag ab.. @media.. media-query.. meta.. viewport..

    Original link path: /category/rwd
    Open archive

  • Title: Responsive Tabellen | maddesigns
    Descriptive info: Meine erste Regel wenn Tabellen responsive abgebildet werden sollen, prüfen ob man den Inhalt nicht auch anders ausgezeichnet werden kann, bzw.. flexiblere HTML-Elemente für die Abbildung verwendet werden können.. So haben wir in einem Projekt eine Suchergebniss-Ausgabe von einer Tabellenansicht in eine Listenansicht (UL) umgewandelt.. Ein schlechtes Beispiel, wie ich finde, ist die Verwendung von DIV-Containern wie im Artikel.. Responsive and SEO friendly data tables.. beschrieben.. Tabellendaten haben (wenn richtig verwendet) auch eine semantische Zuordnung untereinander.. Über Tabellenkopf (.. thead.. th.. ) und Tabellenzellen (.. tbody.. td.. ), optimalerweise auch über scope-Attribute können die Zusammenhänge im Markup ausgezeichnet werden.. Das kann man nicht mit unsematischen DIV-Container nachbilden (es sein denn man nutzt zusätzlich WAI-Aria Attribute, aber lassen wir mal die Kirche im Dorf).. Besser geeignet für diesen Zweck sind semantische Elemente wie eine Description List (DL).. Ein.. dl.. -Element ist dann im übertragenem Sinne ein.. tr.. , ein.. dt.. ist ein.. th.. und ein.. dd.. das Äquivalent zu.. td.. Somit haben die Inhalte auch eine semantische Bedeutung zueinander.. Das ist zwar auch von hinten durch die Brust ins Auge, aber besser als DIVs.. Ein Beispiel:.. div class="tabled-view" dl dt Beschreibung: /dt dd Lorem ipsum is evil! /dd /dl /div.. Altlasten.. Für den Fall, dass man das Markup nicht verändern kann, muss man sich anderer Tricks behelfen.. Eine Möglichkeit wäre das.. Responsive Tables.. jQuery-Plugin von Zurb (die Macher von.. Foundation.. ).. Das Plugin klont die Tabelle, überlagert beide Tabellen und blendet einerseits die Tabellenzellen, andererseits die Tabellenköpfe aus.. Zudem macht das Script den Zellenbereich horizontal scrollbar.. Der ein oder andere kennt das vielleicht von Excel, dort kann man ebenfalls einen Bereich festsetzen und den Rest der Zeilen scrollen.. CSS und JavaScript in den HEAD einfügen:.. link rel="stylesheet" href="responsive-tables..  ...   { content: "Straße:"; } th:nth-of-type(4):before { content: "PLZ:"; } th:nth-of-type(5):before { content: "Ort:"; }.. Chris beschreibt weiter in seinem Blogpost, wie man die Variante mit HTML5 data-Attributen flexibel bekommt (Idee von.. @chriseppstein.. th data-label="Name" Name /th.. th:before { content: attr(data-label); }.. Beispiel:.. http://codepen.. io/maddesigns/full/pHqnt.. Browser-Support für diese Lösung.. Der IE9, sowie alle älteren IEs mögen es nicht, wenn man Tabellen auf display: block setzt, es kann – muss nicht – zu Darstellungsfehlern kommen.. Das sollte man bedenken.. Wichtig ist, dass man sich den Inhalt vorher genau anschaut und dann entscheidet, welche Responsive Tabellen Lösung die Beste ist,.. es kommt auf den Inhalt an.. There I said it: Content First!.. Den Artikel habe ich ursprünglich für ein Print-Magazin geschrieben, ist aber immer noch nicht veröffentlicht worden… deswegen gibt es jetzt hier einen Dreiteiler im Blog.. Beitragsnavigation.. Vorheriger Beitrag.. 7 Gedanken zu Responsive Tabellen.. sagt:.. August 2014 um 09:09.. Sehr interessant!.. August 2014 um 10:35.. Sehr gut geschrieben und sehr interessant.. Pingback:.. 27.. August 2014 um 15:51.. Für manche Dinge braucht man einfach eine Tabelle.. Eine einfache Lösung für TYPO3 ist es, einen wrap um die Tabellen zu basteln, der einen overflow:auto bekommt.. Geht natürlich auch mit anderen Systemen.. August 2014 um 15:22.. Wenn es geht vermeide ich Tabellen, ich mag die schon nicht in InDesign und im Web auch nicht.. Aber wenn es mal dazu kommt ist hier die Methode eine sehr interessante.. Danke für den Artikel.. Schöne Grüße.. September 2014 um 10:43.. Ich hatte mir dazu mal vor längerem Gedanken gemacht und benutze seit dem erfolgreich folgende Lösung:.. freizeitler.. de/2014/08/19/usability-und-content-strategien-eine-tabelle-im-responsive-web-design/.. Der Blogpost entstand nach einer Testphase von einem Jahr.. September 2014 um 09:15.. @Henry Schönes Beispiel, hatte ich letztens auch gesehen.. Kommt bestimmt auch mal zum Einsatz..

    Original link path: /responsive-tables-2393.html
    Open archive

  • Title: Sven Wolfermann | maddesigns
    Descriptive info: Alle Beiträge von Sven Wolfermann..

    Original link path: /author/sven
    Open archive

  • Title: Css | maddesigns
    Descriptive info: Schlagwort-Archiv: css.. CSS3 Adventskalender 2011 – Tag 22.. …im Webstandard Blog zum Thema “.. CSS4 Die Zukunft des Webdesign.. “.. CSS4.. Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21.. 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.. 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.. canvas.. 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.. IE9 mit CSS3 border-radius und linear-gradient Problemen.. 19.. März 2011.. 18 Kommentare.. Nach Einführung des IE9 ist es  ...   die Nightly Builds eingeflossen und wird sicherlich demnächst auch in die Webkit-basierenden Browser, wie Chrome oder Safari integriert.. Bisher hatte man recht viel Schreibarbeit, wenn man CSS3 Verläufe browserübergreifend einsetzen wollte.. Im.. CSS3 Adventskalender Tag3.. kann man die derzeitige Anweisungen cross-browser-fähig nachlesen.. Zukünftig wird.. Webkit.. als Übergang auch weiterhin die bestehende Syntax unterstützen.. Man kann also die Eigenschaften für CSS3 Gradient wie folgt angeben:.. linear-top { /* Für WebKit alt (Safari, Chrome, etc.. ) */ background: -webkit-gradient(linear, left top, left bottom, ⏎ from(#c8482c), to(#fff)); /* NEU NEU NEU - WebKit (Safari, Chrome, etc.. ) */ background: -webkit-linear-gradient(top, #c8482c, #fff); /* Für Mozilla/Gecko (Firefox etc) */ background: -moz-linear-gradient(top, #c8482c, #fff); /* aktueller W3C working draft */ background: linear-gradient(top, #c8482c, #fff); }.. Ein richtiger Schritt und auch ein Ereignis, bei dem man sieht, dass CSS3 noch in der Entwicklung ist.. Trotzdem empfehle ich heute schon CSS3 einzusetzen, wo es geht.. CSS3 Adventskalender Tag 24.. Dezember 2010.. …im Webstandard Blog gibt es am letzten Tag des CSS3 Adventskalender noch ein Gewinnspiel:.. Gewinne eines von 5 Hosting-Paketen Universal- und Businesshosting.. gewinnspiel.. hosting.. Fun with Border-Radius CSS Sprechblasen CSS3 Adventskalender Tag 23.. Am vorletztem Tag des CSS3 Adventskalender will ich nochmal ein paar interessante Einsatzmöglichkeiten von border-radius zeigen.. Nicht zuletzt auch durch das Gewinnspiel.. Gewinne ein Jahres-Abo des Webstandards Magazin.. hat sich border-radius als das CSS3-Feature herauskristalisiert, auch die Zugriffszahlen zeigen das.. 4..

    Original link path: /tag/css-2
    Open archive

  • Title: Responsive | maddesigns
    Descriptive info: Schlagwort-Archiv: responsive.. ”CSS3 Responsive Web” CSS3 Adventskalender Tag 3.. 3.. Heute gibt es das 3.. Türchen im CSS3 Adventskalender etwas später.. Ich bin heute beim.. Multimediatreff.. in Köln eingeladen um über.. zu sprechen.. Die Slides vom Vortrag werden nach dem.. Vortrag.. hier gegen 14 Uhr veröffentlicht.. Bis dahin kann man den.. Multimediatreff auch im Live-Stream verfolgen.. Hochkarätige Vorträge sind zu erwarten, u.. a.. zum Thema HTML5 von Patrick H.. Laucke (Opera) sowie Peter Kröner (.. @sir_pepe.. ) oder zum Thema JavaScript: Von einfachen Scripten zu komplexen Anwendungen von Mathias Schäfer (.. @molily.. Die Slides.. Das Video vom Vortrag.. #mmt28..

    Original link path: /tag/responsive
    Open archive

  • Title: Tabelle | maddesigns
    Descriptive info: Schlagwort-Archiv: tabelle.. CSS3 Tabellen-Übersicht CSS3 Adventskalender Tag 15.. 15.. Heute am Tag 15 des CSS3 Adventskalender von.. und dem.. geht es weniger um ein Tutorial, sondern eher um ein umfangreiches Beispiel der bisher vorgestellten Eigenschaften.. Als HTML-Basis erstellen wir eine Tabelle mit einer Übersicht zum CSS3 Browser Support.. table..

    Original link path: /tag/tabelle
    Open archive



  •  


    Archived pages: 254