Французкий артист, композитор и режиссер Лоренцо Папас 10 дней был в Минске и затем показал его таким, каким смог увидеть через объектив фотокамеры.
Обработка фотографий, как будто, возвращает нас во времена Советского Союза.
Под катом много-много фотографий!
Появился трейлер второй части фильма про живого плюшевого медведя Тэда. Первая часть была очень смешной, вторая, надеюсь, будет не хуже.
Отличная статья Ильи Пухальского:
Если вы ещё не знакомы с техникой отзывчивых иконок Джо Харрисона, то, скорее всего, будете впечатлены так же сильно, как и я, когда впервые открыл её для себя. В этой статье я бы хотел исследовать, что мы можем делать с 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">×</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%;
}
Ну и ДЕМО для порядка.