FanAizu

Здравствуйте. Хочу сделать анимацию, как мультик, передвигающиеся люди и звери и т.п. Я не дизайнер, да и времени столько нету на рисование покадровых изображений. Может кто-нибудь подскажет сайты, где можно найти таковые? Гугл помог совсем немного. Буду признателен, благодарю.

Посоветуйте, пожалуйста, пару grunt плагинов для следующих задач: 1) Имеется следующая файловая структура: news/ red/ news/news.scss blue/ news/news.scss green/ news/news.scssapp/ app.scss red/ blue/ green/ Нужен плагин, делающий следующее: плагину скармливаем список имеющихся тем. Затем этот плагин для каждой темы из списка запускает следующую операцию: плагин берет файл app.scss, подгружает в него файл news.scss для текующей в цикле темы, затем компилирует результирующий scss файл и кладет получившийся css файл в папку текущей темы из цикла. Таким образом один раз запустив этот плагин мы получим css файлы для всех тем: app/ app.scss red/ app.css blue/ app.css green/ app.css 2) Например, у меня есть стили .news{ font-size:10px; color:red; border:1px red solid;}.news{ color:blue; border-width:20px;}Нужен плагин, делающий следующее: берет этот css файл и объединяет стили из одинаковых селекторов(в данном примере это селектор .news), то есть на выходе мы получаем: .news{ font-size:10px; color:blue; border:20px red solid;} 3) Нужен плагин, делающий следующее: имеется следующая структура: news/ news/ news.scss news.png menu/ menu.scss menu.png в файле news.scss следующие стили: .news{ background: url(news.png);}а в файле menu.scss следующие стили: .menu{ background: url(menu.png);} плагин берет изображения news.png и menu.png и объединяет их в один спрайт, а в файлах news.scss и menu.scss и заменяет фоновое изображение на изображение из спрайта и плюс ещё и добавляет в свойство baclground позицию сдвига в спрайте, то есть получаем вот такие стили для news.scss: .news{ background: url(sprite.png) 100px 20px;} 4) Нужен плагин, делающий следующее: имеет стили: .news{ position:absolute; top:0; left:10px; text-align:left;}плагин берет эти стили и заменяет все зависящие от направления(rtl или ltr) свойства на противоположные, то есть, если это были ltr свойства, то станет rtl, например news получится следующим: .news{ position:absolute; top:0; right:10px; text-align:right;} Заранее благодарю.

1.1) это я понимаю. Получается, что если используется таблица с инфой, то для нее модульная сетка не юзается?

1.1) Ну во-первых, полагаю, чтобы пропорционально модулю сетки были ячейки таблицы. Или на таблицы не распространяется модульный подход? 1.2) А что это даст? Всё равно при маленьком разрешение экрана(на мобильниках) ячейки не выстроятся по две в ряд, а будут все в один ряд.

Решил использовать фреймворк для создания модульной сетки. Выбрал вот этот http://unsemantic.com/ Возникли вопросы, подскажите, пожалуйста, кто знает ответы на них: 1.1) Если используется таблица с инфой, например, в 10 колонок, то нужно ли ячейкам присваивать классы колонок модульной сетки? 1.2) Если ответ на прыдущий вопрос "да", то возникает следующая ситуация: я хочу, чтобы при очень маленьком разрешение(на смартфонах), в ряду была одна колонка, поэтому всем колонкам переопределяю ширину в 100%; при ширине экрана в 640px(планшеты), в ряду было по две колонки, поэтому поэтому всем колонкам переопределяю ширину в 50%; С плавающими блоками проблем нет, а вот если это таблица, то тут будет хрен знает что.

Интересует следующий момент - на сколько быстр этот селектор, скажем, по сравнению с обычным селектором класса?

clavin, в Вашем примере указано, что margin-ы заголовков и абзацев не схлопываются с margin-ами div-ов, в которых они находятся, но это не так они схлопываются.

Почему, если есть такая верстка, то свойство clear не действует на float-элемент, который находится выше в документе?: <div> <div style="float:left;width:50px;"> hello </div> <div style="float:left;width:50px;"> world <div style="clear:both;"> </div> </div> </div>

Это вырезка, чтобы легче тебе было найти. Для более глубокого понимания лучше прочесть и разобрать весь раздел. А вообще уже надо бы HTML5 почитывать там немного терминология меняется, лучше привыкать сразу. Что значит здесь "establish new block formatting contexts for their contents."? Это означает, что эти элементы становятся блочными элементами? Или нет?

