Статьи о верстке на CSS

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

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

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

Семантическая верстка: понятие и примеры семантического кода

Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.

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

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

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

YouTube API: плеер с помощью YouTube API, jQuery, CSS

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

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

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

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