Your SlideShare is downloading. ×
0
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,562

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,562
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "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!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×