Войти Регистрация

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


Каскадные таблицы стилей (англ. Cascading Style Sheets или сокращенно CSS) — специальный язык, который используется для отображения страниц, написанных языками разметки данных. Наиболее часто CSS используют для визуальной презентации страниц, написанных HTML и XHTML, но формат CSS может использоваться к другим видам XML-документов.

CSS – язык для создания стилей, его должен знать каждый кто создает веб сайты или только учится это делать. Мы рассмотрим основы грамотного составления css документов а также предложим необходимые материалы для облегчения вашей работы и экономии драгоценного времени.

Читать статью
Bootstrap сетка, примеры реализаций сетки на bootstrap 3
Категория: CSS Тип материала: Статьи Просмотров: 2932

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

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

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

Увеличиваем скорость обработки CSS кода
Категория: CSS Тип материала: Статьи Просмотров: 3483

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

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

Несколько background с помощью CSS, или Multiple Backgrounds
Категория: CSS Тип материала: Статьи Просмотров: 10688

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

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

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

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

17 CSS + HTML альтернатив кроссбраузерной верстки
Категория: CSS Тип материала: Статьи Просмотров: 22247

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

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

CSS border: radius, color, style и другие css свойства border
Категория: CSS Тип материала: Статьи Просмотров: 14456

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

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

Горизонтальное меню на CSS
Категория: CSS Тип материала: Статьи Просмотров: 79883

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

Горизонтальное меню с помощью css спрайтов
Категория: CSS Тип материала: Видео Просмотров: 8040

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

CSS. 100 и 1 совет
Категория: CSS Тип материала: Книги Просмотров: 7246

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

CSS псевдоэлементы :before и :after, изучение и применение
Категория: CSS Тип материала: Статьи Просмотров: 12692
Если вы занимались вопросом реализации вкладок с помощью CSS, вы заметили что псевдоэлементы :before и :after достойны внимания разработчиков. Некоторые, используют before и after для создания красивых ссылок. Также существуют и другие псевдоэлементы, но сегодня мы сфокусируемся на :before и :after. По ходу статьи, под термином псевдоэлементы, будем подразумевать эти двое (before и after).
CSS центрирование DIV блоков: горизонтальное и вертикальное
Категория: CSS Тип материала: Статьи Просмотров: 20319
При создании div блоков, наверняка вы сталкивались с ситуациями, где необходимо центрировать ваш div горизонтально и вертикально, с помощью чистого CSS. Например, при создании всплывающих окон с формами. Существует несколько способов реализовать центрирование, и в этой статье я расскажу о моих любимых и простых способах, с помощью CSS или jQuery.
Растянуть background на весь экран с помощью css, jquery, php
Категория: CSS Тип материала: Статьи Просмотров: 153237
Нашей целью будет реализовать фон (background) сайта, который будет покрывать все рабочее пространство окна браузера. Мы будем делать это с помощью разных техник используя CSS3, чистый CSS, jQuery, PHP. Что мы получим? Полная заливка окна картинкой, без пробелов. Растягивание фоновой картинки, насколько это нужно. Соответствие пропорций картинки. Картинка должна находиться в центре. Это должно быть максимально кроссбраузерно. И без всяких махинаций с flash.
CSS фильтры изображений, webkit фильтры для CSS
Категория: CSS Тип материала: Статьи Просмотров: 9823
CSS фильтры, используются для создания эффектов изображений, в браузере. Webkit фильтры способны принимать одно или несколько изображений, создавать эффект со своими спецификациями и настройками, после чего выводят изображение в браузер. Доступ к этим фильтрам можно осуществлять с помощью одной строки CSS кода. Сейчас мы рассмотрим все известные мне фильтры, и увидим на примере, как они работают.
CSS примеры: 27 наиболее популярных css примеров
Категория: CSS Тип материала: Статьи Просмотров: 85171
В этой статье мы имеем 27 CSS примеров и хаки, которые позволят вам сэкономить время и нервы. Зачем изобретать колесо, когда есть написанные фрагменты CSS кода? Надеюсь вам понравиться эта изумительная коллекция CSS примеров, которая также включает примеры CSS3. Также имеются некоторые классические CSS хаки, без которых не обойтись.
CSS меню: выпадающее горизонтальное меню на css
Категория: CSS Тип материала: Статьи Просмотров: 73318

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

Наложить картинку на картинку с помощью CSS
Категория: CSS Тип материала: Статьи Просмотров: 27478

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