|
LILLYROBOT.COM |
CSS3
This section focuses on some of the properties and values of CSS3.
Borders
In the box model section you learnt about the borders width, style and colours. In this section you will learn about the border radius and box shadow.
| Border Radius | |
| Property | Values |
|---|---|
| border-top-right-radius | length e.g.25px |
| border-bottom-right-radius | length e.g.10px |
| border-top-left-radius | length e.g.10px |
| border-bottom-left-radius | length e.g.10px |
Example 1
<style>
h2
{
border:3px solid blue;
border-top-right-radius:30px;
}
</style>
</head>
<body>
<h2>Border Radius</h2>
</body>
Displays
Border Radius
Example 2
<style>
h2
{
border:5px solid red;
border-top-right-radius:30px ;
border-bottom-left-radius:30px;
}
</style>
</head>
Displays
Border Radius
Example 3
<style>
h2
{
border:8px solid black;
border-radius:30px;
background-color:#99DD99;
padding:20px;
}
</style>
</head>
Displays
Border Radius
Box Shadow
| Box Shadow | |
| Property | Values |
|---|---|
| box-shadow | [x offset, y offset, blur radius, spread radius, color, inset] [length, length, length, length, color, inset] |
- x offset (horizontal) - the shadow is on the right side if the value is positive and on the left side if negative
- y offset (vertical) - the shadow is on the bottom if the value is positive and on the top if negative
- blur radius - the higher the value the blurry the shadow
- spread radius - a postive value increases the size of the shadow and a negative decreases the size
- color - colour of the shadow
- inset - the outer shadow is changed to the inner shadow
Note! The following values can be included or ignored: blur radius, spread radius, color and inset. Have a look at the examples below to help you understand.
Example 1
<style>
p
{
border:1px solid green;
box-shadow:5px 5px;
}
</style>
</head>
<body>
<p >
The weather is nice today.
</p>
</body>
Displays
The weather is nice today.
Example 2
<style>
p
{
border:1px solid black;
box-shadow:5px 5px 10px 5px blue
}
</style>
</head>
Displays
The weather is nice today.
Example 3
<style>
p
{
border:5px solid blue;
box-shadow:5px 5px 10px 5px red inset
}
</style>
</head>
Displays
The weather is nice today.
Text Shadow
A text shadow can be added to the text to make it look more effective. The values are not the same as the box-shadow; it does not have the spread radius and inset values.
| Text Shadow | |
| Property | Values |
|---|---|
| text-shadow |
[x offset, y offset, blur radius, color] [length, length, length, color] |
Example 1
<style>
h2
{
color:red;
text-shadow:2px 2px 5px blue
}
</style>
</head>
<body>
<h2 >
LILLY ROBOT
</h2>
</body>
Displays
LILLY ROBOT
Example 2
In this example, we have applied multiple text shadows using a comma to separate them.
<style>
p
{
//mutiple text shadows
color:white;
text-shadow:0px 4px 2px green,
4px 0px 2px red;
}
</style>
</head>
Displays
LILLY ROBOT
Animation
| Animation | ||
| Property | Values | Description |
|---|---|---|
| animation-name | none, IDENT | declares the name for the @keyframes animation |
| animation-duration | time | the time it takes for an animation to complete a cycle |
| animation-delay | time | time it takes to load an element and start of the animation |
| animation-direction | normal, alternate | sets the direction of the animation |
| animation-iteration-count | number | number of times the animation is repeated |
| animation-play-state | running, pauses | states if animation is running or paused |
| animation-timing-function | ease (default), linear, ease-in,ease-out, ease-in-out,cubic-bezier(n,n,n,n) | speed curve:time an animation takes to change from style to another |
We have to use the @keyframes rule with the above animation properties. It tells the CSS how the animation is going to work.
If you want to see the animation you will need to refresh your screen by pressing F5.
Example 1
<style>
@keyframes bord
{
from{border:4px dotted red;}
to{border:10px dotted green;}
}
//this is the element where we want the animation to take place
h2
{
animation-name:bord;
animation-duration:6s;
animation-iteration-count:3;
border:4px dotted red;
padding:20px;
}
</style>
</head>
Displays
LILLY ROBOT
Example 2
<style>
@keyframes bord
{
from{background-color:#FF00FF; color:white}
to{background-color:yellow; color:green;}
}
//animation element
h2
{
animation-name:bord;
animation-duration:8s;
animation-iteration-count:4;
animation-direction:alternate;
background-color:#FF00ff;
color:white;
padding:30px;
}
</style>
</head>
Displays
LILLY ROBOT
Transitions
Transition allows you to control the speed of the animation; the change takes place gradually.
| Border Radius | ||
| Property | Values | Description |
|---|---|---|
| transition-delay | time | delays the transition of the animation |
| transition-duration | time | allows you to set a time on how long you want the transition for |
| transition-property | none, all | properties that can be transitioned e.g.width, height,color |
| transition-timing-function | ease(default), linear,ease-in, ease-out, ease-in-out,cubic-bezier(n,n,n,n) | controls the pace of the transition |
Example
<style>
.box1
{
width:100px;
height:100px;
border:1px solid red;
font-size:20px;
color:red;
padding:5px;
transition:all 3s;
transform-duration:2s;
}
.box1:hover
{
border:2px solid blue;
font-size:30px;radius:50%;
color:blue;
transform:rotate(360deg);
} </style>
</head>
<h2 class="box1" >
LILLY ROBOT
</h2>
</body>
Displays
LILLY ROBOT
Hover your mouse on
LILLY ROBOT to see the transition.
Transition Shorthand
You can write the transition in shorthand for example transition-property:width, transition-duration:2s and transition-timing-function:ease-out can be written as:
transition: width 2s ease-out
Note! We have only included 3 of the transition properties. It is up to you if you want to include all of them.
The order they should appear:
- transition-property
- transition-duration
- transition-function-timing
- transition-delay
Multiple Transitions
We can include multiple transitions using a comma to separate them.
transition-property: width, height
transition duration:2s, 3s
Transforms
The transform property allows you to translate, rotate, scale, or skew an element.
| Transforms | |
| Property | Values |
|---|---|
| transform-property | translate, rotate, scale, or skew |
| Value | Description |
|---|---|
| translate | An element can be moved left, right, up, or down. We use the translate function translate() e.g translate(20px,30px) moves element 20px from the left and 30px from the top. If we wanted the element to move from the right and from the bottom we use the negative e.g (-20px,-30px). |
| rotate | Rotates an element at a specific angle. We use the rotate function() e.g.rotate(90deg)(clockwise) or rotate(-90deg)counter-clockwise. |
| scale | Scale (x,y) function - scales the element horizontally and vertically e.g scale(1.5,0.5). |
| skew | Tilts an element to the left or right. We can use the skew(x,y) function. If we only wanted to skew an element along the x-axis we can use skewX() e.g skewX(20deg) or if we wanted to skew an element along the y-axis then we use skewY() e.g skewY(20deg). |
Example: Rotate
<style>
p
{
transform-property:rotate(180);
color:blue;
font-size:25px;
font-weight:bold:
} </style>
</head>
<body>
<p>Hello</p>
</body>
Displays
Normal:
Hello
Rotate:
Hello
Example: Skew
<style>
p
{
transform-property:skew(25deg, 15deg);
background-color:rgb(115,155,203);
color:white;
font-size:25px;
font-weight:bold:
text-aling:center;
} </style>
</head>
Displays
Normal:
Hello
Skew:
Hello
Example: Scale
<style>
p
{
transform-property:scale(0.5,3);
color:red;
font-size:25px;
font-weight:bold:
} </style>
</head>
Displays
Normal:
Hello
Scale:
Hello
Example: Translate
<style>
p
{
transform-property:translate(20px,-15px);
font-size:25px;
color:red;
font-weight:bold:
} </style>
</head>
Displays
Normal:
Hello
Translate:Hello