Свежие публикации

Здесь собраны все публикуемые пикабушниками посты без отбора. Самые интересные попадут в Горячее.

05 Июня 2016

Отпариватель

Отпариватель Супер утюг, Современная машина, Отпариватель, Длиннопост
Отпариватель Супер утюг, Современная машина, Отпариватель, Длиннопост
Отпариватель Супер утюг, Современная машина, Отпариватель, Длиннопост
Отпариватель Супер утюг, Современная машина, Отпариватель, Длиннопост

Компания из Сан-Франциско собирается в 2018 году выпустить аппарат FoldiMate, который облегчит жизнь всех домохозяек мира и займет место в каждой квартире. Это машина отпаривает и складывает белье. Причем делает это за считанные секунды. Коммерческая версия агрегата уже доступна и сейчас фирма работает над бытовой версией. Цена вопроса будет от $700 до $850.

Показать полностью 4

Аршан, Саяны, Бурятия.

Аршан, Саяны, Бурятия. Бурятия, Путешествия
Аршан, Саяны, Бурятия. Бурятия, Путешествия

Путешествие в Аршан, интересные места)

Показать полностью 2

В Николаеве такое. Пердаки укропатриотов раскалены до красна.

В Николаеве такое. Пердаки укропатриотов раскалены до красна.

Cillian murphy

Портрет актера Киллиана Мерфи) Выполнен в программе иллюстратор при помощи графического планшета

Инстаграм _sofism_

Cillian murphy Арт, Artist, Портрет, Иллюстрации, Творчество, Художник, Digital, Длиннопост
Cillian murphy Арт, Artist, Портрет, Иллюстрации, Творчество, Художник, Digital, Длиннопост
Показать полностью 2

Моя жизнь с 17 котами (часть 8: ПУЗА)

Всем привет! С Вами снова тот "бритый гоблин" у которого есть недостатки в правописании,

зато нет недостатка в котах.

Моя жизнь с 17 котами (часть 8: ПУЗА) Кот, Домашние животные, Животные, Блог, Длиннопост, Видео, Семья, Гифка
Моя жизнь с 17 котами (часть 8: ПУЗА) Кот, Домашние животные, Животные, Блог, Длиннопост, Видео, Семья, Гифка

Сегодня я расскажу, что такое "ПУЗА".


Знакомьтесь! Это ПУЗА.

Моя жизнь с 17 котами (часть 8: ПУЗА) Кот, Домашние животные, Животные, Блог, Длиннопост, Видео, Семья, Гифка

пузА - это Вам между прочим, не волосатое пивное пузО. Каждый кошатник знает, что если кот расслабился и дал Вам погладить ПУЗУ, то он Вам полностью доверяет.

Почему?

Потому что ПУЗА....... - это святое.

Именно с ПУЗЫ большинство хвостатых начинает свое ежедневную "ген. уборку".

А еще ПУЗА - это страшное оружие, ни чем не хуже когтей,только так как пузА идеально подходит для размещения в нем сосисок, котлеток и прочих вкусностей...

Моя жизнь с 17 котами (часть 8: ПУЗА) Кот, Домашние животные, Животные, Блог, Длиннопост, Видео, Семья, Гифка
Моя жизнь с 17 котами (часть 8: ПУЗА) Кот, Домашние животные, Животные, Блог, Длиннопост, Видео, Семья, Гифка

в отличии от когтей пузА бьет не по глазам, а по карману хозяина. (Господи! Когда мы уже перестанем наивно употреблять этот термин.)

Иногда, желание втихаря набить ПУЗУ, приводит вот к таким неожиданным последствиям.

Моя жизнь с 17 котами (часть 8: ПУЗА) Кот, Домашние животные, Животные, Блог, Длиннопост, Видео, Семья, Гифка

ПузА - это еще и страшный наркотик. На пузУ можно подсесть, прямо как на крэк или героин,

Моя жизнь с 17 котами (часть 8: ПУЗА) Кот, Домашние животные, Животные, Блог, Длиннопост, Видео, Семья, Гифка

