Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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!
Upcoming SlideShare
Loading in …5
×

Creating Art with Codes - CSS3

1,998 views

Published on

Published in: Technology, Education
  • Be the first to comment

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!

×