Архив Тэгов: CSS

Дизайн Интернет Программирование

Collaboration online. Совместное рисование интерфейсов. Free

Совместная разработка интерфейсов в наши дни очень проработана и доступна онлайн. Приведу основные два сервиса, у которых есть бесплатные тарифы (с некоторыми ограничениями): читать далее »

Интернет Программирование

DataTable — сравнение на Angular 2, React и JQuery

Решил сравнить трендовые JS фреймворки Angular и React со старым добрым JQuery подходом. В Интернете много статей, где сравнивают их абсолютно предвзято, на изначально неверных примерах. Сравнивают как апельсины с картошкой:)

Я вот лично всегда беру для сравнения какой-то одинаковый элемент, притом очень сложный и показательный для крупных приложений. Таким компонентом является сложная таблица с фильтрами и сортировками (DataGrid или DataTable), и как пик эволюции — табличный ввод (TabularInput или EditableGrid). Притом ввод не просто текста (input) или из статичных выпадающих списков (select), а из динамического выпадающего списка с AJAX подкачкой значений (по типу библиотеки JQuery Select2). Чтобы можно было организовать гибкий табличный CRUD интерфейс.

И так, какие самые продвинутые компоненты я нашел (Open Source), ссылки на Demo, где можно попробовать: читать далее »

Дизайн Интернет Программирование

Bootstrap layout prototyping — адаптивный дизайн с нуля

Бесплатные инструменты прототипирования разметки и дизайна на Bootstrap:

  • Layoutit.com — быстрое прототипирование онлайн (только расположение элементов разметки на странице, без корректировки меню и т.д.)
  • Pingendo.com Desktop приложение с более детальной прорисовкой. Есть версия для Bootstrap 4.

Суть обоих методов — быстро создать прототип разметки в визуальном режиме, согласовать с собой и заказчиком, скачать готовые HTML5 + CSS3 файлы и уже далее встраивать туда логику. Их можно назвать «генераторами» Bootstrap разметки, которая является адаптивной под разные экраны — от сматфона до ТВ.

 

Дизайн Интернет

Parallax scrolling, Flat design, Wordperss

Не заголовок, а какой-то набор непонятных слов:) Поясню.

Parallax scrolling — это модная тенденция дизайна сайтов, когда весь сайт — одна длинная страница, при прокручивании которой секции меняются с красивыми эффектами. В России это часто соотносят с Лэндингами (Landing page). Но паралакс в данном случае — это просто дизайн-решение.

Flat design — это новомодный плоский дизайн, когда все иконки и графические элементы — плоские. Сейчас это модно во всех интерфейсах, объем и реализм в сайтостроении — прошедший тренд.

WordPress — это движок блога или сайта, на котором можно всё это воплотить.

Parallax + Flat design — это вообще самый пик моды. Сейчас все кому не лень переводят свои сайты на эту парадигму. В качестве примера, вот вам потрясающий сайт на паралаксе, рассказывающий о FLAT дизайне: flatvsrealism.com

flatvsrealism.com

Позволю себе шуточку… Лет 10 назад я как раз и делал одностраничный сайты в Flat design стиле! До того как это стало мэйнстримом. Но тогда я делал это потому что еще только осваивал динамику PHP и красоту Photoshop и потому что не было даже близко CSS 3 с его border-radius!!!

Мы это правда раньше называли аскетизмом:)

Кому интересно погрузиться в красивейший мир художественного паралакса, вот вам ссылки читать далее »

Программирование

Простое и краткое объяснение логики редиректов .htaccess правил

Пожалуй самое простое и понятное изложение логики написания правил редиректов (Rewrite Rule) для .htaccess — для сервера Apache — в этой статье. Буквально на одной странице всё четко изложено (так что оставлю здесь для себя — в продолжении статьи).

А та нестандартная задача, которую я хотел решить для себя — это редирект favicon и других иконок в разные папки, в зависимости от разных доменов или поддоменов (alias-ов). Вот получившееся решение:

RewriteCond %{HTTP_HOST} ^(.*)$ [NC]
RewriteRule ^(favicon\.ico|apple-touch-icon\.png|apple-touch-icon-precomposed\.png)$ favicons/%1/$1 [L]

Соответственно, иконки должны храниться в папках favicons/example.com/, для другого поддомена или алиаса — в favicons/subdomain.example.com/ и так далее. И при заходе на разные псевдонимы сайта быдут выдаваться разные иконки. Очень удобно для мультисайтов на одном исходном php коде.

Ну а вот теория с указанного выше сайта: читать далее »

Программирование

WordPress: Как правильно создать новую тему на основе существующей

Отличная статья о том, как правильно создавать дочерние темы в WordPress.

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

Точнее, почти безболезненно. Так как, если вы перезапишите какой-то файл, то в новой версии он обновится только в родительской теме, а в вашей останется старый код. Но так или иначе это максимально правильный метод расширения тем.

Дизайн Интернет

WordPress Twenty Fourteen, новая элегантная журнальная тема

Определенно стоит попробовать эту самую передовую тему от разработчиков WordPress, которая опережает время даже по своему релизу. На дворе еще 2013-й, а команда уже выпускает тему 2014-го года.

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

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

Дизайн Интернет

Анимация на чистом CSS 3: танцующий Бендер и анимированные 3D модели

Одна из фитчей CSS 3 — это возможность анимирования. Пусть реализация и весьма сложная, но если есть возможность, то всегда появятся и умельцы, которые ей воспользуются и сделают очередной шедевр! Вуаля, вот он:

Танцующий Бендер из Футутрамы на чистом CSS3

Бендер танует, и это сделано на читом CSS 3, без каких либо JavaScript и DHTML

Бендер танует, и это сделано на читом CSS 3, без каких либо JavaScript и DHTML

Хотите больше — посмотрите целую коллекцию 3D анимаций, постоеных только на CSS 3 по тем же принципам.

UPD: Также в сети появились отрисованные на чистом CSS персонажи мультсериала Симпсоны. Впечатляет целеустремленность автора.

Как это делается? читать далее »

Дизайн Жизнь

Эксперимент с дизайном сайта «Позитив — негатив»

Вчера у меня родилась небольшая мысль по поводу дизайна AMBIVALENT — сделать разбивку постов на «Позитив» и «Негатив». Позитивные — черным по белому фону, а в негативных — черный фон и белый шрифт. В общем, посты будут чередоваться и в итоге получится что-то вроде пешеходного перехода:)

По-моему оригинально, и будет гармонировать с доменом и новым многозначительным слоганом «Если не белый, значит черный…«. Появится хоть какая-то изюминка. А то сейчас вообще не понятно, о чем и для чего этот поток мыслей:)

Новая концепция пока в стадии разработки… Картинка в тему:

Суровая критика дизайна сайта от Дилберта

Суровая критика дизайна сайта от Дилберта

Отвлекусь, комиксы весьма даже ничего. Есть занимательный сайт с переводами этого и других комиксов. Занимательнее всего там, что перевод не встроен в картинку, а наложен средствами CSS. Фетишизм конечно, но имеет место быть.

До каких же высот будет эволюционирует наш дизайн — покажет время…

А общая направленность данного поста — отвратительный дизайн, поэтому отнесу ка я его к «Негативу»:)

Дизайн Интернет Программирование

Тестировать и делиться CSS и JS скриптами — легко онлайн

JSfiddle.net и LiveWeave.com — два очень простых и удобных сервиса тестирования HTML 5, CSS 3 и JS скриптов. На экране попросту 3 окна для ввода каждого из скриптов, и четвертое окно с визуальным результатом. Нажимаем «Run» и проверяем свои творения.

Также, очень легко делиться вашими набросками через короткие ссылки. Вот мой маленький примерчик: http://jsfiddle.net/wTLXb/ — как в CSS делать скошенные углы блоков.

А вот более серьезный пример — анимированный танцующий Бендер на чистом CSS 3 — просто фантастика!