Страница 3 из 6 < 12 3 45 > Последняя »
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Простой способ делать закругленные углы любого типа в IE 6-7-8 без JavaScript (https://javascript.ru/forum/offtopic/34396-prostojj-sposob-delat-zakruglennye-ugly-lyubogo-tipa-v-ie-6-7-8-bez-javascript.html)

Deff 04.01.2013 19:11
Цитата:
Сообщение от Gozar
А ты считаешь, что нужно обвешаться полукостылями?
Ну имхо - глядя на историю скриптов от devote можно увидеть что все они связаны с выправлением багов ИЕ6-8, (*думаю что ИЕ9 просто еще не включился в этот список, мало для наработки брауза, да и тут наверно еще в наличии брауза на собственных компах
А картинками если делать - ну наверно нет единого стиля в идеологии для градиента и скруглений, будут два отдельных независимых скрипта. Ну и зная автора, - не льстят ему картинки, (*были пару раз прецеденты - отвергнул

tenshi 04.01.2013 19:12
Цитата:
Сообщение от devote (Сообщение 225117)
Почитал комменты на хабре и понял что люди совсем не понимают о чем речь. Особенно поражает сравнение CSS3PIE с тем что я привел в пример. Дык скажу для неосведомленных, CSS3PIE делает круглые углы не спорю и тоже через VML но делает это иначе, совсем не оптимизировано, при любом изменении блока делает полную перерисовку VML. От этого идут огромные тормоза. В моем же примере при изменении блока перерисовку делает браузер, что является менее нагружаемым.
как сделать чтобы при наведении менялся градиент и появлялась тенюшка? ;-)

devote 04.01.2013 19:25
Цитата:
Сообщение от Gozar
Ну тогда у меня для тебя новость - скругленные углы кроссбраузерно легче делать через картинки, нежели через кучу полукостылей.
ну дык никто же не заставляет тебя использовать что-то одно.. Пользуй тем что удобно, а статья лишь показала как можно в ИЕ лекго делать круглые углы. Может позже и сделаю либу на основе данной техники.

l-liava-l 04.01.2013 19:50
Цитата:
Потом? Ты сам-то понимаешь что пишешь? Я не понимаю. В предложении смысл отсутствует.
имел в виду то, что картинками делать это глупо.
либо получится говно-верстка, либо делать костели под картинки, чтобы они не отображались в нормальных браузерах.
имхо
devote предложил отличный костыль для старых ишаков.

Gozar 04.01.2013 20:03
Цитата:
Сообщение от devote
Пользуй тем что удобно
Цитата:
Сообщение от devote
статья лишь показала как можно в ИЕ лекго делать круглые углы
О том и речь.

Explorer 9 5.5%
Explorer 8 4.1%
Explorer 7 0.8%
Explorer 6 0.3%

Статья не имеет никакой практической пользы. Подойдет как историческая справка.

Gozar 04.01.2013 20:11
Цитата:
Сообщение от 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 не работает. Значит это только пол костыля.

devote 04.01.2013 20:17
Цитата:
Сообщение от 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 20:26
Цитата:
Сообщение от Gozar
А по твоему, вот это хорошая верстка:
Ну дык не надо совать все в верстку, CSS можно сунуть в отдельный файл, так же и шаблоны сунуть можно в отдельный файл... Все можно отделить.. И как я уже говорил, не нравится не юзай.. Кому то это понадобилось, ты же не единственный человек во всем мире.. Есть другие с другими идеалогиями, мнением и т.д. А твой флуд никому пользы не принесет, а лишь приносит только мусор в топик. Что тем кому надо через твой мусор сложно будет найти инфу.

Гозар, я конечно понимаю что тебе везде нужно воткнуть себя. Но доказывать что-то бессмысленно, тебя давно тут никто всерьез не воспринимает. По началу я о тебе мнение имел куда лучше, а спустя время понял что ты из тех людей что не принимают чужих мнений, решений и т.д. То есть пытаешся себя мнить самым правильным человеком. Это обычно называют ЭГО, у тебя огромное оно. Ну будь ты проще, если тебе что-то не по душе. Ну почему ты считаешь что все такие как ты?

Deff 04.01.2013 20:29
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]-->');

devote 04.01.2013 20:59
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]-->


Часовой пояс GMT +3, время: 11:06.
Страница 3 из 6 < 12 3 45 > Последняя »
Показывать 40 сообщений этой темы на одной странице