К Амстердаму можно относиться по-разному. Кто-то его любит, кто-то нет. Попробую высказать своё мнение по этому поводу.

Начну с того, что город совершенно небольшой. Здесь официально проживает порядка 830 тысяч человек. Если сравнивать его территорию с Минском, то кажется, что весь Амстердам — это спальный район белорусской столицы. Добраться до центра из любого уголка можно за 15-20 минут.

Жилье

Амстердам очень популярное место для переезда не только среди иностранцев, но и внутри страны. По этой причине сюда постоянно прибывают все новые и новые жильцы, что вызывает некоторую суматоху на рынке аренды жилья.

Этот вопрос – единственный, который не сомнении меня волнует. Я уже три недели в Нидерландах, но особо не продвинулся в поисках постоянного места жизни.

Здесь есть два варианты аренды: у частного лица и у компании застройщика. У обоих есть как плюсы так и минусы.

Мой первый рабочий день должен был быть 1-го апреля. Естественно мне необходимы были несколько дней для адаптации в новой обстановке. По сей причине билет в Амстердам я купил на утро 30 марта. Имея последний день марта в наличии, я договорился о встрече в Экспатцентре и в банке. Экспатцентр занимается выдачей ID (паспорт местный) и регистрации в органах муниципальной власти.

Конец 2014 года стал очень важным временем в экономической жизни России. Разного рода санкции и дешевеющая нефть поставили российский рубль на колени. Следом за ним в пучину грянул и рубль белорусский.

Меня это вообще никак не беспокоило, пока в один прекрасный момент руководство страны не ввело 30% налог на покупку валюты. Если кто не знает, у нас, несмотря на зарплату привязанную к доллару (как было у меня), получать ее я можно только в белорусских рублях. Я как порядочный гражданин своей страны все деньги хранил в долларах. Тут-то я прикинул, что на свою зарплату я теперь могу купить на 30 процентов меньше валюты.

Естественно я незамедлительно отреагировал на это психологически. В это же время (в 20-х числах декабря) я получил письмо из Лондона с вакансией в Амстердаме. Мою неустойчивое психологическое состояние не позволило мне трезво оценить это предложение, и я согласился попробовать.

Сделать чекбоксы input[type="checkbox"] и радиокнопки input[type="radio"] красивыми – задача не сложная. Однако, чаще всего, за этим следует добавление новых элементов, а следовательно и усложнение DOM-структуры документа.

Для современных мобильных браузеров, а также декстопных браузеров на основе WebKit и Blink (Chrome, Opera, Vivaldi и т.д.), для некоторых типов инпутов можо создавать псевдо-элементы after и before.

Кто видел Material Design от Google, тот знает, что там есть довольно забавное поведение placeholder-а для поля ввода. Я решил попробовать сделать такое на CSS, но столкнулся с некоторыми проблемами (легко решаются с JavaScript).

Давайте посмотрим, что у меня получилось – ДЕМО.

Отличная статья Ильи Пухальского:

Если вы ещё не знакомы с техникой отзывчивых иконок Джо Харрисона, то, скорее всего, будете впечатлены так же сильно, как и я, когда впервые открыл её для себя. В этой статье я бы хотел исследовать, что мы можем делать с SVG, кроме традиционной практики замены PNG. В частности, мы можем рассматривать SVG как независимый модуль, который включает в себя CSS для кастомизации вариантов отображения; также как и правила для отзывчивого поведения, SVG может содержать в себе JavaScript для логики взаимодействий. Теперь давайте рассмотрим эту технику детальнее.

Продолжу серию статей о том, что принято делать на JavaScript, но можно сделать на чистом CSS с использованием чекбоксов. Расскажу как сделать всплывающее окно popup.

ДЕМО.

Немного комментариев к коду.

HTML:

