CSS: статьи и примеры верстки на css

Bootstrap сетка, примеры реализаций сетки на bootstrap 3

Стремительно развивающиеся технологии заставляют нас идти в ногу со временем. Если раньше дизайн создавался на чистом HTML и CSS коде, то сегодня время библиотек кода.

Многие фронт энд разработчики, которые ценят свое время, давно уже используют шаблонизаторы, сетчастые структуры, SESS, LESS, Bootstrap и другие решения. Это правильно, зачем усложнять себе жизнь, когда есть готовые коллекции и реализации задач.

Сегодня мы рассмотрим, как просто можно создавать блочные сетки на bootstrap 3.0. Хотя с уверенностью могу сказать, через пол года, нужно будет вникать в новую 4 версию бутстрапа.

Увеличиваем скорость обработки CSS кода

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

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

Несколько background с помощью CSS, или Multiple Backgrounds

Сегодня, практически в каждом дизайне сайта присутствует красивая background картинка.

Каждый верстальщик знает, что самый простой способ создания дизайна – лучшее, что может быть. Одним из простых и удобных техник является растягивание background на весь экран, с помощью нескольких строк css кода.

Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняя семантическую верстку.

В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе.

17 CSS + HTML альтернатив кроссбраузерной верстки

Действительно приходиться много труда приложить, чтобы достичь одного вида странички во всех браузерах. Вам не придется изобретать колесо каждый раз, если вы воспользуетесь этой подборкой кроссбраузерного HTML + CSS кода. Надеемся наш труд был не напрасен, а для вас будет полезен.

Цель данной статьи собрать полезные решения на HTML и CSS коде, соответственно кроссбраузерности. То есть, эти примеры кода будут отображаться во всех браузерах одинаково.

CSS border: radius, color, style и другие css свойства border

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Горизонтальное меню на CSS

Сегодня мы будем создавать простое горизонтальное меню с помощью CSS. Для начала мы создадим скелет меню на HTML, и усвоим главные навыки создания горизонтальных меню. После чего мы придадим красивый вид для меню, используя CSS. Как известно, корифеи верстки, предпочитают семантику, от которой мы постараемся не отступать.

Горизонтальное меню с помощью css спрайтов

В данном видео, будет подробно рассказано и показано как с помощью CSS делается горизонтальное меню, используя спрайты. Видео является пошаговой инструкцией создания горизонтального меню на css.

CSS. 100 и 1 совет

Книга «CSS: 100 и 1 совет» будет интересна для веб-дизайнеров и разработчиков, у которых нет времени на штудирование огромного количества теоретических материалов при создании собственного сайта. Это сборник готовых решений наиболее распространенных проблем, которые можно сразу применить на практике; более того, они могут послужить основой для разработки собственных методов.

CSS псевдоэлементы :before и :after, изучение и применение Если вы занимались вопросом реализации вкладок с помощью CSS, вы заметили что псевдоэлементы :before и :after достойны внимания разработчиков. Некоторые, используют before и after для создания красивых ссылок. Также существуют и другие псевдоэлементы, но сегодня мы сфокусируемся на :before и :after. По ходу статьи, под термином псевдоэлементы, будем подразумевать эти двое (before и after).

CSS центрирование DIV блоков: горизонтальное и вертикальное При создании div блоков, наверняка вы сталкивались с ситуациями, где необходимо центрировать ваш div горизонтально и вертикально, с помощью чистого CSS. Например, при создании всплывающих окон с формами. Существует несколько способов реализовать центрирование, и в этой статье я расскажу о моих любимых и простых способах, с помощью CSS или jQuery.

Растянуть background на весь экран с помощью css, jquery, php Нашей целью будет реализовать фон (background) сайта, который будет покрывать все рабочее пространство окна браузера. Мы будем делать это с помощью разных техник используя CSS3, чистый CSS, jQuery, PHP. Что мы получим? Полная заливка окна картинкой, без пробелов. Растягивание фоновой картинки, насколько это нужно. Соответствие пропорций картинки. Картинка должна находиться в центре. Это должно быть максимально кроссбраузерно. И без всяких махинаций с flash.

CSS фильтры изображений, webkit фильтры для CSS CSS фильтры, используются для создания эффектов изображений, в браузере. Webkit фильтры способны принимать одно или несколько изображений, создавать эффект со своими спецификациями и настройками, после чего выводят изображение в браузер. Доступ к этим фильтрам можно осуществлять с помощью одной строки CSS кода. Сейчас мы рассмотрим все известные мне фильтры, и увидим на примере, как они работают.

CSS примеры: 27 наиболее популярных css примеров В этой статье мы имеем 27 CSS примеров и хаки, которые позволят вам сэкономить время и нервы. Зачем изобретать колесо, когда есть написанные фрагменты CSS кода? Надеюсь вам понравиться эта изумительная коллекция CSS примеров, которая также включает примеры CSS3. Также имеются некоторые классические CSS хаки, без которых не обойтись.

CSS меню: выпадающее горизонтальное меню на css

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

Наложить картинку на картинку с помощью CSS

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