background preloader

CSS

Facebook Twitter

Вставка спецсимволов в генерируемый контент. Автор: Александр Головко Дата публикации: 18.11.2010 Используя псевдоэлементы :after и :before можно вставлять автоматически генерируемый контент до и после элемента HTML.

Вставка спецсимволов в генерируемый контент

Например, before часто используют для генерации маркера списка. Если ты решил применить данную технику, нужно помнить о ее подводных камнях: IE6-7 не понимают after и before, и их придется эмулировать с помощью expression; спецсимволы в content нельзя вставлять в прямом виде. Если первому «камешку» посвящена отдельная статья, то на втором хочу остановиться немного подробнее. Предположим, нужно вставить маркер «короткое тире» перед каждым элементом списка.

Css3 effects

Практическое применение CSS свойства pointer-events » POSITIVECRASH.COM. Объектно-ориентированный дизайн… в CSS. Предупрежу заранее, что я совершенно не считаю себя экспертом HTML/CSS/JS.

Объектно-ориентированный дизайн… в CSS

Но, как архитектору, мне всегда была интересна организация и систематизация кода в самых разных его проявлениях, в том числе и представленных в виде CSS. Особенно сильно этот интерес был подогрет БЭМом, при первом знакомстве с которым подсознание отреагировало когнитивным дискомфортом. А поскольку БЭМ-стиль в проектах у меня стал появляться все чаще, я почувствовал острую необходимость осмыслить, наконец, свое отношение к организации стилей. Несколько полезных CSS трюков. Во время работы над последним проектом накопилось несколько интересных CSS-трюков, о которых хочу рассказать.

Несколько полезных CSS трюков

Хотя, возможно, это уже придумано до нас и все об этом уже знают.

Хаки

Методология БЭМ. Обычно при вёрстке и программировании сайта разработчики опираются на допущение, что дизайн и технические требования к странице не изменятся в процессе разработки.

Методология БЭМ

Дизайнер, верстальщик и программист каждый работает в своей области, часто не пересекаясь друг с другом: Дизайнер создаёт дизайн в виде набора макетовИз этих макетов делается статическая HTML/CSS вёрсткаОна передаётся программисту для создания шаблонов на каком-то серверном языке и оживлении сайта с помощью JavaScript Такой подход хорошо работает только в том случае, если дизайн сайта остаётся неизменным всё время его жизни и изменения только добавляют контент. Но обычно так не происходит, сайт начинает жить своей жизнью и развиваться. Дизайн страниц постепенно меняется, добавляются новые страницы или новые блоки на них. Flexbox. Спецификация была изменена поэтому статья устарела. Cross-Browser Inline-Block. Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little.

Cross-Browser Inline-Block

Too many times have I received PSD files like this: and begin to cry. Normally, this type of layout would be a cakewalk. Fixed width, fixed height, float:left and you’re done. Buuuuut, the design needs to work with variable amounts of content, which means if one of these blocks has more content than the others, it will break the layout: Because the first gallery item is taller than the rest, the 5th item is floated left against it instead of below it. Creative CSS Loading Animations. Tools to Make CSS3. CSS or cascading style sheet is basically a style sheet language that is used to describe the presentation semantics or the looks and formatting of a document.

Tools to Make CSS3

This document is written in a mark-up language. One of its basic uses is to style the web pages that are either written in HTML or XHTML but this language can also be applied to any other kind of document. Css3 generator. CSS3 Generator. Layer Styles. CSS3 Gradient Generator. CSS3 Please! Button Maker.

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

Улучшаем юзабилити за 5 минут

Не все они кросс-браузерны, но всё равно они «глазурь на тортике»: читатель и не заметит, что их нет. 1. Отображайте нажатия кнопок и кнопкоподобных ссылок Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них. 2. 3. 4.

-prefix-free: Всякому такому автору сайта, который снабжал своё детище стилями CSS3, уж конечно доводилось сталкиваться с необходимостью многократно повторять одно и то же свойство CSS3 и давать ему одно и то же значение, но указывая перед именем свойства различные префиксы разработчиков браузеров (vendor prefixes).

-prefix-free:

Эти префиксы необходимы для того, чтобы во браузерах работали те свойства CSS3, которые ещё не до конца стандартизированы: считается, что отдельное задание свойства для каждого из нынешних браузеров поможет в дальнейшем обойти возможное различие между нынешней реализацией свойства в каждом конкретном браузере и окончательными требованиями страндарта. Во браузере Mozilla Firefox для этой цели употребляется в Google Chrome и в Apple Safari (и в других браузерах на основе в Опере — в IE — а в Konqueror (и в наиболее ранних версиях Во-первых, это задалбывает. Во-вторых, это неэкономично. Sass. Привет!

Sass

Несколько раз при написании CSS кода я ловил себя на мысли, что было бы круто, если бы в CSS можно было использовать что-то вроде переменных и функций — это бы избавило от необходимости повторять участки кода и сильно ускорило бы работу. Увы, такого в CSS делать нельзя. Недавно Саша спросил меня: «Ты знаком с Sass?». Оказалось, что это специальный язык написания стилей, но более удобный и предоставляющий массу новых возможностей, которых нет в привычном CSS. Что такое Sass Авторы называют его мета-языком описания стилей. CSS3 Cheat Sheet (PDF) - Smashing Coding. Advertisement Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4.

CSS3 Cheat Sheet (PDF) - Smashing Coding

Как избежать ошибок в CSS3. Новые свойства CSS3 не только дают нам дополнительные возможности, но приводят к некоторым трудностям. Эта статья поможет узнать Вам, правильно ли Вы используете новые функции и избежать распространенных ошибок. В общем, некоторые моменты пугают. Сегодня мы рассмотрим ошибки, которые можно совершить при написании CSS3-кода и узнаем, как их избежать. CSS справочник. Раскрывающийся список. Улучшение CSS кода. Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки.

Мы обратили свой взгляд на наиболее интересные и полезные техники CSS кодинга и перечислили их в этой статье. Также мы включили некоторые базовые техники, используемые многими в каждом проекте, но которые трудно найти, когда они нужны. Это обзор 70 техник предложенных экспертами CSS, вы должны быть готовы пройти по списку ссылок и похожих публикаций в конце статьи. Мы собираемся опубликовать pdf-версию этой статьи, так что подпишитесь на наш RSS канал (Smash Magazine RSS)1, чтобы следить за обновлениями. Мы хотим сказать спасибо всем разработчикам, которые делятся своими идеями, техниками, методами, знаниями и опытом с их читателями. Выпадающие меню на HTML и CSS. Htmlbook.ru.