CSS - właściwości transition
transition
| kod |
wynik kodu |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS - Transition</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
div { width: 250px;
font-size: 20px;
font-weight: bold;
padding: 15px 30px;
background: Lavender;
border: 5px solid Red;
transition: background 1s, border 1s;
}
div:hover{
background: yellow;
border-color: MediumPurple;
}
button {
font-size: 20px;
font-weight: bold;
padding: 15px 30px;
background: Lavender;
border: 5px solid SkyBlue;
transition: background 3s, border 3s;
}
button:hover {
background: orange;
border-color: MediumPurple;
}
</style>
</head>
<body>
<div>Umieść mysz na mnie</div>
<button type="button">Umieść mysz na mnie</button>
</body>
</html>
|
|
transition
| kod |
wynik kodu |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta http-equiv="Content-Language" content="pl">
<title>CSS - Transition</title>
<link rel="Stylesheet" type="text/css" href="style.css" />
<style type="text/css">
td {
height: 80px;
width: 80px;
}
.one {
padding: 15px 30px;
background: LawnGreen;
border: 5px solid Red;
transition: background 1s, border 1s;
}
.two {
padding: 15px 30px;
background: LightCyan;
border: 5px solid SkyBlue;
transition: background 3s, border 3s;
}
.one:hover{
background: yellow;
border-color: MediumPurple;
}
.two:hover {
background: orange;
border-color: MediumPurple;
}
</style>
</head>
<body>
<table>
<tr>
<td class="one"> </td>
<td class="two"> </td>
<td class="one"> </td>
</tr>
<tr>
<td class="two"> </td>
<td class="one"> </td>
<td class="two"> </td>
</tr>
<tr>
<td class="one"> </td>
<td class="two"> </td>
<td class="one"> </td>
</tr>
</table>
</body>
</html>
|
|