ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>CSS-Transitions с использованием :focus  [css3] </title>
<style type="text/css" >
html {
    height: 100%;
    margin-bottom: 1px;
    overflow-y: scroll;
}
body {
    background: none repeat scroll 0 0 #444444;
    color: white;
    margin: 0 auto;
    padding: 20px 0 0;
    width: 1026px;
}
a, a:link, a:visited {
    -moz-transition: color 0.4s linear 0s;
    color: lightblue;
}
a:hover, a:focus {
    color: white;
}
p {
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 45%;
}
p.bottom {
    clear: both;
    padding-top: 40px;
}
#container {
    overflow: hidden;
    padding: 0 0 60px 6px;
}
h1 {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    text-align: center;
}

#box-active.box {
    -webkit-transition: width 2s ease, height 2s ease;  
    -moz-transition: width 2s ease, height 2s ease;  
    -o-transition: width 2s ease, height 2s ease;  
    -ms-transition: width 2s ease, height 2s ease;  
    transition: width 2s ease, height 2s ease;  
    background: none repeat scroll 0 0 #222222;
    height: 300px;
    margin: 0 auto;
    width: 300px;
}

#box-active.box:active {
    height: 500px;
    width: 500px;
}

/*Focus Transitions*/
form {
    margin: 0 auto;
    padding: 30px;
}
fieldset {
    border: medium none;
    margin: 0 auto;
    padding: 0 0 0 60px;
    width: 360px;
}
form div {
    font-family: Arial,Helvetica,sans-serif;
    height: 70px;
    padding: 0 0 15px;
}

form div.ta {
    height: auto;
}

#focus-form label {
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    padding: 0 0 5px;
}

#focus-form input {
     -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
    background: none repeat scroll 0 0 #E2E2E2;
    border: medium none;
    font-size: 20px;
    height: 30px;
    padding: 5px;
    width: 280px;
}
#focus-form input:focus, #focus-form textarea:focus {
    width: 340px;
}

#focus-form input[type="button"] {
    font-size: 15px;
    padding: 0 20px;
    width: auto;
}

#focus-form textarea {
     -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
    border: medium none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 17px;
    height: 110px;
    padding: 3px;
    resize: vertical;
    width: 282px;
}

/*Checked Transitions*/
#chk-box input {
     -webkit-transition: width 1s ease;
    -moz-transition: width 1s ease;
    -o-transition: width 1s ease;
    -ms-transition: width 1s ease;
    transition: width 1s ease;
    height: 20px;
    vertical-align: middle;
}

#chk-box input:checked {
    width: 30px;
}

/*Disabled Transitions*/
form div.ta {
    height: auto;
}

#dis-block label {
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    padding: 0 0 5px;
}

#dis-block input[type="text"] {
     -webkit-transition: background 1s ease;
    -moz-transition: background 1s ease;
    -o-transition: background 1s ease;
    -ms-transition: background 1s ease;
    transition: background 1s ease;
    background: none repeat scroll 0 0 #E2E2E2;
    border: medium none;
    font-size: 20px;
    height: 14px;
    margin-left: 20px;
    padding: 5px;
    width: 160px;
}

#dis-block input:disabled, #dis-block textarea:disabled {
    background: none repeat scroll 0 0 #666666;
}

#dis-block input[type="button"] {
    display: block;
    font-size: 15px;
    margin: 0 0 0 40px;
    padding: 0 20px;
    width: 200px;
}

#dis-block textarea {
     -webkit-transition: background 1s ease;
    -moz-transition: background 1s ease;
    -o-transition: background 1s ease;
    -ms-transition: background 1s ease;
    transition: background 1s ease;
    border: medium none;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 17px;
    height: 110px;
    padding: 3px;
    resize: vertical;
    width: 282px;
}

/*Media Query Transition*/
#media.box {
width: 440px;
height: 440px;
background: #222;
margin: 0 auto;
-webkit-transition: width 2s ease, height 2s ease;
-moz-transition: width 2s ease, height 2s ease;
-o-transition: width 2s ease, height 2s ease;
-ms-transition: width 2s ease, height 2s ease;
transition: width 2s ease, height 2s ease;
	}

@media only screen and (max-width : 960px) {
#media.box {
	width: 300px;
	height: 300px;
}
	}
</style>
    </head>
    <body>
<div id="container">
<h1>CSS3-Transitions с использованием :focus</h1>
<p>Используя мышь или клавиатуру, поставьте курсор мыши внутри любого из полей формы.</p>
<form id="focus-form">
<fieldset>
<div>	
<label>Имя:</label>
<input type="text">
</div>
<div>
<label>Email:</label>
<input type="email">
</div>
<div class="ta">
<label>Комментарий:</label>
<textarea>

Без JavaScript. Это выполнено с помощью CSS псевдо-класса :focus для трансформации (или анимации) ширины элементов формы.

ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне