Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
ART WITH CSS3
www.sayan.eecoder explorer speaker
1. fancy fonts      5. gradients2. text-shadow      6. text-stroke3. rounded-corner   7. background-clip4. box shadow     ...
1. fancy fontsgoogle web fontsadd to <head> in index.html<link href=http://fonts.googleapis.com/css?family=Audiowiderel=st...
2. text-shadowtext-shadow: <offset-x1> <offset-y1> <blur-radius1> <color1>,             <offset-x2> <offset-y2> <blur-radi...
3. rounded cornersbox-radius: <length>; /* equal rounded corners */border-top-left-radius:       <length>;border-top-right...
4. box shadowbox-radius: <length>; /* equal rounded corners */border-top-left-radius:       <length>;border-top-right-radi...
5. gradientsbackground-image: -webkit-gradient                 (<type>, <left> <top>, <left> <bottom>,                    ...
6. text-stroke-webkit-text-stroke: <width> <color>;-webkit-text-stroke: 1px rgba(0,0,0,0.7);
7. background-clip-webkit-background-clip: text;background-image:url(text-bg.jpg);-webkit-background-clip: text;color:tran...
8. reflectionbox-reflect: <direction> <offset> <mask-box>;-webkit-box-reflect: below                    10px               ...
thanks!
Nächste SlideShare
Wird geladen in …5
×

Creating Art with Codes - CSS3

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Creating Art with Codes - CSS3

  1. 1. ART WITH CSS3
  2. 2. www.sayan.eecoder explorer speaker
  3. 3. 1. fancy fonts 5. gradients2. text-shadow 6. text-stroke3. rounded-corner 7. background-clip4. box shadow 8. reflection
  4. 4. 1. fancy fontsgoogle web fontsadd to <head> in index.html<link href=http://fonts.googleapis.com/css?family=Audiowiderel=stylesheet type=text/css>add to style.cssfont-family: Audiowide, cursive;
  5. 5. 2. text-shadowtext-shadow: <offset-x1> <offset-y1> <blur-radius1> <color1>, <offset-x2> <offset-y2> <blur-radius2> <color2>;text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
  6. 6. 3. rounded cornersbox-radius: <length>; /* equal rounded corners */border-top-left-radius: <length>;border-top-right-radius: <length>;border-bottom-right-radius: <length>;border-bottom-left-radius: <length>;border-radius:10px;
  7. 7. 4. box shadowbox-radius: <length>; /* equal rounded corners */border-top-left-radius: <length>;border-top-right-radius: <length>;border-bottom-right-radius: <length>;border-bottom-left-radius: <length>;border-radius:10px;
  8. 8. 5. gradientsbackground-image: -webkit-gradient (<type>, <left> <top>, <left> <bottom>, from(<color>), to(<color>);background-image: -webkit-gradient(linear, left top, left bottom,from(hsl(0, 80%, 70%)),to(#BADA55));
  9. 9. 6. text-stroke-webkit-text-stroke: <width> <color>;-webkit-text-stroke: 1px rgba(0,0,0,0.7);
  10. 10. 7. background-clip-webkit-background-clip: text;background-image:url(text-bg.jpg);-webkit-background-clip: text;color:transparent;
  11. 11. 8. reflectionbox-reflect: <direction> <offset> <mask-box>;-webkit-box-reflect: below 10px -webkit-gradient(linear, left 60%, left bottom, from(transparent), to(white));
  12. 12. thanks!

×