|
Сообщение от tenshi
|
|
как сделать чтобы при наведении менялся градиент и появлялась тенюшка? ;-)
|
насчет тенюшки не знаю, ибо в ИЕ ее нет, хотя конечно можно юзать фильтры. Но пример с наведением очень прост, кроссбраузерный вариант и без javascript
:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
padding: 10px;
margin: 0;
background-color: #7b9cad;
}
.my-block {
position: relative;
display: inline-block;
background-color: green;
border-radius: 16px 32px 16px 32px;
width: 200px;
height: 200px;
text-align: center;
/* IE9 */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QwZTgwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlODhhMDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* FF3.6+ */
background: -moz-linear-gradient(top, #D0E805 0%, #E88A05 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D0E805), color-stop(100%,#E88A05));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #D0E805 0%, #E88A05 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #D0E805 0%, #E88A05 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #D0E805 0%, #E88A05 100%);
/* W3C */
background: linear-gradient(to bottom, #D0E805 0%, #E88A05 100%);
}
.my-block:hover {
border-radius: 64px;
/* IE9 */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U4OGEwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMGU4MDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* FF3.6+ */
background: -moz-linear-gradient(top, #E88A05 0%, #D0E805 100%);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E88A05), color-stop(100%,#D0E805));
/* Chrome10+,Safari5.1+ */
background: -webkit-linear-gradient(top, #E88A05 0%, #D0E805 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #E88A05 0%, #D0E805 100%);
/* IE10+ */
background: -ms-linear-gradient(top, #E88A05 0%, #D0E805 100%);
/* W3C */
background: linear-gradient(to bottom, #E88A05 0%, #D0E805 100%);
}
.my-block .content {
padding: 20px;
}
</style>
<!--[if VML&(lt IE 9)]>
<?import namespace="v" urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace ?>
<style type="text/css">
v\:shape,
v\:shapetype,
v\:formulas,
v\:group,
v\:f,
v\:path,
v\:fill,
v\:vmlframe {
behavior:url(#default#VML);
}
v\:shape, v\:vmlframe {
display: block;
width: 100%;
min-height: 100%;
position: absolute;
}
.my-block {
background-color: transparent;
}
.my-block v\:shape {
top: 0;
left: 0;
width: 200px;
height: 200px;
position: absolute;
z-index: -1;
}
.my-block .over {
filter: Alpha(opacity=0);
}
.my-block:hover .over {
filter: none;
}
.my-block:hover .normal {
visibility: hidden;
}
</style>
<v:shapetype id="vml-radius" adj="0 0 0 0" coordorigin="-1 -1" coordsize="1000000 1000000"
path="m,@9qy@8,l@15,qx@0,@16l@0,@24qy@22,@1l@29,@1qx,@31l,@9xm@44,@54qy@49,@36
l@60,@36qx@39,@65l@39,@77qy@71,@42l@82,@42qx@44,@88l@44,@54xe" stroked="false">
<v:formulas>
<v:f eqn="val width"/><v:f eqn="val height"/><v:f eqn="prod @0 1 pixelwidth"/>
<v:f eqn="prod @1 1 pixelheight"/><v:f eqn="prod #0 1 10000"/><v:f eqn="prod @4 10000 1"/>
<v:f eqn="sum #0 0 @5"/><v:f eqn="if @4 @4 @6"/><v:f eqn="prod @7 @2 1"/><v:f eqn="prod @6 @3 1"/>
<v:f eqn="prod #1 1 10000"/><v:f eqn="prod @10 10000 1"/><v:f eqn="sum #1 0 @11"/>
<v:f eqn="if @10 @10 @12"/><v:f eqn="sum pixelwidth 0 @13"/><v:f eqn="prod @14 @2 1"/>
<v:f eqn="prod @12 @3 1"/><v:f eqn="prod #2 1 10000"/><v:f eqn="prod @17 10000 1"/>
<v:f eqn="sum #2 0 @18"/><v:f eqn="if @17 @17 @19"/><v:f eqn="sum pixelwidth 0 @20"/>
<v:f eqn="prod @21 @2 1"/><v:f eqn="sum pixelheight 0 @19"/><v:f eqn="prod @23 @3 1"/>
<v:f eqn="prod #3 1 10000"/><v:f eqn="prod @25 10000 1"/><v:f eqn="sum #3 0 @26"/>
<v:f eqn="if @25 @25 @27"/><v:f eqn="prod @28 @2 1"/><v:f eqn="sum pixelheight 0 @27"/>
<v:f eqn="prod @30 @3 1"/><v:f eqn="sum #4 #6 0"/><v:f eqn="sum #5 #7 0"/>
<v:f eqn="sum @32 @33 0"/><v:f eqn="prod #4 @3 1"/><v:f eqn="if @34 @35 @9"/>
<v:f eqn="prod #5 @2 1"/><v:f eqn="sum @0 0 @37"/><v:f eqn="if @34 @38 0"/>
<v:f eqn="prod #6 @3 1"/><v:f eqn="sum @1 0 @40"/><v:f eqn="if @34 @41 @9"/>
<v:f eqn="prod #7 @2 1"/><v:f eqn="if @34 @43 0"/><v:f eqn="sum @7 0 #7"/>
<v:f eqn="if @45 @45 0"/><v:f eqn="prod @46 @2 1"/><v:f eqn="sum @47 @43 0"/>
<v:f eqn="if @34 @48 0"/><v:f eqn="sum @6 0 #4"/><v:f eqn="if @50 @50 0"/>
<v:f eqn="prod @51 @3 1"/><v:f eqn="sum @52 @35 0"/><v:f eqn="if @34 @53 @9"/>
<v:f eqn="sum @13 0 #5"/><v:f eqn="if @55 @55 0"/><v:f eqn="sum pixelwidth 0 @56"/>
<v:f eqn="prod @57 @2 1"/><v:f eqn="sum @58 0 @37"/><v:f eqn="if @34 @59 0"/>
<v:f eqn="sum @12 0 #4"/><v:f eqn="if @61 @61 0"/><v:f eqn="prod @62 @3 1"/>
<v:f eqn="sum @63 @35 0"/><v:f eqn="if @34 @64 @9"/><v:f eqn="sum @20 0 #5"/>
<v:f eqn="if @66 @66 0"/><v:f eqn="sum pixelwidth 0 @67"/><v:f eqn="prod @68 @2 1"/>
<v:f eqn="sum @69 0 @37"/><v:f eqn="if @34 @70 0"/><v:f eqn="sum @19 0 #6"/>
<v:f eqn="if @72 @72 0"/><v:f eqn="sum pixelheight 0 @73"/><v:f eqn="prod @74 @3 1"/>
<v:f eqn="sum @75 0 @40"/><v:f eqn="if @34 @76 @9"/><v:f eqn="sum @28 0 #7"/>
<v:f eqn="if @78 @78 0"/><v:f eqn="prod @79 @2 1"/><v:f eqn="sum @80 @43 0"/>
<v:f eqn="if @34 @81 0"/><v:f eqn="sum @27 0 #6"/><v:f eqn="if @83 @83 0"/>
<v:f eqn="sum pixelheight 0 @84"/><v:f eqn="prod @85 @3 1"/><v:f eqn="sum @86 0 @40"/>
<v:f eqn="if @34 @87 @9"/>
</v:formulas>
</v:shapetype>
<![endif]-->
</head>
<body>
<span class="my-block">
<!--[if VML&(lt IE 9)]>
<v:shape class="over" adj="64 64 64 64" type="#vml-radius">
<v:fill type="gradient" method="sigma" angle="0" color="#D0E805" color2="#E88A05" />
</v:shape>
<v:shape class="normal" adj="16 32 16 32" type="#vml-radius">
<v:fill type="gradient" method="sigma" angle="0" color2="#D0E805" color="#E88A05" />
</v:shape>
<![endif]-->
<div class="content">Блок для теста</div>
</span>
</body>
</html>