Твит

Совсем недавно у меня наконец-то сломался мой неубиваемый мобильник и я разжился новым. Теперь вот могу, не отрывая пятую точку от дивана, бродить по сайтам, что вечерами бывает очень даже полезно. Также я наконец-то увидел вживую, что такое адаптивная верстка. Конечно же я, как веб-разработчик, никак не мог оставаться в стороне и решил изучить эту тему более детально.

В теории-то я знал, что существует такая фича как Media Queries, которая была добавлена в CSS3. И теперь у меня появилась возможность все это видеть прямо на экране смартфона, а не меняя размеры окна браузера. Почувствовав приятное покалывание в кончиках пальцев (явный для меня знак страстно закодить что-то новенькое), я, конечно же, решил разобраться с Media Queries на практике.

Твит

Совсем недавно у меня наконец-то сломался мой неубиваемый мобильник и я разжился новым. Теперь вот могу, не отрывая пятую точку от дивана, бродить по сайтам, что вечерами бывает очень даже полезно. Также я наконец-то увидел вживую, что такое адаптивная верстка. Конечно же я, как веб-разработчик, никак не мог оставаться в стороне и решил изучить эту тему более детально.

В теории-то я знал, что существует такая фича как Media Queries, которая была добавлена в CSS3. И теперь у меня появилась возможность все это видеть прямо на экране смартфона, а не меняя размеры окна браузера. Почувствовав приятное покалывание в кончиках пальцев (явный для меня знак страстно закодить что-то новенькое), я, конечно же, решил разобраться с Media Queries на практике.

Твит

Абсолютное позиционирование подразумевает под собой расположение элемента в конкретном месте относительно окна браузера. Т.е., если задать координаты left: 10px и top: 10px, то элемент будет находиться в 10px левее и в 10px от вершины окна браузера. Но не всегда этот тип позиционирования ведет себя таким образом. В некоторых случаях не совсем понятно, почему какой-нибудь блок размещается не там где хотелось бы. Почему?

Твит

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

Твит

Всю магию drop-down меню можно описать при помощи трёх строк.
1. Скрываем вложенные пункты используя свойство display:none
2. Показываем скрытые пункты при наведения на родителя использую псевдоклас :hover и знакомое уже свойство Display:block.
3. Распологаем открывшиеся вложенные пункты в нужном месте используя позиционирование.
Дальше идут мелкие доработки, которые зависят от вида меню. Самое простое на мой взгляд это вертиальное меню. Распологается в левом или правом сайдбаре. Имеет чётко определённую ширину, что облегчает нам позиционирование.
Горизонтальное меню нужно прежде всего сделать горизонтальным float:left. Дальнейше действия зависят от количества уровней вложенности.

Твит

Приветствую всех свои посетителей и читателей, на своем seo блоге. Недавно, в свое отчете за март, я сказал что хочу запустить серию уроков, по создаю блога с нуля. Возможно Вы сейчас подумали что уроки будут про wordpress, но нет. Движок блога, мы с Вами создадим с нуля, с админ панелью, и прочими разными полезными функциями. И первый урок из серию, будет посвящен созданию шаблона для блога. Шаблон сделан только на HTML и CSS3, из графики только фон, иконка автора, иконка комментариев. Думаю хватит писать лишних строк, и начнем создание шаблона для блога.

Твит

Многие из нас бывали в такой ситуации, когда приходилось создавать отличный адаптивный сайт для клиента, и затем убивать коробку фэйсбука для маленьких устройств, чтобы не мешал. Согласитесь, что это отстойно. В одной из прошлых статей я писал о способе адаптации Instagram под мобильные устройства. Настало время, познакомить вас с способом адаптации facebook likebox iframe при помощи jQuery.
В этой статье, я решил продемонстрировать способ, которым пользуюсь сам, и довольно успешно!

Твит

На некоторых шаблонах wordpress криво отображается форма подписки smartresponder. Точнее, странно выглядит кнопка.
Из-за CSS стилей шаблона код кнопки может срабатывать не правильно.

Если на вашем блоге такая же проблема, то советую прочитать статью. Исправить не сложно. Необходимо лишь в коде формы дописать одно свойство стиля.

Криво отображается форма подписки smartresponder? Исправляем.

Твит

цветовая реальность - faq по cssСамое интересное, что можно проделывать с помощью CSS – это определять цвет для фона и элементов веб-страницы. Иногда эта работа настолько захватывает, что позволяет включать мозги и заниматься творческой работой в улучшении дизайна своего сайта.

Давайте перейдем к изучению основных свойств, CSS с помощью которых можно реально работать с цветом.

И первое такое свойство – это color, с помощью которого устанавливается цвет текста.

Допустим вам необходимо установить цвет для тега h2 чтобы он был отличен от цвета всех заголовков и текста на всех страницах сайта.

Твит

В чем преимущества закругления картинок через использование CSS? Внеся один раз несколько строчек кода в шаблон, можно забыть об закруглении картинок - просто теперь все изображения на вашем сайте/блоге будут отображаться с закругленными краями во всех современных браузерах. И не нужно тратить время на использование фотошопа.

Зачем вообще закруглять края изображений? В этом случае каждый решает сам, но обычно для улучшения внешнего вида. Закругленные картинки на некоторых сайтах смотрятся более привлекательно, хотя это зависит от шаблона.

Твит

Данная статья написана для людей, решивших создать сайт на высоком профессиональном уровне. Даже если сайт создан на одном из продвинутых движков, знания по HTML и CSS будут полезны и их можно будет применить для доработки дизайна сайта. Бесплатный курс по CSS один из лучших в Интернете. Изучив его, без проблем, легко и просто можно будет создать сайт любой сложности.
Курс состоит из 45 уроков общей продолжительностью 6,5 часов. В нём отображены все детали строительства сайта от штифта до вставки и размещения картинок.
Если какой-то браузер не корректно отображает Ваш сайт, Вы можете исправить это.
Данный курс очень лёгок в работе