<div class="popup-wrapper">
  <input type="checkbox" class="popup-checkbox" id="popupCheckboxOne">
  <div class="popup">
    <div class="popup-content">
      <label for="popupCheckboxOne" class="popup-closer">&#215;</label>
      Popup text
    </div>
  </div>
</div>

<label for="popupCheckboxOne" class="popup-shower">Show Popup</label>

Все просто, на странице есть блок popup-wrapper, в котором лежит чекбокс popup-checkbox, рядом с ним всплывающее окно, а в конце кнопка-ссылка для вызова это окна. Сделана она на основе label.

CSS для всплывающего окна и кнопок открытия и закрытия «попапа»:

.popup-checkbox, .popup {
  display: none;
}

.popup {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.popup:before {
  display: block;
  content: ' ';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: .5;
}

.popup-content {
  width: 200px;
  height: 200px;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 20px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.popup-shower {
  color: #00f;
  cursor: pointer;
  text-decoration: underline;
}

.popup-shower:hover {
  color: #00a;
  text-decoration: underline;
}

.popup-closer {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #999;
  font-size: 20px;
  border: 1px solid #999;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
}

.popup-closer:hover {
  background-color: #eee;
}

И чекбокс и всплывающее окно спрятаны (чекбокс никогда и не появится).

Теперь CSS-стиль, который непосредственно влияет на отображение всплывающего окна:

.popup-checkbox:checked + .popup {
  opacity: 1;
  display: block;
}

Здесь все банально, если чекбокс выбран - показать «попап».

Люди уже давно летают в космос, но до сих пор не умеют нормально выравнивать текст по вертикали в CSS.

Казалось бы, во времена таблиц и ячеек это было легко, присваиваешь атрибуту valign значение middle и в ячейке текст выровнен. Затем пришли эти, так любимые всеми div-ы и пришлось начать использовать костыли. Но время, вроде как, не стоит на месте и скоро всех нас ждет радость и облегчение – мы начнем использовать Flexbox.

Как же выравнять блоки по вертикали? Все просто:

HTML:

<div class="flexbox-wrapper">
    <div>Lorem ipsum dolor sit...</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ad rem redeamus; Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Non quam nostram quidem, inquit Pomponius iocans; Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros.</div>
</div>

CSS:

.flexbox-wrapper {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flexbox-wrapper > div {
  width: 50%;
}

Ну и ДЕМО для порядка.

Всплывающие при наведении подсказки перестают быть популярными. Причиной этому можно назвать развитие мобильного интернета, а на мобильных устройствах, как известно, не такого понятия как наведение, там есть либо «нажать», либо «не нажать». Однако существуют такие ситуации, в которых без всплывающих подсказок не обойтись.

Многие для такого рода функцилнала используют различные JavaScript библиотеки. Но зачем? Достаточно только CSS с псевдо-элементами и использования значения аттрибутов в них.

Сразу скажу, что поддержка у всех этих фич есть, начиная с Internet Explorer 8.

Теперь код.

<abbr 
    data-title="Белорусская Федерация Компьютерного Спорта" 
    class="popover">
        БФКС
</abbr>

В данном примере я использовал тэг abbr, но использовать можно абсолютно любой, какой вам нравится.

В аттрибуте data-title хранится текст всплывающей подсказки, а класс popover необходим для написания стилей.

abbr {
  font: 16px 'Trebuchet MS';
  border-bottom: 1px dashed #666;
}
.popover {
  position: relative;
}
.popover:after {
  display: inline-block;
  font-size: 8px;
  content: '?';
  vertical-align: top;
  margin-left: 10px;
}
.popover:before {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #000;
  color: #fff;
  content: attr(data-title);
  padding: 5px;
  border-radius: 4px;
}
.popover:hover:before{
  display: block;
}

Здесь внимания заслуживает только вот этот псевдо-элемент .popover:before, а конкретнее строка content: attr(data-title). В не мы указываем, что хотим, чтобы содержимым content нашего :before было значение аттрибута data-title – attr(data-title);