Подбираем код для того, чтобы сместить форму в правый верхний угол, потом меняем фоны в форме, потом размышляем над вариантами background: linear-gradient,
In [ ]:
[CSS3 Gradients w3schools](http://www.w3schools.com/css/css3_gradients.asp)
<br/>[Radial Gradients](http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_gradient-radial_size) - Use of different size keywords
<br/>[Radial Gradient](http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_gradient-radial2) - Differently Spaced Color Stops
<br/>[]()
<br/>[background-size](http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain)
<br/>[CSS attr() Function](http://www.w3schools.com/cssref/func_attr.asp)
Ниже полезные фрагменты¶
In [14]:
%%html
<style>
div.sein1 {
max-width: 800px;
height: 260px;
border: 1px solid black;
background-size: 100% ;
background-repeat: no-repeat;
background-image: url('http://cl72410.tmweb.ru/jm_34_trado/images//banners/criterias_w1_t.PNG');
background-position: top left;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 15s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {background-position: center;}
26% {background-size: 40px 225px;}
//85% {background-position: right bottom, left top;}
//60% {background-position: left bottom;}
//90% {background-position: bottom right;}
//100% {background-position: bottom left;}
}
/* Standard syntax */
@keyframes mymove {
0% {background-position: center;}
26% {background-size: 20%;}
/*/85% {background-position: right bottom, left top;}
//60% {background-position: left bottom;}
//90% {background-position: bottom right;}
//100% {background-position: bottom left;} */
}
</style>
<div class="sein1"></div>
In [ ]:
In [4]:
%%html
<div class="sein1"><div class="sein2"><div class="sein3">
<div class="se_hack"><h4 class="call_me_back_headline">Позвоните 3223322333322</h4>
<p class="call_me_back_pretext">Или оставьте свой телефон</p>
<form action="" method="post" class="form-validate" id="mod_itf_form" name="mod_itf_form" onsubmit="return validateForm(this);">
<input name="action" value="CallMeUp" type="hidden">
<p class="call_me_back_form_name"><input onclick="doClear(this)" id="contact_name" name="contact_name" value="Ваше имя" class="inputbox input-medium" type="text"></p>
<p class="call_me_back_form_phone"><input onclick="doClear(this)" id="contact_phone" name="contact_phone" value="Ваш номер телефона" class="inputbox input-medium" type="text"></p>
<p class="call_me_back_form_submit"><input name="mod_itf_call_me_back_form_submit" value="Перезвоните мне" class="button" type="submit"></p>
</form>
<div style="text-align: right; padding-right: 4px; font-size: 10px;display: none;"></div></div></div></div>
In [22]:
%%html
<style>
div.sein3 {
width:200px;
background-color:blue;
float:right;
</style>
In [ ]:
R: 244, G: 246, B: 247 | #F4F6F7 | ΔX: 0, ΔY: 0 | body.site com_content view-category layout-blog no-task itemid-101
In [ ]:
rgba(244,246,248,0),rgba(244,246,248,1)
In [17]:
%%html
<style>
div.sein3 {
background: rgba(244,246,248,0.5); /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left,rgba(244,246,248,0),rgba(244,246,248,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(244,246,248,0),rgba(244,246,248,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(244,246,248,0),rgba(244,246,248,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(244,246,248,0),rgba(244,246,248,1)); /*Standard*/
</style>
In [25]:
%%html
<style>
div.sein3 form p > input{
float: right;
</style>
Using Transparency¶
CSS3 gradients also support transparency, which can be used to create fading effects.
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:
In [12]:
%%html
<style>
#grad {
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
width:400px;
height:200px;
}
</style>
<div id="grad">Полупрозрачный градиент</div>
Цветов и переходов может быть много, кроме того, есть еще радиальные градиенты...
In [27]:
%%html
<style>
#grad4 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-corner at 98% 20%,red,rgba(244,246,248,1),rgba(244,246,248,0),black); /* Standard syntax (must be last) */
}
</style>
<div id="grad4">Радиальный градиент с прозрачным замесом</div>
In [28]:
%%html
<style>
#grad5 {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-corner at 98% 20%,red,rgba(244,246,248,1),rgba(244,246,248,0),black,red,rgba(244,246,248,1),rgba(244,246,248,0),black,red,rgba(244,246,248,1),rgba(244,246,248,0),black); /* Standard syntax (must be last) */
}
</style>
<div id="grad5">Радиальный градиент с прозрачным замесом</div>
In [35]:
%%html
<style>
#grad5 {
height: 200px;
width: 200px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-corner at 98% 20%,red,rgba(244,246,248,0),black,rgba(244,246,248,0),red,red,red,rgba(244,246,248,1)); /* Standard syntax (must be last) */
}
</style>
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий