SlideShare ist ein Scribd-Unternehmen logo
1 von 19
Downloaden Sie, um offline zu lesen
Beyond
Borders
and Boxes
CSS für Fortgeschrittene
Eric Eggert, Essen
Freier Webdesigner/-entwickler
Eric Eggert, Essen
Freier Webdesigner/-entwickler

      (freie Kapazitäten)
@font-face
Syntax
@font-face {   font-family: "Schriftname";
               src: url(schriftname.otf);    }

h1 {
               font-family: Schriftname, Helvetica, sans-serif;
}
kR                        kS
      Einfach              Relativ große Dateien

     Preiswert           Schriftdateien weitgehend
                          ungeschützt (kein DRM)
   Cross-Browser
(IE4+, FF3.5+, Sf3.1+)       Lizenzprobleme

  Weit verbreitet
Transitionen
Transition




:hover

0N
Transformation




:hover

0N
Demos
Demos
        Hover

        Scaling

      Bar Charts

      Demo-Seite

       Gowalla

         Kiwi

24ways Demo, Max Voltar
Danke
 Eric Eggert

  yatil.de

   @yatil

Weitere ähnliche Inhalte

Andere mochten auch

Diferencias entre-web-10-y-20424 sldo. acosta william
Diferencias entre-web-10-y-20424 sldo. acosta williamDiferencias entre-web-10-y-20424 sldo. acosta william
Diferencias entre-web-10-y-20424 sldo. acosta williamacostaw1991
 
Ergebnisse GGstOf Umfrage 2012
Ergebnisse GGstOf Umfrage 2012Ergebnisse GGstOf Umfrage 2012
Ergebnisse GGstOf Umfrage 2012netmex.ch
 
Social Media Success Stories
Social Media Success StoriesSocial Media Success Stories
Social Media Success StoriesGábor Molnár
 
Asesoria para el uso de las tic.
Asesoria para el uso de las tic.Asesoria para el uso de las tic.
Asesoria para el uso de las tic.PAGOS8585
 
Finanzas martínez
Finanzas martínezFinanzas martínez
Finanzas martínezmartrepo
 
Las hormigas del colegio
Las hormigas del colegioLas hormigas del colegio
Las hormigas del colegioyenderpira
 
Ambiente excel
Ambiente excelAmbiente excel
Ambiente excel11111214
 
SeleneGomez_Spring_2012_Jeremy_C_Foster
SeleneGomez_Spring_2012_Jeremy_C_FosterSeleneGomez_Spring_2012_Jeremy_C_Foster
SeleneGomez_Spring_2012_Jeremy_C_FosterJeremy C. Foster
 
Política internacional frente al tráfico de drogas en latino américa
Política internacional frente al tráfico de drogas en latino américaPolítica internacional frente al tráfico de drogas en latino américa
Política internacional frente al tráfico de drogas en latino américaIgnacio Leiva Muñoz
 
maMatemáticas bgu 3
maMatemáticas bgu 3maMatemáticas bgu 3
maMatemáticas bgu 3juanremacher
 
Banco de archivo diana maria quiroz villada
Banco de archivo diana maria quiroz villadaBanco de archivo diana maria quiroz villada
Banco de archivo diana maria quiroz villadaoncedosgrj2014
 
Morning linedealfonsorodriguezveralar14feb15
Morning linedealfonsorodriguezveralar14feb15Morning linedealfonsorodriguezveralar14feb15
Morning linedealfonsorodriguezveralar14feb15Winston1968
 

Andere mochten auch (17)

Diferencias entre-web-10-y-20424 sldo. acosta william
Diferencias entre-web-10-y-20424 sldo. acosta williamDiferencias entre-web-10-y-20424 sldo. acosta william
Diferencias entre-web-10-y-20424 sldo. acosta william
 
Ergebnisse GGstOf Umfrage 2012
Ergebnisse GGstOf Umfrage 2012Ergebnisse GGstOf Umfrage 2012
Ergebnisse GGstOf Umfrage 2012
 