кому хотя бы раз посчастливилось, зарыться носом в шерстяную пузу, те еще долго не могут отказаться от этого кайфа и спешат с работы домой что-бы по скорее ширнуться новой дозой пушистой пузЫ.

А еще пуза нужна мамам-кошкам что-бы вынашивать самые мимимишные создания на планете - котят.

Поэтому запомните!!!!!

Не смотря на то, что половая зрелость у кошек наступает в 6-8 месяцев, и у них уже во всю начинается эструс (половая охота), к этому возрасту пузА а также тазобедренный сустав, еще не готовы к нормальным родам, поэтому беременность в таком раннем возрасте может отправить экспрессом на радугу и кошку и котят. Будьте внимательны.

И напоследок скажу, мне иногда попадаются на глаза такие ужасные истории, про то как при изучении святой пузы, хозяева котов путают соски с клещами и стараются их вывести всеми ужасными способами от прижигания до отрезания. АААААА!!!!!!!

Люди. Я понимаю, что если у Вас завелся кот, это не повод бежать и получать ветеринарное образование, но хотя бы основы строения тела кошачьих будьте добры изучите.


На этом я заканчиваю свое маленькое знакомство с пузОЙ. Все что нам нужно знать про пузу, можно узнать в этом стишке.

ПУЗА - это круто

ПУЗА - это мило

ПУЗА - это супер

ПУЗА - это сила

Всех обнимаю. ДА ПРИБУДЕТ С НАМИ МЯУ!

Показать полностью 5 1

Хороший редактор в наши дни - на вес золота

Хороший редактор в наши дни - на вес золота

Дали дятлу в лапы дрель

Из названия поста ясно, что мне одолжили на пару дней дрель. Точнее шуруповерт. Так как дятел - птица беспокойная, то я решил продолжить один давно начатый проект. В общем захотелось мне иметь деревянную кружку. Была найдена та самая верба. Отпилен кусок ствола. (Сам ствол уже лежал на земле, так что вандалом меня звать преждевременно). В общем не имея инструментов кроме ножа и стаместки, я быстро понял, что задача не так проста. Долбил я эту колоду как бешенный дятел, но скоро психанул и забросил. А тут разбирая очередную груду деревяшек, наткнулся на это чудо.

Дали дятлу в лапы дрель Работа с деревом, Cog, Кружки, Длиннопост

Пробито было довольно много. И я взял в руки шуруповерт. Кстати, донышко имеет трещинку. но не сквозную. Вода насквозь не проходит. Я думаю заполнить ее смесью эпоксидки и древесной пыли. (Которая остается от шлифовки).

Дали дятлу в лапы дрель Работа с деревом, Cog, Кружки, Длиннопост

Сучок-то я сразу и не приметил. Придется пробивать его внутрь и вклеивать сюда заплатку. Иначе он со временем выскочит сам.

Дали дятлу в лапы дрель Работа с деревом, Cog, Кружки, Длиннопост

Дно пока не ровное. Нужно будет приложить еще кучу усилий, чтобы его выровнять.

Дали дятлу в лапы дрель Работа с деревом, Cog, Кружки, Длиннопост

А теперь собственно несколько вопросов к знатокам.
1. Надо ли в обязательном порядке стягивать сие изделие металлической лентой во избежание растрескивания?

2. Стоит ли вырезать узор на внешней стороне? И если да, то какой? (Предлагайте варианты, рассмотрю, но не обещаю что выберу именно ваш.)

3. Чем пропитывать, чтобы можно было использовать как посуду и не отдавало привкусом масла?

Показать полностью 4

Поиграем в бизнесменов?

Одна вакансия, два кандидата. Сможете выбрать лучшего? И так пять раз.

СДЕЛАТЬ ВЫБОР

5 Flexbox методов, о которых вы должны знать

Flexbox является стандартом CSS, оптимизированным для проектирования пользовательских интерфейсов. Используя различные свойства Flexbox мы можем построить нашу страницу из небольших блоков, которые затем с легкостью сможем перемещать и изменять размеры, как нам угодно. Адаптивные веб-сайты и приложения пользуются огромным спросом в нынешней веб-индустрии.



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


1. Создание столбцов с одинаковой высотой


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


