• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating Art with Codes - CSS3
 

Creating Art with Codes - CSS3

on

  • 1,541 views

 

Statistics

Views

Total Views
1,541
Views on SlideShare
1,540
Embed Views
1

Actions

Likes
1
Downloads
1
Comments
0

1 Embed 1

https://duckduckgo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Creating Art with Codes - CSS3 Creating Art with Codes - CSS3 Presentation Transcript

  • 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 8. reflection
  • 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;
  • 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;
  • 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;
  • 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;
  • 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));
  • 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:transparent;
  • 8. reflectionbox-reflect: <direction> <offset> <mask-box>;-webkit-box-reflect: below 10px -webkit-gradient(linear, left 60%, left bottom, from(transparent), to(white));
  • thanks!