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.com. 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

Resources

Science resources on ScienceLibrary.info. Games, puzzles, enigmas, internet resources, science fiction and fact, the weird and the wonderful things about the natural world. Have fun while learning Science with ScienceLibrary.info.

Science

Great Scientists

William Herschel

1738 - 1822

William Herschel is one of the most famous of all astronomers, best remembered for his discovery of Uranus in 1781.

William Herschel
Lugano English

Quote of the day...

Ancient or not, the Seulpierre family as you will find it today is not really that different to any other family, here or there. Which means it is in every way unique.

ZumGuy Internet Promotions

English language school