Извиняюсь, не контекст исполнения, а контекст форматирования. Вот перевод абзаца из css спецификации: Плавающим (float), абсолютно спозиционированным, отображаемым как табличные ячейки (table-cell) или заголовки таблиц (table-caption), строково-блоковым (inline-block) и элементам со свойством overflow и его значением отличными от visible (не считая случаев, когда значение наследуется областью просмотра) устанавливается новый контекст для форматирования

Когда читал о свойстве float или про overflow:hidden, то увидел термин "контекст исполнения". Писалось, что при использовании этих свойств создается новый контекст исполнения. Вопросы: 1) Что такое контекст исполнения? В инете искал, на нашел! 2) На что влияет контекст исполнения? 3) Какие свойства по стандарту создают новый контекст исполнения?

Например, есть вот таких два свойства: .dog a { color:red; } .cat a { color:blue; } У них специфичность у обоих по 11. Могу я как-нибудь указать браузеру, чтобы побеждало то свойства, к какому классу тег a находится ближе? То есть, чтобы в данном случае ссылка была синей: <div class="dog"> <div class="cat"> <a> hello </a> </div> </div> И второй вопрос, можно ли явно указывать значение специфичности, то есть, например я записал вот так свойство и у него была бы специфичность 111 .dog a 111 { } а если мне нужна специфичность 225, то как это указать? То есть вопрос в том, как явно указать специфичность стилевого правила?

и в код заглянул и сам подергал этот код, но этот код отвечает лишь за карусель, но не за скролл.

Не могли бы Вы дать ссылочку на ресурс, где бы подробно рассказывалось о таблицах? Ширина блока рассчитывается по формуле padding-left + margin-left + width + border-left + border-right + padding-right + margin-right. В блочных элементах так, а вот столкнулся с таблицами и здесь уже по-разному как-то бывает. Можете дать ссылку на ресурс, где бы подробно рассказывалось о таблицах?

Нужен плагин, как вот здесь http://www.sony.ru/section/glavnaya Под надписью "продукты". Плагин состоит из стрелочек влево, вправо, полосы прокрутки. Искал, не нашел, помогите, пожалуйста. Попробовал сохранить страницу и прикрутить к себе, но работает неправильно.

Есть свойства: .one h1{color:red;} .two h1{color:green;} И есть вёрстка: <div class="one"><p class="two"><div><div><h1>Hello!</h1></div></div></div> Т.к. для первого и второго свойства специфичность равна, то цвет Hello! будет зависеть от того, какое свойство находится ниже в документе. Верно? В мозиле, сафари, хроме так и работает, но в IE и Opera работает по-другому, а именно: цвет текста зависит не от того какое свойство определено ниже в документе, а от того, какой из классов(.one или .two) находится ближе к тегу h1. Почему браузеры ведут себя по-разному? Можно ли как-то привести всё к единому стандарту, то есть, чтобы цвет в моём случае зависел от того какие стили определены ниже в документе, либо зависел от того, какой класс ближе к тегу h1? Это как-нибудь регулируется?

Подскажите, пожалуйста: 1. Как разместить два дива, имеющих каждый свою ширину, высоту, свои отступы(margin) на одной строке? А последующие элементы, чтобы располагались на другой строке? Можно конечно установить в дивах свойство display:table-cell и тогда они будут на одной строке, но тогда у них будет одинаковая высота и свойство margin не работает. 2. Нужно внутри дива разместить тег img. У дива должны быть поля(padding), а также, если картинка превышает заданные для неё max-height и max-width, то див должен спрятать выступающие части картинки. Кроме того нужно, чтобы выступающие части картинки прятались равномерно с каждой стороны, то есть, если картинка превышает максимальную ширину на 10 px, то слева она должна спрятаться на 5 px и справа тоже на 5 px. Первая сложность с которой я столкнулся это то, что если у дива задать вот эти свойства padding:10px;overflow:hidden, то если картинка превышает установленный предел ширины, то див её прячет, но!!! padding-righ внутри дива исчезает, его место занимает картинка. Помоги, пожалуйста, заранее благодарю!

Дайте пожалуйста ссылку на статью, где разработчики css рассказывают, как они предлагают использовать css. Интересует не синтаксис, как присваивать свойства различным селекторам, а структура построения таблиц стилей. В общем ссылка на статьи, где сами разработчики рассказывают, как они считают грамотно строить css. Или может то, как вы считаете грамотным. Просьба отвечать опытных верстальщиков. Заранее благодарю.