04.01.2013, 19:11
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
|
Сообщение от Gozar
|
|
А ты считаешь, что нужно обвешаться полукостылями?
|
Ну имхо - глядя на историю скриптов от devote можно увидеть что все они связаны с выправлением багов ИЕ6-8, (*думаю что ИЕ9 просто еще не включился в этот список, мало для наработки брауза, да и тут наверно еще в наличии брауза на собственных компах
А картинками если делать - ну наверно нет единого стиля в идеологии для градиента и скруглений, будут два отдельных независимых скрипта. Ну и зная автора, - не льстят ему картинки, (*были пару раз прецеденты - отвергнул
Последний раз редактировалось Deff, 04.01.2013 в 19:15.
|
|
04.01.2013, 19:12
|
|
Профессор
|
|
Регистрация: 20.03.2008
Сообщений: 1,183
|
|
Сообщение от devote
|
|
Почитал комменты на хабре и понял что люди совсем не понимают о чем речь. Особенно поражает сравнение CSS3PIE с тем что я привел в пример. Дык скажу для неосведомленных, CSS3PIE делает круглые углы не спорю и тоже через VML но делает это иначе, совсем не оптимизировано, при любом изменении блока делает полную перерисовку VML. От этого идут огромные тормоза. В моем же примере при изменении блока перерисовку делает браузер, что является менее нагружаемым.
|
как сделать чтобы при наведении менялся градиент и появлялась тенюшка? ;-)
__________________
.ня
|
|
04.01.2013, 19:25
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Gozar
|
|
Ну тогда у меня для тебя новость - скругленные углы кроссбраузерно легче делать через картинки, нежели через кучу полукостылей.
|
ну дык никто же не заставляет тебя использовать что-то одно.. Пользуй тем что удобно, а статья лишь показала как можно в ИЕ лекго делать круглые углы. Может позже и сделаю либу на основе данной техники. |
|
04.01.2013, 19:50
|
|
Профессор
|
|
Регистрация: 14.03.2012
Сообщений: 1,808
|
|
|
Цитата:
|
|
Потом? Ты сам-то понимаешь что пишешь? Я не понимаю. В предложении смысл отсутствует.
|
имел в виду то, что картинками делать это глупо.
либо получится говно-верстка, либо делать костели под картинки, чтобы они не отображались в нормальных браузерах.
имхо
devote предложил отличный костыль для старых ишаков.
__________________
Научу себя плохому 
|
|
04.01.2013, 20:03
|
 |
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
|
Сообщение от devote
|
|
Пользуй тем что удобно
|
|
Сообщение от devote
|
|
статья лишь показала как можно в ИЕ лекго делать круглые углы
|
О том и речь.
Explorer 9 5.5%
Explorer 8 4.1%
Explorer 7 0.8%
Explorer 6 0.3%
Статья не имеет никакой практической пользы. Подойдет как историческая справка.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
|
|
04.01.2013, 20:11
|
|
猫
|
|
Регистрация: 07.06.2007
Сообщений: 7,504
|
|
|
Сообщение от l-liava-l
|
|
имел в виду то, что картинками делать это глупо.
|
Да ты прям гений. Только другого способа сделать это кроссбраузерно пока ещё никто не придумал. Не глючат только картинки.
|
Сообщение от l-liava-l
|
|
либо получится говно-верстка, либо делать костели под картинки, чтобы они не отображались в нормальных браузерах.
|
А по твоему, вот это хорошая верстка:
<!--[if VML&(lt IE 9)]>
<?import namespace="v" urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace ?>
<![endif]-->
<!--[if VML&(lt IE 9)]>
<style type="text/css">
v\:shape, v\:shapetype, v\:formulas, v\:group, v\:f, v\:path, v\:fill {
behavior:url(#default#VML);
}
v\:group, v\:shape {
display:inline-block;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
</style>
<![endif]-->
....
|
Сообщение от l-liava-l
|
|
devote предложил отличный костыль для старых ишаков.
|
Нет не предложил. В IE9 не работает. Значит это только пол костыля.
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
|
|
04.01.2013, 20:17
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от 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>
Последний раз редактировалось devote, 04.01.2013 в 21:06.
|
|
04.01.2013, 20:26
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Gozar
|
|
А по твоему, вот это хорошая верстка:
|
Ну дык не надо совать все в верстку, CSS можно сунуть в отдельный файл, так же и шаблоны сунуть можно в отдельный файл... Все можно отделить.. И как я уже говорил, не нравится не юзай.. Кому то это понадобилось, ты же не единственный человек во всем мире.. Есть другие с другими идеалогиями, мнением и т.д. А твой флуд никому пользы не принесет, а лишь приносит только мусор в топик. Что тем кому надо через твой мусор сложно будет найти инфу.
Гозар, я конечно понимаю что тебе везде нужно воткнуть себя. Но доказывать что-то бессмысленно, тебя давно тут никто всерьез не воспринимает. По началу я о тебе мнение имел куда лучше, а спустя время понял что ты из тех людей что не принимают чужих мнений, решений и т.д. То есть пытаешся себя мнить самым правильным человеком. Это обычно называют ЭГО, у тебя огромное оно. Ну будь ты проще, если тебе что-то не по душе. Ну почему ты считаешь что все такие как ты? |
|
04.01.2013, 20:29
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
devote,
 Ксать по поводу полного отсутствия скриптов и коммента
|
Сообщение от Gozar
|
|
А по твоему, вот это хорошая верстка:
|
Не удобней засунуть верстку в подгружаемый скрипт с
document.write(тут теги для эффектов)
И выложить ссыль на файл ?
*
document.write('<!--[if VML&(lt IE 9)]>\
<?import namespace="v" urn="urn:schemas-microsoft-com:vml" implementation="#default#VML" declareNamespace ?>\
<![endif]-->\
<!'+'--[if VML&(lt IE 9)]>\
<style type="text/css">\
v\:shape, v\:shapetype, v\:formulas, v\:group, v\:f, v\:path, v\:fill {\
behavior:url(#default#VML);\
}\
v\:group, v\:shape {\
display:inline-block;\
left: 0px;\
top: 0px;\
width: 100%;\
height: 100%;\
}\
</style>\
<![endif]-->');
Последний раз редактировалось Deff, 04.01.2013 в 20:40.
|
|
04.01.2013, 20:59
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
Deff,
а не проще это сделать через обычные скрипты:
(function(){
var msie = +(((window["eval"] && eval("/*@cc_on 1;@*/") && /msie (\d+)/i.exec(navigator.userAgent)) || [])[1] || 0);
if (msie && msie < 9) {
// добавляем namespace
try {
if (!document.namespaces["v"])
document.namespaces.add("v", "urn:schemas-microsoft-com:vml", "#default#VML");
} catch(_e_) { }
// создаем стиль для VML элементов
var vmlStyles = document.createElement('style');
vmlStyles.type = "text/css";
vmlStyles.styleSheet.cssText =
'v\\:vmlframe,v\\:shapetype,v\\:formulas,v\\:f,v\\:group,v\\:shape,v\\:fill{'+
'behavior:url(#default#VML)}v\\:vmlframe,v\\:group,v\\:shape{display:inline-block'+
';left:0px;top:0px;width:100%;height:100%}v\\:shape,v\\:group{position:absolute;z-index:-1}';
document.documentElement.firstChild.appendChild(vmlStyles);
var eqns = [
"val width","val height","prod @0 1 pixelwidth","prod @1 1 pixelheight","prod #0 1 10000",
"prod @4 10000 1","sum #0 0 @5","if @4 @4 @6","prod @7 @2 1","prod @6 @3 1","prod #1 1 10000",
"prod @10 10000 1","sum #1 0 @11","if @10 @10 @12","sum pixelwidth 0 @13","prod @14 @2 1",
"prod @12 @3 1","prod #2 1 10000","prod @17 10000 1","sum #2 0 @18","if @17 @17 @19",
"sum pixelwidth 0 @20","prod @21 @2 1","sum pixelheight 0 @19","prod @23 @3 1","prod #3 1 10000",
"prod @25 10000 1","sum #3 0 @26","if @25 @25 @27","prod @28 @2 1","sum pixelheight 0 @27",
"prod @30 @3 1","sum #4 #6 0","sum #5 #7 0","sum @32 @33 0","prod #4 @3 1","if @34 @35 @9",
"prod #5 @2 1","sum @0 0 @37","if @34 @38 0","prod #6 @3 1","sum @1 0 @40","if @34 @41 @9",
"prod #7 @2 1","if @34 @43 0","sum @7 0 #7","if @45 @45 0","prod @46 @2 1","sum @47 @43 0",
"if @34 @48 0","sum @6 0 #4","if @50 @50 0","prod @51 @3 1","sum @52 @35 0","if @34 @53 @9",
"sum @13 0 #5","if @55 @55 0","sum pixelwidth 0 @56","prod @57 @2 1","sum @58 0 @37","if @34 @59 0",
"sum @12 0 #4","if @61 @61 0","prod @62 @3 1","sum @63 @35 0","if @34 @64 @9","sum @20 0 #5",
"if @66 @66 0","sum pixelwidth 0 @67","prod @68 @2 1","sum @69 0 @37","if @34 @70 0","sum @19 0 #6",
"if @72 @72 0","sum pixelheight 0 @73","prod @74 @3 1","sum @75 0 @40","if @34 @76 @9","sum @28 0 #7",
"if @78 @78 0","prod @79 @2 1","sum @80 @43 0","if @34 @81 0","sum @27 0 #6","if @83 @83 0",
"sum pixelheight 0 @84","prod @85 @3 1","sum @86 0 @40","if @34 @87 @9"
];
// создаем правило с формулой
var shapetype = document.createElement('v:shapetype');
shapetype.id = 'vml-radius';
shapetype.stroked = false;
shapetype.coordorigin = "-1,-1";
shapetype.coordsize = "1000000,1000000";
shapetype.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';
var formulas = document.createElement('v:formulas');
for(var f, i = 0; i < eqns.length; i++ ) {
f = document.createElement('v:f');
f.eqn = eqns[i];
formulas.appendChild(f);
}
shapetype.appendChild(formulas);
document.documentElement.firstChild.appendChild(shapetype);
}
})();
подключаем это дело на странице в HEAD:
<!--[if VML&(lt IE 9)]><script type="text/javascript" src="vml.js"></script><![endif]-->
|
|
|
|
