Science Library - free educational site

CSS3

Rounded corners on boxes:

#box {

border: 2px solid;

border-radius: 25px;

}

Shadows around boxes:

#box {

box-shadow: 8px 8px 4px #666;

}

Border from image around box:

#box {

border-image: url(border.png) 30 30 round;

}

Background image:

#box{

background: url(image1.jpg), url(image2.jpg); // superimposes image2 over image1

background-size: 120px 100px; // 100% 100% stretches image to fill all element

background-repeat: no-repeat;

background-origin: content-box; // specifies content-box, padding-box or border-box as where image resides

background-clip: padding-box; // specifies content-box, padding-box or border-box as where background color fills

}

Animated background:

<style>

#box {

width: 240px;

height: 180px;

background: yellow;

-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */

animation: mymove 5s infinite;

/*infinite = loops continuously, nothing = one cycle only*/

@-webkit-keyframes mymove { /* Chrome, Safari, Opera */

50% {background-color: blue;}

/*% of time in this colour*/

}


@keyframes mymove {

50% {background-color: orange;}

}

</style>

animation-name: myfirst;

animation-duration: 5s;

animation-timing-function: linear;

animation-delay: 2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

/* prefix with @-webkit- for Chrome, Safari, Opera */

Hover effects

div {

width: 100px;

height: 100px;

background: red;

transition: width 6s, height 6s;

}

/* prefix with -webkit- for Safari */

div:hover {

width: 500px; height: 300px;

}

Transitions

Transitions allow styles to be changed dynamically through CSS, rather than cumbersome Flash or JavaScript.

In this example, the width of an elemnt is changed after a delay of 1.5s

<style>

<div id="demo">

width: 100px;

-webkit-transition: width 2s, linear 1.5s; /* For Safari 3.1 to 6.0 */

transition: width 2s, linear 1.5s;

transition-property: width;

transition-duration: 2s;

transition-timing-function: linear;

transition-delay: 1.5s;

</div

div:hover {

width: 200px;

}

</div>

</style>

Content © Renewable.Media. All rights reserved. Created : November 3, 2014 Last updated :February 14, 2016

Latest Item on Science Library:

The most recent article is:

Trigonometry

View this item in the topic:

Vectors and Trigonometry

and many more articles in the subject:

Subject of the Week

Universe

'Universe' on ScienceLibrary.info covers astronomy, cosmology, and space exploration. Learn Science with ScienceLibrary.info.

Science

Great Scientists

Charles Babbage

1791 - 1871

Charles Babbage was a polymath, who is most famous for his development of mechanical computational machines.

Charles Babbage
IT Forum by Sean Bone

Renewable.Media Internet Promotions

English language school