Social Media Success Stories
Social Media Success StoriesSocial Media Success Stories
Social Media Success Stories
 
Asesoria para el uso de las tic.
Asesoria para el uso de las tic.Asesoria para el uso de las tic.
Asesoria para el uso de las tic.
 
Trabajo nº5
Trabajo nº5Trabajo nº5
Trabajo nº5
 
Finanzas martínez
Finanzas martínezFinanzas martínez
Finanzas martínez
 
Las hormigas del colegio
Las hormigas del colegioLas hormigas del colegio
Las hormigas del colegio
 
Typographie
TypographieTypographie
Typographie
 
Ambiente excel
Ambiente excelAmbiente excel
Ambiente excel
 
SeleneGomez_Spring_2012_Jeremy_C_Foster
SeleneGomez_Spring_2012_Jeremy_C_FosterSeleneGomez_Spring_2012_Jeremy_C_Foster
SeleneGomez_Spring_2012_Jeremy_C_Foster
 
Política internacional frente al tráfico de drogas en latino américa
Política internacional frente al tráfico de drogas en latino américaPolítica internacional frente al tráfico de drogas en latino américa
Política internacional frente al tráfico de drogas en latino américa
 
Act 6 redes sociales (zinjal)
Act 6  redes sociales  (zinjal)Act 6  redes sociales  (zinjal)
Act 6 redes sociales (zinjal)
 
maMatemáticas bgu 3
maMatemáticas bgu 3maMatemáticas bgu 3
maMatemáticas bgu 3
 
El piojo
El piojoEl piojo
El piojo
 
Banco de archivo diana maria quiroz villada
Banco de archivo diana maria quiroz villadaBanco de archivo diana maria quiroz villada
Banco de archivo diana maria quiroz villada
 
Informe - Reunión Anual de Asociados 2015
Informe - Reunión Anual de Asociados 2015Informe - Reunión Anual de Asociados 2015
Informe - Reunión Anual de Asociados 2015
 
Morning linedealfonsorodriguezveralar14feb15
Morning linedealfonsorodriguezveralar14feb15Morning linedealfonsorodriguezveralar14feb15
Morning linedealfonsorodriguezveralar14feb15
 

Mehr von Eric Eggert

DrupalCamp Vienna 2015
DrupalCamp Vienna 2015DrupalCamp Vienna 2015
DrupalCamp Vienna 2015Eric Eggert
 
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazyHow to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazyEric Eggert
 
Github introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWGGithub introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWGEric Eggert
 
Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0Eric Eggert
 
How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15Eric Eggert
 
New developments in Web Accessibility
New developments in Web AccessibilityNew developments in Web Accessibility
New developments in Web AccessibilityEric Eggert
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Eric Eggert
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Eric Eggert
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Eric Eggert
 
Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Eric Eggert
 
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesHow I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesEric Eggert
 
How I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesHow I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesEric Eggert
 
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Eric Eggert
 
Fronteers Jam Session: Principles of Accessible Web Design
Fronteers Jam Session: Principles of  Accessible Web DesignFronteers Jam Session: Principles of  Accessible Web Design
Fronteers Jam Session: Principles of Accessible Web DesignEric Eggert
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Eric Eggert
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztEric Eggert
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 

Mehr von Eric Eggert (20)

ARIA Serious
ARIA SeriousARIA Serious
ARIA Serious
 
What is EOWG?
What is EOWG?What is EOWG?
What is EOWG?
 
What is EOWG?
What is EOWG?What is EOWG?
What is EOWG?
 
DrupalCamp Vienna 2015
DrupalCamp Vienna 2015DrupalCamp Vienna 2015
DrupalCamp Vienna 2015
 
How to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazyHow to improve your website’s accessibility without going crazy
How to improve your website’s accessibility without going crazy
 
Github introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWGGithub introduction for W3C WCAG WG and EOWG
Github introduction for W3C WCAG WG and EOWG
 
Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0Neue Infos rund um WCAG 2.0
Neue Infos rund um WCAG 2.0
 
