Эффективный способ поиска работы в сети Интернет
Расскажу о паре нестандартных — и поэтому эффективных — способов поиска работы в интернете.
среда, 5 ноября 2014 г.
Расскажу о паре нестандартных — и поэтому эффективных — способов поиска работы в интернете.
суббота, 23 августа 2014 г.
В предыдущей статье мы остановились на том что сделали симпатичный слайдер с прокруткой. В этой статье я покажу доработанный вариант этого слайдера, имеющий большее разнообразие эффектов анимации.
Два рассмотренных ранее слайдера использовали эффект полупрозрачности для перехода от одного изображения к другому. Но что если мы хотим сделать листание изображений с эффектом прокрутки? Старое изображение уезжает за пределы слайдера, а новое выезжает с другой стороны — возможно ли добиться такой анимации? Возможно. Посмотрим, как это сделать.
пятница, 22 августа 2014 г.
В предыдущей статье мы рассмотрели, как сверстать простой слайдер при помощи CSS без использования JS-скриптов. Сейчас разберём еще один вариант оформления слайдера — с кнопками «вперёд» и «назад».
В одной из предыдущих статей мы рассмотрели, как сделать вкладки на CSS при помощи трюка с радио-кнопками. В этой статье мы при помощи аналогичного подхода создадим симпатичный слайдер, не требующий Javascript для работы.
Слайдеры, как правило делаются с использованием Javascript. Обычно для этого задействуют библиотеку JQuery. Хотя CSS и не позволяет создать полнофункциональный слайдер с кучей возможностей, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие продвинутые возможности и не требуются.
Простой слайдер для блога гораздо проще сверстать на чистом HTML и CSS, чем задействовать для этого возможности Javascript. Во-первых, код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript. Во-вторых, та часть пользователей, которая параноидально не доверяет сайтам и заходит на незнакомые сайты только с аддоном NoScript, вырезающим весь JS-код, тоже сможет воспользоваться вашим слайдером.
Поехали!
суббота, 16 августа 2014 г.
В предыдущей статье мы смогли создать красивую и технологичную панель вкладок с использованием :target и даже сделали приятную анимацию переключения вкладок. Однако панель вкладок получилась фиксированного размера. Можно ли её переверстать так, чтобы высота панели менялась в зависимости от содержимого вкладок?
пятница, 15 августа 2014 г.
Ранее мы рассмотрели два способа создания панели вкладок для сайта: первый на основе якорей и свойства overflow, и второй на основе переключателей (радиокнопок).
Существует также третий способ добиться переключения вкладок — при помощи селектора :target и всё тех же якорей
четверг, 14 августа 2014 г.
В первой части мы рассмотрели, как сделать вкладочный интерфейс при помощи свойства overflow и ссылок-якорей. Этот способ совместим со всеми браузерами, включая самые древние.
Сегодня поговорим о том, как вкладки делаются при помощи небольшой магии с переключателями (радио-кнопками). Этот способ является более технологичным и гибким и более соответствует духу CSS.
Чтобы запоминать выбранную пользователем вкладку, нам нужно хранить некоторое состояние, то есть нам нужны переменные. Работать с переменными мы можем из языков программирования, таких как JavaScript. Но поскольку наша задача — сделать вкладки без JavaScript, нужно придумать что-то еще. Как я говорил в предыдущей части, CSS является описательным языком и не имеет переменных. Тем не менее, запомнить «куда нажал пользователь» мы всё же можем, применив одну хитрость. Для этого используем имеющиеся в HTML элементы управления: флажки (англ. checkboxes) и переключатели (англ. radio buttons).
среда, 13 августа 2014 г.
пятница, 1 августа 2014 г.
Классическим средством навигации по сайту является горизонтальное меню в шапке сайта. Посмотрим, как сделать простое горизонтальное меню на HTML и CSS.
четверг, 24 июля 2014 г.
Многие пользователи сайта «В Контакте» замечали, что VK позволяет делать в постах и комментариях произвольные слова ссылкой на личную страницу или на группу, но не все знают, как это делается. Ведь «Вконтакте» не поддерживает в пользовательских постах и комментариях наиболее известные в интернете способы разметки текста: HTML и BB-код. Чтобы оформить ссылку, в VK надо использовать особый способ записи.
понедельник, 7 июля 2014 г.
Иногда возникает потребность сделать на странице импровизированное «окно» небольшого размера, в котором отображается большой объем текста с полосой прокрутки. Рассмотрим, как сделать блок div фиксированного размера с прокруткой по вертикали или горизонтали.
Бывает так, что на сайте желательно запретить выделение некоторых элементов страницы. Это можно сделать при помощи CSS.
вторник, 10 июня 2014 г.
В этой статье я расскажу о том, как задаются цвета в HTML и CSS.
Как вы, вероятно, знаете, цвет каждой точки (пикселя) экрана формируется из трёх субпикселей: красного (R), зелёного (G) и синего (B). Яркость свечения каждого из субпикселей определяет итоговый цвет, который мы увидим на экране. Вот базовые цвета монитора:
Список названий цветов, поддерживаемых всеми браузерами:
воскресенье, 11 мая 2014 г.
среда, 7 мая 2014 г.