Рассмотрим один из вариантов создания нескольких страниц или вкладок (в том числе вложенных) на html и css без скриптов, списков и таблиц, на одной html странице. Только дивы, только хардкор. Подходит для небольших портфолио и элементов интерфейса. Не будьте буратинами используя это везде подряд.
Суть:
Рубрика «css» - 110
Вкладки (страницы) на одной странице на html/css с помощью :target
2014-05-21 в 6:03, admin, рубрики: css, html, Веб-разработка-na-odnoi-stranice-na-html-css-s-pomoshyu-target.gif "Вкладки (страницы) на одной странице на html/css с помощью :target")
Префиксы и постфиксы в PHP (и CSS)
2014-05-07 в 13:39, admin, рубрики: css, IT-стандарты, php, yii, БЭМ, префиксы, метки: css, PHP, yii, БЭМ, префиксы .png "Префиксы и постфиксы в PHP (и CSS)")
Ещё давно я взял практику использовать префиксы и постфиксы в PHP и в CSS. Особенно это актуально, когда что-то выходит за рамки локальной видимости и находится в глобальном пространстве, взять те же модели в Yii.
Префиксы и постфиксы несут основную задачу – сделать сущность максимально уникальной, причём настолько, чтобы её можно было без проблем найти любым текстовым редактором. На сегодняшний день IDE поддерживают отличную вещь – «Find Usages» (поиск использований), но это не всегда помогает, и об этом я напишу чуть ниже.
Именование в стиле Венгерской нотации мне не пришлось по душе. Такой подход мне не нравился ещё со времён C++ / Delphi – я считал его избыточном и не всегда понятным. Мне понравилась реализация БЭМ, но в полной мере я её тоже не использую. Я постарался вычленить и объединить наиболее понравившиеся мне методы, о них и расскажу.
Адаптивный CSS своими руками
2014-04-30 в 5:13, admin, рубрики: css, html, адаптивная вёрстка, Веб-разработка 
При разработке одного проекта, передо мной встала задача реализовать адаптивную верстку. HTML-страница должна была по-разному смотреться на экранах различных размеров. При этом, она должна была быть легковесной, поэтому использовать тяжеловесные css-фреймворки не хотелось. Таким образом, родился собственный велосипед, которым хочу поделиться с читателим. Читать полностью »
Джентельменский набор плагинов, панелей и скриптов для Adobe Photoshop, Adobe Illustrator
2014-04-16 в 10:24, admin, рубрики: css, html, illustrator, panel, веб-дизайн, плагины, метки: illustrator, panel, веб-дизайн
Layer Exporter Adobe Illustrator
Панель для Adobe Illustrator, которая дает возможность автоматически экспортировать каждый слой в SVG, PNG или JPG файлы и генерирует HTML и CSS код.
Photoshop Font Detector Adobe Photoshop
Плагин для Photoshop, который поможет распознать шрифты из любого изображение через службу WhatTheFont сайта www.myfonts.com/. Все, что вам нужно сделать, это создать область выделения на изображении, и данная панель сделает все остальное. Вы будете перенаправлены на сайт www.myfonts.com/, чтобы просмотреть результаты поиска.
Читать полностью »
Всплывающие метки в формах на чистом CSS
2014-03-21 в 16:47, admin, рубрики: :valid, css, float label, Веб-разработка, всплывающие метки, интерфейсы, плавающие метки, Формы вводаВозможно, вам уже попадался на глаза этот приём. Это поле ввода, которое выглядит так, как будто в нем есть текстовая подсказка (placeholder), но при начале набора текста она не исчезает, а отодвигается в сторону. Мне нравится эта идея. Брэд Фрост написал очень хорошую статью об этом приёме, подробно рассмотрев все «за» и «против».
Большинство примеров использования этой техники полагаются на JavaScript. В один прекрасный день я зашёл на nest.com, увидел там этот приём и задумался: а нельзя ли реализовать то же самое без JavaScript? И вот что из этого вышло.
Вот так выглядит форма на nest.com:
HTML по стандартам
2014-03-20 в 5:31, admin, рубрики: css, html, javascript, Блог компании i-Free, Веб-разработка, метки: css, html, javascriptПривет !
Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.
В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.
Отзывчивый дизайн. Реакция на уровень освещенности
2014-03-19 в 13:10, admin, рубрики: css, html, javascript, media queries, responsive web design, адаптивная вёрстка, метки: media queries, responsive web design, адаптивная вёрстка 
В последнее время появляется все больше и больше мобильных устройств, которые уже не только определяют освещенность вокруг, но и соответствующим образом меняют отображаемую на экране информацию к более удобному и читаемому виду.
Теперь эта возможность потихоньку перебирается и в движки мобильных браузеров.
В статье будет рассмотрен пример реагирования веб-старницы в браузере на окружающую освещенность.
Читать полностью »
Бесплатный CSS3 генератор EnjoyCSS
2014-03-17 в 16:12, admin, рубрики: css, css3, web-разработка, Блог компании EnjoyCss, метки: css, css3, web-разработкаEnjoyCSS — это бесплатный онлайн CSS генератор, который предназначен для быстрого создания богатых графических стилей и мгновенного получения их кода. Этот инструмент позволяет добавлять к элементам тени, 3D и 2D трансформации, многочисленные сложные переходы, линейные и радиальные градиенты, тени текста, шрифты из Google Fonts, CSS3 код которых вы можете скопировать и вставить в ваш проект.
Кроме того, пользователь может получить как CSS для всех стилей элемента, так и для отдельных его аспектов (например, код только конкретного градиента или тени).
Вы также можете добавлять и изменять стиль для :hover, :active, :focus, :after, :before псевдосостояний.
Как вернуть привычный стиль выдачи Google. Незамысловатая инструкция
2014-03-13 в 10:39, admin, рубрики: css, Google, Google Chrome, stylebot, метки: css, Google Chrome, stylebotОткрыв вчера Гугль, пользователи обнаружили вот такое новшество. В течение дня начали появляться новости, объясняющие смысл данного обновления стиля выдачи, но все это не сглаживало тошнотворный эффект, производимый новой стилистикой. Основной минус этого оформления — безусловно абсолютно невнятное выделение ключевых слов среди заголовков, при таком размере шрифта «bold» мало отличается от «normal».
Недолго думая, принялся искать способ вернуть стилистику выдачи к привычному виду. В результате недолгих поисков нашлось расширение, позволяющее сделать это за 1 минуту.Читать полностью »
Инкапсуляция CSS-стилей — Часть 1. Проблема
2014-03-11 в 14:23, admin, рубрики: css, html, инкапсуляция, метки: инкапсуляция Главным драйвером роста веба на рубеже тысячелетий было потребление контента. Сайты создавались для предоставления своим посетителям какой-либо полезной информации или развлекательного содержимого. Но в последние годы резко выросло значение веб-ресурсов, предоставляющих пользователям сервисы генерации контента (текстовые и графические редакторы, электронные таблицы, мессенджеры и т.п.). Это вызвало трансформацию сайтов в одностраничные приложения и миграцию в веб сложных интерфейсов, которые ранее были прерогативой прикладных программ.
Читать полностью »