Помощник
|
Сдвиг верстки на 1px |
shaddad_mw
|
Сообщение
#1
|
||
|
|
||
|
|||
andreykashops_hb |
18.7.2013, 9:30;
Ответить: andreykashops_hb
Сообщение
#2
|
|
HTML5 вроде не должно влиять, тут все дело в CSS и в капризах браузера. У меня например тоже проблемы с фигурами на CSS, когда меняешь размер окна в браузере, до:
[img]http://f3.s.qip.ru/Wd8G0AMa.png[/img] после: [img]http://f3.s.qip.ru/Wd8G0AMb.png[/img] Самое главное, что это чередуется, то-есть если увеличить еще на одну единицу - будет опять нормально. |
|
|
shaddad_mw
|
Сообщение
#3
|
|
Да, у меня и такое тоже было, но только с обычным логотипом, вставленным в сайдбар - при изменении размеров она браузера, изображение тоже начинает себя так вести. Но с этой проблемой я разобрался так, что вокруг логотипа оставил прозрачное поле за счет самого изображения в формате png. :)
|
|
|
andreykashops_hb |
18.7.2013, 14:34;
Ответить: andreykashops_hb
Сообщение
#4
|
|
Владимир, но у меня такое не получится. В таких фигурах доли уже сильно заметны, но пока проблему не решил...
|
|
|
melrok |
18.7.2013, 15:20;
Ответить: melrok
Сообщение
#5
|
|
Может Вам поможет решить вашу проблему пример логотипа на СSS3
Html структура нашего логотипа: <div class="android"> <div class="head"> <div class="l_ant"></div> <div class="r_ant"></div> <div class="l_eye"></div> <div class="r_eye"></div> </div> <div class="body"> <div class="l_arm"></div> <div class="r_arm"></div> <div class="l_leg"></div> <div class="r_leg"></div> </div> </div> Css: div {margin: o; padding: 0;}
div div {background: #A4CA39; position: relative;} .android{ height: 404px; width: 334px; margin: 100px auto; } .head{ width: 220px; height: 100px; top: 32px; border-radius: 110px 110px 0 0; -moz-border-radius: 110px 110px 0 0; -webkit-border-radius: 110px 110px 0 0; -webkit-transition: all 0.1s ease-in; } .l_eye, .r_eye { background: #fff; width: 20px; height: 20px; position: absolute; top: 42px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } .l_eye {left: 50px;} .r_eye {right: 50px;} .l_ant, .r_ant{ width: 6px; height: 50px; position: absolute; top: -34px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .l_ant { left: 50px; transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); } .r_ant { right: 50px; transform: rotate(30deg); -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); } .body{ width: 220px; height: 184px; top: 40px; border-radius: 0 0 25px 25px; -webkit-border-radius: 0 0 25px 25px; -moz-border-radius: 0 0 25px 25px; } .l_arm, .r_arm, .l_leg, .r_leg { width: 50px; position: absolute; -webkit-transition: all 0.1s ease-in; } .l_arm, .r_arm { height: 150px; border-radius: 25px; -moz-border-radius: 25px; -webkit-border-radius: 25px; } .l_leg, .r_leg { height: 80px; top: 182px; border-radius: 0 0 25px 25px; -moz-border-radius: 0 0 25px 25px; -webkit-border-radius: 0 0 25px 25px; } .l_arm {left: -58px;} .r_arm {right: -58px;} .l_leg {left: 45px;} .r_leg {right: 45px;} .head:hover { -webkit-transform: rotate(-5deg) translate(-4px, -8px); -transform: rotate(-5deg) translate(-4px, -8px); -moz-transform: rotate(-5deg) translate(-4px, -8px); } .l_arm:hover{ -webkit-transform: rotate(15deg) translate(-14px, 0); -transform: rotate(15deg) translate(-14px, 0); -moz-transform: rotate(15deg) translate(-14px, 0); } .r_arm:hover{ -webkit-transform: rotate(-30deg) translate(30px, 0); -transform: rotate(-30deg) translate(30px, 0); -moz-transform: rotate(-30deg) translate(30px, 0); } |
|
|
andreykashops_hb |
18.7.2013, 20:36;
Ответить: andreykashops_hb
Сообщение
#6
|
|
Pixsel, а чем она поможет? Я тоже могу подкинуть тебе сложные фигурки на CSS3 :P
PS Неужели сам делал? :goodpost: |
|
|
shaddad_mw
|
Сообщение
#7
|
|
(Pixsel) Может Вам поможет решить вашу проблему пример логотипа на СSS3 Вряд ли мне это поможет :) Кстати, наткнулся на такой вариант, что DOCTYPE может на это повлиять. Действительно ли так? У меня он под стандарт HTML5 подстроен. Может быть, это является проблемой для не совсем нового браузера FF? Хотя, я убежден, что это хромо-подобные себя ведут неграмотно. Та же новая Opera на хроме и Яндекс.Браузер на хроме показывают одно изображение, а IE10 и FF показывают обратное. Вообще, грешу на рукожопных ребят из Google, нежили на FF. |
|
|
andreykashops_hb |
19.7.2013, 9:21;
Ответить: andreykashops_hb
Сообщение
#8
|
|
Владимир, следующая версия FF будет на том-же движке, что и Я.Б, Хром, М.Б, Опера - так-что под них лучше подтачиваться
|
|
|
shaddad_mw
|
Сообщение
#9
|
|
Да? Хром поработил и FF? Остались Сафари и IE.
Сбывается мечта разработчиков. Но, тем не менее, пока это только начало и проблемы нужно решать на начальном уровне. А то так скоро хром за нас верстать сайты начнет :) |
|
|
andreykashops_hb |
20.7.2013, 15:43;
Ответить: andreykashops_hb
Сообщение
#10
|
|
|
Владимир, но ведь хром - это браузер на движке Blink, то-есть он никого не поработил.
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Создание html-верстки качественно и недорого | 0 | Ivan0802 | 1677 | 12.8.2017, 13:44 автор: -Иван8748975- |
|
Нужно редактирование шаблона WP, исправление верстки и микроразметки бюджет 10 долларов |
3 | devvver | 2083 | 1.3.2017, 16:54 автор: ZaDrotom |
|
Проблема с отображением верстки в Safari | 0 | Razorio | 2989 | 9.11.2015, 19:38 автор: -Razorio- |
|
Непонятный сдвиг области на устройствах Android | 0 | bizlis | 5155 | 24.9.2015, 15:12 автор: -bizlis- |
|
Сдвиг меню | 0 | frams | 5429 | 29.10.2014, 0:10 автор: -frams- |
Текстовая версия | Сейчас: 26.4.2024, 8:03 |