Successfully reported this slideshow.
Your SlideShare is downloading. ×

Creating Art with Codes - CSS3

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 12 Ad
Advertisement

More Related Content

Similar to Creating Art with Codes - CSS3 (20)

Advertisement

Recently uploaded (20)

Creating Art with Codes - CSS3

  1. 1. ART WITH CSS3
  2. 2. www.sayan.ee coder explorer speaker
  3. 3. 1. fancy fonts 5. gradients 2. text-shadow 6. text-stroke 3. rounded-corner 7. background-clip 4. box shadow 8. reflection
  4. 4. 1. fancy fonts google web fonts add to <head> in index.html <link href='http://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'> add to style.css font-family: 'Audiowide', cursive;
  5. 5. 2. text-shadow text-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 corners box-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 shadow box-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. gradients background-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. reflection box-reflect: <direction> <offset> <mask-box>; -webkit-box-reflect: below 10px -webkit-gradient(linear, left 60%, left bottom, from(transparent), to(white));
  12. 12. thanks!

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×