Transition CSS, . , . . , , , Transition, .
CSS Transitions ":hover" ( ), ":focus" (, ) ":active" ( ).
CSS: box-shadow text-shadow transition
CSS text-shadow box-shadow. , , , "". "", .
, , "hover", (box-shadow) (text-shadow).
box-shadow: 3px 4px 10px #ddd;
text-shadow: 1px 1px 2px currentColor;
- "" ("currentColor"), .
.text-shadow{
display:block;
position: relative;
margin-top: 50px;
padding-top: 50px;
text-align: center;
left: 50%;
top: 50px;
width: 200px;
height: 150px;
transition: all 1s;
}
.text-shadow:hover{
box-shadow: 3px 4px 10px #ddd;
}
.text-shadow span{
color: #ccc;
font-size: 3em;
}
.text-shadow:hover span{
text-shadow: 1px 1px 2px currentColor;
}
HTML:
<div class="text-shadow">
<span></span>
</div>
CSS
, "static" "hover":
<div class="background">
<span>Background</span>
</div>
.background{
display:block;
position: relative;
margin-top: 50px;
padding-top: 50px;
text-align: center;
left: 50%;
top: 50px;
width: 200px;
height: 150px;
background-color: #80D39B;
transition: background-color 5s;
}
"hover" div :
.background:hover{
background-color: #BE3E82;
}
CSS Transition: background 5 . :
.background span{
color: #BE3E82;
font-size: 2em;
transition: color 5s;
}
.background:hover span{
color: #80D39B;
}
CSS Transition opacity. ".background" :
.background{
opacity: 0.5;
background-color: #80D39B;
transition: background-color 5s, opacity 5s;
}
, CSS Transitions , .
:
transition-property: background-color, opacity;
transition-duration: 5s;
5 , , :
transition-duration: 5s, 10s;
5 , - 10.
, transition-delay. transition:
transition: background-color 5s, opacity 5s;
transition-delay: 10s;
, .. opacity (3 ). (4 ), opacity :
.background{
background-color:rgba(128, 211, 155,0.5);
}
:
.background{
display:block;
position: relative;
margin-top: 50px;
padding-top: 50px;
text-align: center;
left: 50%;
top: 50px;
width: 200px;
height: 150px;
background-color:rgba(128, 211, 155,0.5);
transition: background-color 5s, opacity 5s;
}
.background:hover{
background-color:rgba(190, 62, 130,1);
}
.background span{
color: #BE3E82;
font-size: 2em;
transition: color 5s;
}
.background:hover span{
color: #80D39B;
}
CSS Transitions
CSS CSS Transitions.
input radio, "hover" . (height) , radio, :
HTML:
<div class="wrap">
<label for="number1" >
<input type="radio" name="number" id="number1" >
<div class="slider">1</div>
</label>
<label for="number1" >
<input type="radio" name="number" id="number2" >
<div class="slider">2</div>
</label>
<label for="number1" >
<input type="radio" name="number" id="number3" >
<div class="slider">3</div>
</label>
<label for="number1" >
<input type="radio" name="number" id="number4" >
<div class="slider">4</div>
</label>
</div>
input radio:
input[id^="number"]{
position: absolute;
left: -9999px;
}
CSS :
.slider{
display: block;
position: relative;
width: 200px;
height: 50px;
text-align: center;
padding-top: 50px;
font-size: 3em;
transition: all 1s;
}
label[for^="number"]:hover .slider{
background: #b2ebf2;
height: 200px;
}
div . , , max-height 100% height 200px.
, :
.wrap{
position: absolute;
margin-left: 50%;
margin-top: 50px;
width: 200px;
transition: box-shadow 1s;
}
.wrap:hover{
height: 550px;
box-shadow: 3px 4px 10px #ddd;
}
"hover" box-shadow, (height max-height) background-color.
Fade-out text: CSS
, , , . , - linear-gradient, . ? , CMS , , . .
, :
:
CSS:
.fadeout{
position: relative;
-webkit-mask-size: 100% 100%;
-webkit-mask: -webkit-gradient(linear, right bottom, right top,
color-stop(1.00, rgba(0,0,0,1)),
color-stop(0.30, rgba(0,0,0,0.7)),
color-stop(0.20, rgba(0,0,0,0.5)),
color-stop(0.05, rgba(0,0,0,0.1)),
color-stop(0.01, rgba(0,0,0,0.09))
);
-webkit-mask-position: left bottom;
-webkit-transition: -webkit-mask-position 5s ease;
}
HTML:
<div style="background-image: url(Black.jpg); width:30%;">
<div class="fadeout">
<span style="color:yellow;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod urna vitae tellus gravida pharetra. Curabitur ac odio a libero ullamcorper vulputate. Morbi pretium neque vitae rhoncus viverra. Vestibulum quis facilisis lorem, eget pulvinar eros. Sed elit dui, molestie eu euismod vitae, posuere id orci. In hac habitasse platea dictumst. Praesent mi orci, congue et lacus ut, luctus finibus est. Duis eu blandit lectus. Mauris sit amet dui ac leo interdum molestie et nec tortor. Suspendisse luctus arcu non lacus mollis, ac aliquam lorem sollicitudin. Nullam ut vulputate elit. Nullam suscipit ultricies nibh, quis ullamcorper mi. Quisque a velit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ligula nisl, egestas ut eros non, pretium condimentum purus. Donec iaculis, quam ullamcorper gravida pretium, velit ex finibus ante, vel sagittis erat risus id neque.
Nulla dignissim turpis elit, nec tincidunt ex malesuada ut. Nam ut neque venenatis, gravida nisl non, facilisis ligula. Morbi iaculis tincidunt nisl, a efficitur quam iaculis id. Morbi turpis neque, tristique sit amet nisi non, luctus maximus purus. Pellentesque a orci id leo mattis vulputate eget id quam. Mauris vestibulum faucibus elit, a porttitor ipsum ornare et. Pellentesque non consectetur mauris, ut scelerisque ante. Nam molestie purus dignissim, auctor justo at, rutrum nibh. Praesent justo lectus, accumsan ac tempus et, blandit vulputate magna. Morbi faucibus erat eu nunc ultricies, in semper metus convallis. Maecenas feugiat quis turpis eget rhoncus.
Pellentesque et lacinia massa. Quisque vel dapibus velit.
<a href="#">In non elit in felis vehicula lobortis</a>.
</span>
</div>
</div>
<div style="width:30%; background-image: url(sea.jpg); background-width:5%;">
<div class="fadeout">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod urna vitae tellus gravida pharetra. Curabitur ac odio a libero ullamcorper vulputate. Morbi pretium neque vitae rhoncus viverra. Vestibulum quis facilisis lorem, eget pulvinar eros. Sed elit dui, molestie eu euismod vitae, posuere id orci. In hac habitasse platea dictumst. Praesent mi orci, congue et lacus ut, luctus finibus est. Duis eu blandit lectus. Mauris sit amet dui ac leo interdum molestie et nec tortor. Suspendisse luctus arcu non lacus mollis, ac aliquam lorem sollicitudin. Nullam ut vulputate elit. Nullam suscipit ultricies nibh, quis ullamcorper mi. Quisque a velit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris ligula nisl, egestas ut eros non, pretium condimentum purus. Donec iaculis, quam ullamcorper gravida pretium, velit ex finibus ante, vel sagittis erat risus id neque.
Nulla dignissim turpis elit, nec tincidunt ex malesuada ut. Nam ut neque venenatis, gravida nisl non, facilisis ligula. Morbi iaculis tincidunt nisl, a efficitur quam iaculis id. Morbi turpis neque, tristique sit amet nisi non, luctus maximus purus. Pellentesque a orci id leo mattis vulputate eget id quam. Mauris vestibulum faucibus elit, a porttitor ipsum ornare et. Pellentesque non consectetur mauris, ut scelerisque ante. Nam molestie purus dignissim, auctor justo at, rutrum nibh. Praesent justo lectus, accumsan ac tempus et, blandit vulputate magna. Morbi faucibus erat eu nunc ultricies, in semper metus convallis. Maecenas feugiat quis turpis eget rhoncus.
Pellentesque et lacinia massa. Quisque vel dapibus velit. <a href="#">In non elit in felis vehicula lobortis</a>.
</div>
</div>
background .
"fadeout" CSS mask: -webkit-gradient, .
CSS Transitions - . , transition, transition-property. CSS - . , , transition, .