Sie sind nicht angemeldet.

    • [CSS] CSS3 easy vCard

    • wit

      You got served!

      • »wit« ist der Autor dieses Themas

    • Beiträge: 251

      Aktivitätspunkte: 1 470

      Registrierungsdatum: 21. Juni 2011

      Wohnort: London

      Beruf: IT Consultant

      Danksagungen: 108 / 2

      • Nachricht senden

    1

    Dienstag, 19. Juli 2011, 20:50

    CSS3 easy vCard

    Beschreibung

    Diesem Tutorial zeigt euch wie ihr eine Box mit CSS und HTML gestalten könnt und diese so klein wie möglich haltet.
    Dabei wird das Hauptaugenmerk dadrauf gelegt, bei einem Schatten für die Box kein extra HTML zu schreiben.

    In dem Tutorial wird folgendes verwendet: Text-shadow, Pseudo Classes, Background Gradients, Round Borders.


    Vorschau




    Informationen
    • Hoster: Grufix-Board.de & Vimeo.com
    • Format: MPEG-4 (mp4)
    • Größe: 66,7 MB


    Schwierigkeitsgrad
    • Anfänger: [ x ]
    • Fortgeschrittene: [ ]
    • Profis: [ ]

    Anschauen:

    Versteckter Text Versteckter Text

    Dieser Text wurde vom Autor versteckt.


    Download

    Versteckter Text Versteckter Text

    Dieser Text wurde vom Autor versteckt.
    Alles Gute,
    WIT :angel:


    PHP Nachschlagewerk: http://www.php.net
    Warum W3Schools *doof* ist : http://w3fools.com/
    Alles andere: http://www.google.com
    Wie man Fragen stellt: http://www.catb.org/~esr/faqs/smart-questions.html
    SMART GOALS: http://www.topachievement.com/smart.html

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »wit« (21. Juli 2011, 00:24)

    Es haben sich bereits 10 registrierte Benutzer bedankt.

    Benutzer die sich bedankten:

    Terra (19.07.2011), yoso (19.07.2011), Blyawon (19.07.2011), Steffi (19.07.2011), Grievous (19.07.2011), Simon (20.07.2011), basteln (20.07.2011), iWebaholic (20.07.2011), driftstyle (25.09.2011), xDaNiX (17.02.2012)

    2

    Dienstag, 19. Juli 2011, 22:08

    Sehr gut erklärt, schaut es euch an, besonders das mit dem Schatten dürfte für viele interessant sein um die Ladezeiten von Webseiten zu verkürzen.
    finalarts.de: 100%

    Web- und Multimediadesign; Coding

    3

    Dienstag, 19. Juli 2011, 22:56

    In Opera kann man auch Farbverläufe benutzen:

    Cascading Style Sheet

    		 
    1

    background: -o-linear-gradient(top, farbe1, farbe2);


    Ansonsten gut gemacht, ich kann nur noch Kleinigkeiten anmerken xD
    Ich selber füge alle Eigenschaften mit Browser-Präfix vor der Eigenschaft ohne Präfix ein, nicht danach.
    Grund dafür ist, dass ich möchte, dass ein Browser die eigentliche CSS3-Eigenschaft verwendet, wenn er sie versteht, denn die Präfix-Eigenschaft dafür würde einfach überschrieben werden.

    Ansonsten hätte man vielleicht noch Transitions / keyframe-Animationen verwenden können, hätte sicherlich einen schönen Effekt erzielt.
    Ich selber verwende auch gerne die Eigenschaft box-shadow, allerdings nur für normale Schatten.
    Aber ich glaube, box-shadow wird durch Transitions beeinfluss, wenn es stimmt, könnte man so sicherlich einen Schatten wie in dem Tutorial ohne Grafik umsetzen.

    Sonst, wie bereiets gesagt, gutes Tutorial, es lohnt sich wirklich, es anzusehen.
    Kenntnisse:
    • PHP + MySQL
    • (x)HTML
    • CSS
    • JavaScript


    Zur Zeit am Lernen:
    • Java
    • JavaScript
    • wit

      You got served!

      • »wit« ist der Autor dieses Themas

    • Beiträge: 251

      Aktivitätspunkte: 1 470

      Registrierungsdatum: 21. Juni 2011

      Wohnort: London

      Beruf: IT Consultant

      Danksagungen: 108 / 2

      • Nachricht senden

    4

    Dienstag, 19. Juli 2011, 23:11

    Vielen dank yoso, ich werde mal schaun, ob man das Bild auch noch los wird und es wie du sagst mit den CSS3 eigenschaften umsetzt.
    Alles Gute,
    WIT :angel:


    PHP Nachschlagewerk: http://www.php.net
    Warum W3Schools *doof* ist : http://w3fools.com/
    Alles andere: http://www.google.com
    Wie man Fragen stellt: http://www.catb.org/~esr/faqs/smart-questions.html
    SMART GOALS: http://www.topachievement.com/smart.html

    5

    Dienstag, 19. Juli 2011, 23:42

    Ah, hab oben einen Fehler gehabt. Ichj habe gesagt, dass box-shadow durch Transitions beeinflusst wird. An der Stelle meinte ich CSS3-Transforms wie die rotate-Funktion. Aber wie genau man das am Besten machen könnte, weiß ich nicht. Ich denke, ich werde mich mal mit dem Thema etwas genauer befassen
    Kenntnisse:
    • PHP + MySQL
    • (x)HTML
    • CSS
    • JavaScript


    Zur Zeit am Lernen:
    • Java
    • JavaScript

    6

    Mittwoch, 20. Juli 2011, 17:44

    Schönes Tutorial, die Effekte sehen auch gut aus. Habe es mir aber nicht ganz angeschaut, da ich das alles bereits gelernt habe. ;-)

    Den Schatten unten an der Box kann man auch mit reinem CSS3 machen, mit box-shadow und rotate: skew.
    Ich habe einen ähnlichen Effekt vor ein paar Tagen auf meiner Coming Soon Seite eingesetzt:
    http://iwebaholic.gidix.de/
    jQuery Einführung & Crashkurs: [JavaScript] jQuery Einführung & Crashkurs

    Kenntnisse:
    [X]HTML[5]: 9.5/10
    CSS[3]: 10/10
    JavaScript: 8.5/10
    jQuery: 9/10
    PHP: 1/10
    C#: 6.5/10
    • wit

      You got served!

      • »wit« ist der Autor dieses Themas

    • Beiträge: 251

      Aktivitätspunkte: 1 470

      Registrierungsdatum: 21. Juni 2011

      Wohnort: London

      Beruf: IT Consultant

      Danksagungen: 108 / 2

      • Nachricht senden

    7

    Mittwoch, 20. Juli 2011, 21:02

    Ich habe mir das mal angeschaut mit dem skew. Und einmal umgesetzt. Ist recht einfach im nachhenein. Man muss halt nur auf die richtige Idee kommen wie man es umsetzen will.

    Ich werde mal ein tutorial machen und das hier als extended version reinstellen. Das Tutorial wird aber sich nur mit dem Schatten befassen.
    Alles Gute,
    WIT :angel:


    PHP Nachschlagewerk: http://www.php.net
    Warum W3Schools *doof* ist : http://w3fools.com/
    Alles andere: http://www.google.com
    Wie man Fragen stellt: http://www.catb.org/~esr/faqs/smart-questions.html
    SMART GOALS: http://www.topachievement.com/smart.html

    Ähnliche Themen

    Verwendete Tags

    Background Gradients, Box, box shadow, box-shadow, Coding-Tutorial, CSS, CSS 3, CSS Gradient, CSS3, CSS3-Tutorial, gradient, Grundlagen, Pseudo Classes, Round Borders, text shadow, text-shadow, Tutorial, vCard, verlauf, Video-Tutorial, web2.0, webdesign

    • Grufix-Board.de - GFX Webdesign Foto & Coding Community

    Grafik-Tutorials | Coding-Tutorials | Ressourcen | SEO | Webdesign | HTML5
    W3C Validator

    Forensoftware: Burning Board® 3.1.6, entwickelt von WoltLab® GmbH