How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15How to Learn about accessibility without going crazy #fronteers15
How to Learn about accessibility without going crazy #fronteers15
 
New developments in Web Accessibility
New developments in Web AccessibilityNew developments in Web Accessibility
New developments in Web Accessibility
 
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
 
Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)Vorteile von Webstandards (Historisches Dokument)
Vorteile von Webstandards (Historisches Dokument)
 
Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)Internet-Geschichte und Webtechnologie (Historisches Dokument)
Internet-Geschichte und Webtechnologie (Historisches Dokument)
 
Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)Fehler im Webdesign (Historisches Dokument)
Fehler im Webdesign (Historisches Dokument)
 
How I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with NotesHow I stopped worrying and learned to love with defaults – with Notes
How I stopped worrying and learned to love with defaults – with Notes
 
How I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notesHow I stopped worrying and learned to love with defaults — Without notes
How I stopped worrying and learned to love with defaults — Without notes
 
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
Neue aufregende Web Technologien, HTML5 + CSS3 anhand von Praxisbeispielen le...
 
Fronteers Jam Session: Principles of Accessible Web Design
Fronteers Jam Session: Principles of  Accessible Web DesignFronteers Jam Session: Principles of  Accessible Web Design
Fronteers Jam Session: Principles of Accessible Web Design
 
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
Accessibility 101 @ Webmontag Frankfurt Ignite, 2010-03-01
 
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetztWebtech ’09 – Die Zukunft des Webs beginnt jetzt
Webtech ’09 – Die Zukunft des Webs beginnt jetzt
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 

Kürzlich hochgeladen

Kürzlich hochgeladen (7)

1029-Danh muc Sach Giao Khoa khoi 11.pdf
1029-Danh muc Sach Giao Khoa khoi 11.pdf1029-Danh muc Sach Giao Khoa khoi 11.pdf
1029-Danh muc Sach Giao Khoa khoi 11.pdf
 
LAKO Kreativpreis_2024_Startnummer_02_(LFS_LA).pdf
LAKO Kreativpreis_2024_Startnummer_02_(LFS_LA).pdfLAKO Kreativpreis_2024_Startnummer_02_(LFS_LA).pdf
LAKO Kreativpreis_2024_Startnummer_02_(LFS_LA).pdf
 
1029-Danh muc Sach Giao Khoa khoi 12.pdf
1029-Danh muc Sach Giao Khoa khoi 12.pdf1029-Danh muc Sach Giao Khoa khoi 12.pdf
1029-Danh muc Sach Giao Khoa khoi 12.pdf
 
Welche KI-Kompetenzen brauchen Lehrpersonen?!
Welche KI-Kompetenzen brauchen Lehrpersonen?!Welche KI-Kompetenzen brauchen Lehrpersonen?!
Welche KI-Kompetenzen brauchen Lehrpersonen?!
 
Angewandte Kognitions- und Medienwissenschaft an der Universität Duisburg_Essen
Angewandte Kognitions- und Medienwissenschaft an der Universität Duisburg_EssenAngewandte Kognitions- und Medienwissenschaft an der Universität Duisburg_Essen
Angewandte Kognitions- und Medienwissenschaft an der Universität Duisburg_Essen
 
Angewandte Philosophie an der Universität Duisburg-Essen.
Angewandte Philosophie an der Universität Duisburg-Essen.Angewandte Philosophie an der Universität Duisburg-Essen.
Angewandte Philosophie an der Universität Duisburg-Essen.
 
Wirtschaftsingenieurwesen an der Universität Duisburg-Essen
Wirtschaftsingenieurwesen an der Universität Duisburg-EssenWirtschaftsingenieurwesen an der Universität Duisburg-Essen
Wirtschaftsingenieurwesen an der Universität Duisburg-Essen
 

Webmontag Frankfurt 18.01.2010 — Beyond Borders and Boxes – Fortgeschrittene CSS-Techniken