Creating Art with Codes - CSS3

www.sayan.ee
coder explorer speaker

1. fancy fonts 5. gradients

2. text-shadow 6. text-stroke

3. rounded-corner 7. background-clip

4. box shadow 8. reﬂection

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;

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;

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;

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;

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));

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. reﬂection
box-reflect: <direction> <offset> <mask-box>;

-webkit-box-reflect: below
10px
-webkit-gradient(linear,
left 60%, left bottom,
from(transparent), to(white));

Creating Art with Codes - CSS3

Recommandé

Recommandé

Contenu connexe

Similaire à Creating Art with Codes - CSS3

Similaire à Creating Art with Codes - CSS3 (20)

Plus de Sayanee Basu

Plus de Sayanee Basu (12)

Dernier

Dernier (20)

Creating Art with Codes - CSS3

Notes de l'éditeur