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

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

Johann(II) Bernoulli

1710 - 1790

Johann Bernoulli (II) was the son of Johan (I), and the younger brother of Daniel and Nicolaus, all noted mathematicians.

Johann Bernoulli (II), 1710 - 1790
IT Forum by Sean Bone

Quote of the day...

There are 10 types of people in the world: those who understand binary and those who don't.

ZumGuy Internet Promotions

Umwelt.Science