Метка «верстка»

в 21:08, , рубрики: css, html, javascript, метки: , , , , , , , , , , ,

Я думаю с вопросом адаптивных изображений все верстальщики часто встречались. Большинство статей, которые я прочитал, мне не подошли. В каждом случае были свои минусы. Приходилось писать дополнительные стили css или загружать разные изображения на определенных разрешениях. Почему-то универсального метода я не нашел. Это было похоже на то, как сделать блоки одинаковой высоты. Вроде бы можно сделать это несколькими способами, но лучший способ — это js.

Да, изображения. С панели администратора постоянно заливались изображения не той ширины или высоты. И в на страницах смотрелось очень криво. А если одно и тоже изображение будет на разных страницах и в разных блоках.

image

В общем я решил эту задачу с помощью доброго старого js.
Читать полностью »

в 21:08, , рубрики: css, html, javascript, метки: , , , , , , , , , , ,

Я думаю с вопросом адаптивных изображений все верстальщики часто встречались. Большинство статей, которые я прочитал, мне не подошли. В каждом случае были свои минусы. Приходилось писать дополнительные стили css или загружать разные изображения на определенных разрешениях. Почему-то универсального метода я не нашел. Это было похоже на то, как сделать блоки одинаковой высоты. Вроде бы можно сделать это несколькими способами, но лучший способ — это js.

Да, изображения. С панели администратора постоянно заливались изображения не той ширины или высоты. И в на страницах смотрелось очень криво. А если одно и тоже изображение будет на разных страницах и в разных блоках.

image

В общем я решил эту задачу с помощью доброго старого js.
Читать полностью »

в 15:55, , рубрики: Песочница, метки: , ,

Мой первый пост.
Центрирование блока относительно другого блока относительно часто-попадающаяся задача, это очередное ее решение. Для меня оно стало самым универсальным и покрывающим все кейсы, с которыми я когда-либо сталкивался.
Читать полностью »

в 16:44, , рубрики: Песочница, метки: , , ,

Любой человек, занимающийся fron-end'ом и даже веб-разработкой в целом знаком с Adobe Brackets или просто слышал о нем.
С каждым обновлением и с каждым удачным расширением этот редактор кода настойчиво переманивает пользователей на свою сторону.

Хочу рассказать вам об одном из таких удачных расширений. Оно называется PSD Lens, он же Extract for Brackets. Расширение сейчас находится на закрытом тестировании, но в один прекрасный день станет общедоступным.
На самом деле, я давно получил к нему доступ и не решался писать на Хабр. И вот, я решился.
Читать полностью »

в 4:28, , рубрики: css, html, wordpress, Веб-разработка, верстка, метки: , , ,

Введение

В предыдущих статьях мы рассмотрели принципы верстки на чистом CSS и с помощью Bootstrap. Сегодняшней статьей мы начинаем рассматривать особенности верстки под популярные CMS. И начнем с WordPress, как самой популярной из них. Будем считать, что WordPress у вас уже установлен и перейдем непосредственно к созданию шаблона, в качестве которого у нас по-прежнему будет выступать Corporate Blue от студии Pcklaboratory. Если вы не знаете как установить WordPress, то инструкцию можно найти здесь. В данном руководстве мы не будем подробно описывать CSS стили и HTML код – это было сделано уже в предыдущих статьях. Вместо этого рассмотрим детально особенности создания темы именно под WordPress.
Читать полностью »

в 8:22, , рубрики: css, html, Блог компании Wargaming.net, верстка, метки: , ,

Подборка полезных CSS рецептов, или чем мы занимаемся на голых пятницах

В нашем отделе веб-разработки есть хорошая традиция. Каждые 2 недели у нас проходят «голые пятницы» — это мини-конференции, на которых мы делимся интересными и полезными знаниями, накопенными в процессе работы. Сегодня таких знаний у нас накопилось довольно много, и мы решили начать постепенно делиться ими с общественностью в лице Хабрасообщества.

Итак, представляем вашему вниманию сборку интересных и (надеемся) малоизвестных HTML и CSS-рецептов. Будем рады, если каждый из вас узнает что-то новое!
Читать полностью »

в 13:09, , рубрики: node.js, web-разработка, верстка, инструменты, метки: , ,

Добрый день!
Решил поделиться опытом перехода с Middleman (Ruby) на Express.js (Node.js) в качестве инструмента front-end разработчика.
Сам я занимаюсь back-end, так что статья может выйти не слишком актуальной, но, надеюсь, полезной хотя бы кому-нибудь.

Итак, задача: сделать приложение на Node.js с поддержкой компиляции Sass(Compass), CoffeeScript и Haml «на лету» при редактировании соответствующих файлов. Для этого будем использовать Express и Grunt для запуска веб-сервера и выполнения задач компиляции соответственно.
Читать полностью »

в 3:09, , рубрики: css, email, html, Веб-разработка, верстка, Мобильный веб, рассылки, яндекс, яндекс.деньги, метки: , , , , , ,

Доброго дня.

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

И так письмо:

Адаптивные письма? Пожалуйста!

Футер нас не особо интересует, ибо там все ок. Читать полностью »

в 23:27, , рубрики: latex, бланки, верстка, метки: , ,

Несколько полезных приемов для любителей LaTeX'а, желающих сверстать бланк какого-нибудь заявления. Будем для примера верстать форму претензии к Почте России (её «официальный» вариант можно, если повезёт, скачать с сайта Почты России). Всю верстку от первой и до последней буквы объяснять не будем, предполагая, что читатель с основами ЛаТеХа знаком. Рассмотрим специфические рецепты верстки «линеек» где нужно вписать пропущенные слова, чекбоксов с метками, подписей мелким шрифтом снизу текста и линий разной толщины и прерывистости.

Разумеется, рецепты не единственно возможные и наверняка чем-нибудь да неправильные. Если знаете, как готовить лучше, милости просим в комментарии.

Читать полностью »

в 18:55, , рубрики: android, верстка, оптимизация кода, Программирование, Разработка под android, ресурсы, рефакторинг, стили, темы, метки: , , , , , ,

Приветствую, уважаемое сообщество.

В предыдущей статье мы, используя только верстку, сделали кнопку “включить/выключить”, и вот что у нас тогда получилось:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="6dp"
    android:background="#dddddd" >

    <ToggleButton
       android:id="@+id/act_main_btn_telephony"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/button_background"
       android:drawableLeft="@drawable/icon_phone"
       android:drawableRight="@drawable/icon_on_off"
       android:gravity="left|center_vertical"
       android:textOn="Телефония"
       android:textOff="Телефония"
       android:textSize="24sp"
       android:textStyle="bold|italic"
       android:textColor="@color/text_color"
       android:onClick="onToggleButtonClick" />

</RelativeLayout>

XML-код получился довольно увесистый. В этой статье я покажу, как сделать его по-настоящему красивым. Мы сократим код вдвое, убрав все, что может затруднить сопровождение нашего приложения или вызвать недовольство тим-лида. В этой статье мы будем использовать строковые ресурсы (strings.xml), ресурсы размерностей (dimens.xml), стили и темы (styles.xml).Читать полностью »

123...7
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js