Flexbox не видит в этом проблемы. Все, что нам нужно, так это инициализировать гибкую модель. Обязательно убедитесь, что flex-direction и align-items имеют значения «по умолчанию».


div class="container">



.container{

display: flex;

flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/

align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/

}


ПРИМЕР


2. Изменение порядка


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


Это свойство называется order. Оно позволяет мне менять любое количество flex элементов и изменять их последовательность, в которой они появятся на экране. Этот параметр представляет собой целое число, определяющее положение элемента — более низкие числа означают больший приоритет.



<div class="blue">...</div>

<div class="red">...</div>

<div class="green">...</div>



.conteiner{display: flex;}


/*Обратный порядок элементов*/


.blue{order: 3;}

.red{order: 2;}

.green{order: 1;}


ПРИМЕР


3.Горизонтальное и вертикальное центрирование


Вертикальное центрирование в CSS является одной из тех проблем, которые заставляют нас спросить себя: Как такую тривиальную вещь до сих пор так сложно сделать? И это на самом деле так. Если посмотреть в Google вертикальное центрирование CSS, то в результате поиска выскочит бесконечное количество различных методов, большинство из которых будут включать в себя таблицы и преобразования. которые предназначены для изготовления макета.


Flexbox предлагает более простое решение этой проблемы. Каждый гибкий макет имеет два направления на оси (X,Y) и два отдельных свойства для их выравнивания. Мы можем позиционировать любой элемент прямо в середине родительского контейнера.



<div>...</div>



.container{

display: flex;

justify-content: center; /*Центр по главной оси*/

align-items: center; /*Центр по вспомогательной оси*/

}


ПРИМЕР


4. Создание полностью отзывчивой сетки (Responsive Grids)


Большинство разработчиков полагаются на готовые CSS фреймворки при создании адаптивных сайтов. Bootstrap является наиболее популярным, но есть и сотни других фреймворков, которые помогут вам справиться с этой задачей. Как правило, они хорошо работают и имеют множество опций, но имеют тенденцию быть довольно тяжелыми. Если вы все хотите сделать своими руками и вам не нужных громоздких фреймвокров, тогда Flexbox именно для вас!


Строка flexbox сетки представляет собой простой контейнер с display: block;. Внутри горизонтального столбца может быть любое количество элементов, размер которого устанавливается с помощью Flex. Гибкая модель адаптируется под размер окна браузера, так что эта схема должна отлично выглядеть на всех устройствах. Тем не менее, если все таки не хватит места на экране по горизонтали, то мы сможем решить эту проблему с помощью медиа-запроса.



<div class="col-1">...</div>

<div class="col-2">...</div>

<div class="col-1">...</div>



.container{display: flex;}

.col-1{flex: 1;}

.col-2{flex: 2;}

@media (max-width: 800px){

.container{

flex-direction: column;

}

}


ПРИМЕР


5. Создание идеального Sticky Footer (прилипающий футер)


Flexbox имеет простое решение этой проблемы. Применение display: flex; к тегу body позволяет построить весь наш макет страницы, на основе свойств Flex. Да чего я все говорю, да говорю? Давайте уже лучше посмотрим на практике.



<div class="main">...</div>


<footer>...</footer>



html{height: 100%;}

body{

display: flex;

flex-direction: column;

height: 100%;

}


.main{

/*Основной раздел будет занимать все свободное место на странице*/


flex: 1 0 auto;

}


footer{

/*Футер будет занимать столько места по вертикали, сколько и должен и не пикселя больше */


flex: 0 0 auto;

}



Вывод


Все браузеры (кроме IE 9) теперь поддерживают режим Flexbox. Если вы не использовали Flexbox до этого момента, то я рекомендуем Вам попробовать.


Надеюсь, что мои советы CSS были для вас полезны и что они помогут вам создавать более качественные и более адаптивные макеты.


Жду ваших комментариев по этому поводу.


Вы так же можете читать мои статьи здесь

Показать полностью
Мои подписки
Подписывайтесь на интересные вам теги, сообщества, авторов — и читайте свои любимые темы в этой ленте.
Чтобы добавить подписку, нужно авторизоваться.

Отличная работа, все прочитано! Выберите