Web Design 2 | Fall 2020

CSS3 Examples & Code

RGBA

Code:

div p { color: rgba(236,163,19,.6); }

For IE 8 or earlier, declare a hexadecimal color first, then specify using rgba().

div p { color: #eca313; color: rgba(236,163,19,.6); }

Opacity

Code:

div p, div p img { opacity: 0.6; }

To fully support IE 8 or earlier:

div p, div p img { -ms-filter:"progid:DXImageTransform. » Microsoft.Alpha(Opacity=60)"; filter: alpha(opacity=60); }

Try it:

Opacity slider (whole aside):

Opacity slider: (image only)

aside#opacity { opacity: 0.6; } aside#opacity div p img { opacity: 0.6; }

Border Radius

Code:

aside { border-radius: 8px; } aside p img.partround { border-top-left-radius: 40px; } aside p img.round { border-radius: 100px; }

Try it:

Border Radius slider:

Border Width slider:

aside#borderradius { border-radius: 8px; border-width: 3px; }

Text Shadow

Code:

aside div p { text-shadow: 2px 2px 4px rgba(0,0,0,.5); } aside#textshadow div p em { text-shadow: 1px 1px 0 rgba(255,255,255,1), 3px 3px 0 rgba(53,53,53,1); }

Try it:

Horizontal Offset:

Vertical Offset:

Blur:

Opacity:

Text Color: White | Black | reset all

aside#textshadow div p#cascade { text-shadow: 1px 1px 1px rgba(0,0,0,1); }

Box Shadow

Try it (Box only):

Horizontal Offset:

Vertical Offset:

Blur:

Opacity:

Type: Default | Inset | reset all

Code:

aside#boxshadow { box-shadow: 2px 2px 4px rgba(0,0,0,.5); } aside#boxshadow div p img { box-shadow: 8px 8px 10px rgba(0,0,0,.65); }

Multiple Background Images

Code:

aside#multibg { background: url(../art/pooka.gif) center center no-repeat, url(../art/round_church.jpg) left bottom no-repeat, url(../art/diagonal_stripes.png) 0 -280px repeat-x, url(../art/grid.png) 0 0 repeat, rgba(144,199,228,1); }

Try it:

Resize:

Gradients

Code:

aside#gradient { background: rgb(234,105,0); background: -moz-linear-gradient(top, » rgba(234,105,0,1) 0%, rgba(255,178,102,1) 100%); background: -webkit-gradient(linear, left top, left » bottom, color-stop(0%,rgba(234,105,0,1)), » color-stop(100%,rgba(255,178,102,1))); background: -webkit-linear-gradient(top, » rgba(234,105,0,1) 0%,rgba(255,178,102,1) 100%); background: -o-linear-gradient(top, » rgba(234,105,0,1) 0%,rgba(255,178,102,1) 100%); background: -ms-linear-gradient(top, » rgba(234,105,0,1) 0%,rgba(255,178,102,1) 100%); background: linear-gradient(to bottom, » rgba(234,105,0,1) 0%,rgba(255,178,102,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( » startColorstr='#ea6900', endColorstr='#ffb266', » GradientType=0 ); }

@font-face Support

Code:

@font-face { font-family: "Chunk"; src: url(../fonts/Chunkfive-webfont.ttf) » format("truetype"); } aside#fontface div p { font-size: 3em; font-family: Chunk, Verdana, sans-serif; } aside#fontface div p em { font-size: .4em; font-style: normal; text-transform: uppercase; letter-spacing: .4em; }

Transitions

Coming soon...

Transformations

Coming soon...