7 вещей, которые умеет CSS и о которых вы не знали


Содержание материала:

7 вещей, которые умеет CSS и о которых вы не знали

CSS – это не чрезмерно сложный инструмент в арсенале Web-разработчика. Тем не менее, даже, если вы его используете уже много лет, возможно, некоторые особенности могут быть вам неизвестны.

Именно эти особенности мы разберем в данной статье.

Итак, начнем с простых вещей и постепенно перейдем к более сложным.

1. Внешние и внутренние отступы блока в процентах, рассчитываются относительно ширины, а не высоты

Как хорошо известно, ширина для блока в процентах рассчитывается относительно родительского контейнера.

В случае с использованием процентных единиц для padding-top , padding-bottom , margin-top , margin-botton , расчет производится относительно ширины родительского блока.

Обратите внимание на то, что во внутреннем блоке .box объявлены три значения с процентами:

2. Свойство border и его расширенные возможности

Стандартное использование свойства border таково:

В этом случае оно дает быстрый доступ к таким свойствам, как border-style , border-width и border-color .

Но это ещё не всё! Каждое из этих свойств, само по себе является быстрым доступом к более детальному определению параметров. Например, через border-width можно установить ширину линии каждой стороны по отдельности:

Тоже самое относится также и к border-color и border-style , как показано в этом прекрасном демо ��

3. Свойство для таблиц empty-cells

Это свойство отвечает за то, будет ли показана пустая ячейка в таблице или нет:

Свойство empty-cells поддерживается всеми браузерами, включая Internet Explorer 8 и выше.

4. Свойство font-style может принимать значение oblique

В подавляющем большинстве случаев, для свойства font-style используются значения normal или italic . Но это свойство может также принимать значение oblique .

Почему же данное свойство дает эффект, похожий на italic? Спецификация объясняет, что данное свойство применяет набор шрифта к тексту, помеченного как oblique. Если такого шрифта нет, тогда происходит выбор набора italic. Или производится эмуляция наклонного шрифта при отсутствии набора italic.

В случае выбора italic шрифта, также производится замена этого набора при его отсутствии на oblique.

5. Свойство word-wrap идентично overflow-wrap

Свойство word-wrap используется не слишком часто, но в определенных обстоятельствах, например, при переносе очень длинного слова, помогает избежать неприятных сюрпризов:

Так как это свойство было изначально придумано Microsoft, оно доступно даже в таких динозаврах, как Internet Explorer начиная с версии 5.5.

На данный момент, свойство word-wrap переименовано в overflow-wrap , содержится в спецификации CSS3 и является альтернативным синтаксисом для overflow-wrap .

6. Свойство outline-offset

Свойство outline получило широкое распространение благодаря тому, что не затрагивает поток расположения элементов на странице. Поэтому, в спецификацию CSS3 было добавлено новое свойство, расширяющее уже имеющееся – outline-offset .

Новое свойство позволяет определить насколько далеко будет располагаться outline от элемента:

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

И главный недостаток этого свойства заключается в том, что оно не поддерживается никакой из версий Internet Explorer.

7. Свойство table-layout

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

Работу данного алгоритма объяснить на словах довольно-таки трудно, поэтому лучше всего обратиться к следующему примеру:

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

8. Работа свойства vertical-align в ячейках таблицы отличается от работы в других элементах

Для начала важно понимать работу свойства vertical-align НЕ на табличных ячейках:

  • Свойство работает только с элементами inline и inline-block
  • Оно не оказывает влияния на контент элемента
  • Изменяет выравнивание элемента относительно других inline и inline-block элементов
  • На него могут влиять свойства текста, шрифтов, такие, как line-height
  • Также на него воздействуют размеры примыкающих inline и inline-block элементов

Когда дело доходит до табличных ячеек, свойство vertical-align работает другим образом. Свойство применяется к одной или к нескольким ячейкам и содержимое выравнивается в соответствии с выбранным значением.

Как было показано в предыдущем демо, в случае применения данного свойства к табличным ячейкам, доступно всего четыре значения. Несмотря на то, что при значении baseline затрагиваются соседние ячейки, основной эффект применяется к содержимому ячейки с голубым фоном.

9. Псевдо-элемент ::first-letter умнее, чем вы предполагаете. Предупреждение от Сары Коннор…

Данный псевдо-элемент позволяет стилизовать первый символ содержимого блока. Но не все так просто. Под первый символ могут попасть несколько элементов, которые, по логике, не должны интерпретироваться как “первый символ”.

Чтобы разобраться подробней, рассмотрим следующий пример:

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

10. Вы можете использовать “неправильные” символы для разделителей в списке классов

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

Рассмотрим пример обычного HTML кода со списком классов:

Теперь добавим “неправильных” символов в качестве разделителей для классов:

Данные вариации разделителей будут работать правильно, в чем можно убедится в следующем демо:

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

Но применив к такому знаку экранирующий символ, можно добиться того, что всё-таки подобный код будет корректно работать:

И, если совсем уж углубиться в глубокую глубь, тогда можно использовать Unicode символы для разделителей классов. Что-то наподобие таких сумасшедших вещей:

Более того, подобный Unicode символы можно использовать в таблицах стилей. Например, так:

На этом всё. Мы разобрали несколько интересных, порой немного сумасшедших и нелепых случаев применения CSS. Желаю дальнейших успехов в изучении web-разработки!

Исходные коды к статье доступны по ссылке: http://codepen.io/collection/DBaOVQ/

При создании статьи были использованы следующие источники:

7 единиц CSS о которых вы должны знать

Работая с CCS, очень легко застрять на каком-то моменте, ведь порой работая даже по знакомому методу, бывает, что появляются новые проблемы.

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

Это значит, что уметь хорошо работать нам нужно даже с теми специфическими инструментами, которыми обычно пользуются очень редко, но бывают ситуации, когда нужны именно они.

Сегодня мы хотели бы вам рассказать о некоторых инструментах CSS. Каждый из этих инструментов как единица измерения, типа пикселя или ems, но вы о них, скорее всего, не знали.

rem

Начнем с того, что похоже на то, что вам, скорее всего, уже знакомо. Единица em определяется как текущий font-size. Так, если вы, например, установите font-size (размер шрифта) на элементе body, то значение em любого младшего элемента в пределах body будет равна этому font-size.

Здесь мы написали, что у div font-size будет равен 1.2em. Это в 1.2 раза больше чем font-size, у которого он унаследовал, он составлял 14px. Таким образом, результат 16.8px.

Однако, что произойдет, если вы каскадом расположите определяемые em font-size внутри друг друга? В следующем отрывке мы применяет тот же самый CCS, что и выше. Каждый div наследует font-size от своего родителя, выдавая нам постепенно увеличивающиеся размеры шрифта.

Не смотря на то, что это может подойти в некоторых случаях, часто мы хотим просто полагаться на единственную метрику для измерения. В этом случае мы должны использовать rem. “r” в rem обозначает “корень”; он равен набору размера шрифта в элементе корня; в большинстве случаев он является элементом HTML.

Во всех трех div из предыдущего примера, шрифт может достигать 16.8px.

5 баллов, Grid

Rem полезны не только в калибровке шрифта. Например, мы могли бы базировать всю систему grid или библиотеку UI по использованию размера шрифта HTML корня rem, и использовать их вычисление в определенных местах. Это дало бы нам более предсказуемую калибровку шрифта и вычисления.


Концепт идеи состоит в том, чтобы позволить нашему интерфейсу быть соизмеримым с размером контента. Хотя не обязательно, чтобы в каждом взятом случае это имело одинаковый смысл.

vh и vw

Отзывчивые методы веб-дизайна полагаются, в большой степени, на правило процента. Однако процент CSS – не всегда лучшее решение для каждой проблемы. Ширина CSS родственна ближайшему элементу, в котором содержится родитель. Что, если мы хотим использовать ширину или высоту окна просмотра вместо ширины исходного элемента? Это именно то, что помогают делать единицы vh и vw.

Элемент vh равен 1/100 высоты окна просмотра. Например, если высота браузера 900px, 1vh может достигать 9px. Также, если ширина окна просмотра составляет 750px, 1vw может достичь 7.5px.

Кажется, что это правило можно использовать бесконечно. Например, очень простой способ достигнуть с помощью одной единственной строки CSS полной высоты или приблизительно полной высоты слайдов можно:

Предположим, вы хотите сделать заголовок, который заполнит всю ширину экрана. Чтобы сделать это, вам необходимо установить font-size в vw. Этот размер будет соизмерим с шириной браузера.

vmin и vmax

В то время как vh и vm всегда связаны с высотой и шириной окна просмотра, также vmin и vmax связаны с максимумом и минимумом этой высоты и ширины, в зависимости от того, какая из них меньше, а какая больше. Например, если браузер имеет параметры 1100px в ширину и 700px в высоту, 1vmin будет 7px, а 1vmax – 11px. Однако, если ширина установлена на 800px, а высота на 1080px, то vmin будет равен 8px, в то время как vmax будет установлен на 10.8px.

В каких случаях вы сможете использовать эти значения?

Представьте, что вам нужен элемент, который всегда остается видимым на экране. Используя высоту и ширину, установленные значением vmin ниже 100 позволит вам этого добиться. Например, квадратный элемент, который касается, как минимум двух частей экрана может быть определен так:

Топ-пост этого месяца:  Protractor Angular знакомство с инструментом комплексного тестирования

Если вам нужен квадрат, который будет покрывать всю видимую зону окна просмотра, используйте те же правила, но кроме vmax.

Комбинация этих правил позволит вам использовать размер вашего окна просмотра очень гибко и с максимальной продуктивностью.

ex и ch

Единицы ex и ch, так же как em и rem, соотносятся с current font и font size. Однако, поскольку они основаны на определенных для шрифта мерах, ex и ch также соотносятся с font-family, в отличие от em и rem.

Единица ch или единица character, определяется как «улучшенная мера» ширины знака 0. Это понятие вызвало много споров, но основная идея состоит в том, что обладая шрифтом фиксированной ширины, квадрат с шириной N знаками единиц, таких как width: 40ch; могут всегда содержать последовательность из 40 знаков в этом конкретном шрифте. В то время как обычное использование этого особого правила состоит в расположении шрифта Брайля, возможности для креативности здесь, конечно, простираются вне этих простых заявлений.

Единица ex определяется как «х-высота текущего шрифта ИЛИ одна-вторая от em». Thex-высота данного шрифта – высота строчных букв x того шрифта. Чаще всего, это примерно в средней отметке шрифта.

Существует много областей, где могут использоваться подобные единицы. Чаще всего в типографии. Например, элемент sup, который выступает как superscript, может быть добавлен в строку, используя соответствующую позицию и конечное значение 1ex. Точно так же вы можете сбросить нижний элемент. Ошибки браузера исправляются правилами superscript- и subscript-specific vertical-align, но если вы хотите больше контроля, вы можете попробовать следующее:

Вывод

Очень важно следить за развитием и распространением CSS, так же как и узнавать о новых инструментах и добавлять их к себе в список умений. Скорее всего, вы встретитесь с проблемами, которые могут быть решены с помощью этих единиц. Не пожалейте времени и прочитайте спецификацию. Подпишитесь на обновления от cssweekly. И, конечно, не забудьте подписаться на еженедельные обновления и бесплатные обучающие видео на Tuts+!

5 занимательных проектов, реализованных на CSS без использования JavaScript

Силу CSS легко недооценить. Для тех, кто использовал CSS2, это лишь инструмент для настройки стилей. C приходом CSS3 нам открылось море возможностей: от стилизации элементов до создания анимаций, ранее возможных только с использованием Adobe Flash или JS. В этой статье приведены примеры, которые наглядно показывают все современные фичи CSS.

Трёхмерная Солнечная система

Эта демка занимает 1500 строк CSS-кода и использует base64-изображения. Используется совсем немного JavaScript, но что такое 42 строки?

Мона Лиза

Автор описывает свою Мону Лизу как “бессмысленную, но забавную”. Вся картина была воссоздана с использованием очень, очень большого количества элементов box-shadow . Каждый элемент имеет небольшой сдвиг и размытие, что придаёт изображению приятный вид. Интересная альтернатива base64.

Прогресс-бар

Этот трёхмерный прогресс-бар позволяет вам использовать CSS-классы в HTML для задания степени заполненности шкалы. Кроме того, можно использовать разные цвета. Если вы хотите анимировать заполнение шкалы, достаточно изменить класс и применить CSS-переход.

See the Pen Pure CSS Progress by Rafael González (@rgg) on CodePen.

iPhone 6

“Лучшее, что есть в iPhone 6 — это его округлая форма, ведь теперь его можно нарисовать на CSS”, — говорит автор этой демки. Живые обои смартфона также анимированы. Весь код занимает 500 строк, но для реализации потребовалось приличное количество HTML-элементов

See the Pen CSS Only iPhone 6 by Fabrizio Bianchi (@fbrz) on CodePen.

Вступление из Звёздных войн

“Я люблю Star Wars, но я не смог найти веб-версию вступления фильма 1977 года, поэтому мне пришлось сделать её самому.” Других объяснений и не нужно — просто запускайте демку! Музыка, конечно, включена в HTML в виде файлов .ogg.

6 лучших анимационных «фишек» CSS3

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

Поиграться с кодом любого из примеров вы можете, нажав на ссылку JSFiddle в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.


5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

Поиграться с кодом любого из примеров вы можете, нажав на ссылку JSFiddle в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

11 вещей, на которые способен ваш смартфон (о которых вы точно не знали)

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

Но есть некоторые важные функции смартфона, о которых вы точно не знали.

А ведь ваш смартфон это настоящий кладезь интересных функций и различных полезных опций.

Скрытые функции смартфона

1. Черные обои уменьшают расход батареи

Каждый из нас сталкивался с неприятной ситуацией, когда батарея мобильника разряжалась в самый неподходящий и неожиданный момент.

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

Так вы продлеваете жизнь батареи вашего гаджета. Вы увидите, что мобильник или планшет будут дольше работать без какой-либо подзарядки.

Практика показала увеличение времени функционирования телефона примерно на 20-30 процентов, если экран постоянно включен.

Данная функция действует на так называемых OLED-дисплеях, которыми оснащены многие модели Samsung.

Если вы не знаете, какой тип дисплея на вашем мобильном телефоне, обратитесь за подсказкой к поисковой системе: просто введите марку телефона, в характеристиках -тип дисплея и узнайте, какой тип у вас.

2. Дистанционное управление с помощью смартфона

Просто зайдите в Настройки -> Безопасность -> Администраторы устройств и установите флажки рядом с опцией Диспетчер устройств Android.

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

3. Управлять телефоном движением головы

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

Топ-пост этого месяца:  Robots для сайта как его правильно составить.txt

Что же делать в подобных случаях? Решение есть!

Нужно просто установить на свой смартфон бесплатное приложение EVA Facial Mouse, который подходит для любого Android-устройства.

С помощью этого нехитрого приложения, вы сможете управлять мобильным телефоном, используя простые движения головы.

4. Секретная видеосъемка

Иногда может возникнуть ситуация, когда требуется провести видеосъемку, но так, чтобы об этом никто не знал.

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

Активируйте режим видео, начните запись. Важно удерживать дисплей в наполовину заблокированном виде, после чего 3 раза кликнуть по кнопке Home.

Необходимо подождать, пока экран полностью погаснет. Вот и всё, видеосъемка уже началась.

5. Badoo (Люди рядом)

Согласитесь, всегда любопытно узнать, что за люди вас окружают в данный момент. Кто они, как их зовут, какого они возраста и, конечно же, чем они интересуются?

Например, вы видите в кафе или просто на улице привлекательную девушку или симпатичного парня. Однако, подойти решится не всякий.

А что если бы можно было кинуть сообщение этому человеку или поставить лайк под понравившейся фотографией.

Именно для таких ситуаций существует приложение Badoo. Оно обнаруживает людей, которые находятся в непосредственной от вас близости.

Наглядный пример того, как работает приложение: ставим ограничение «Девушки от 20 до 25 лет» и смотрим, что нам выдает поисковая система. Затем смотрим фото и выбираем ту, которая ту, которая привлекла наше внимание.

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

Если объект вашей симпатии ответит на ваше сообщение, у вас завязывается беседа, и уже после этого можно не бояться назначать реальное свидание.

Стоит отметить, что это бесплатное приложение, которое поддерживается всеми платформами. Вы можете скачать его, как на Андроид, так и на iOS и даже Windows Phone.

6. Доступ к закрытым уведомлениям

Многие из нас сталкивают с тем, что регулярно получают множество различных уведомлений. Так происходит, потому что на наших смартфонах установлено огромное количество приложений.

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

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

В таких случаях вам поможет приложение Past Notifications. С его помощью можно без проблем просматривать закрытые уведомления.

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

Так вы будете меньше отвлекаться на уведомления, которые являются абсолютно бесполезными.

7. Функция Text-to-Speech

Вы можете не только прочитать какую-то статью, но и прослушать ее, если вы являетесь обладателем Android-устройства.

Итак, если вы не хотите напрягать зрение и предпочитаете слушать входящую информацию, а не видеть ее, перейдите в Настройки -> Доступность и просто включите опцию Text-to-Speech.

8. Активация гостевого режима

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

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

Что может ваш смартфон

9. Экранный увеличитель

Настоящей палочкой-выручалочкой для людей с плохим зрением станет экранный увеличитель.

Многие даже и не догадываются, насколько эта функция может быть полезной. Просто зайдите в Настройки -> Доступность -> Жесты увеличения. И всё, вы сможете увеличить любую часть дисплея, просто нажав на этот экранный увеличитель.

10. Режим «горячих точек»

Вам больше не нужно покупать отдельный 3G-модем или маршрутизатор для использования Интернета на разных устройствах, потому что ваш смартфон легко справиться с поставленной задачей.

Перейдите в Настройки -> Модем и переносимая точка доступа, активизируйте точку доступа Portable WLAN. Все готово!

11. Секретная игра

Начиная с версии Android 2.3 Gingerbread, Google придумал небольшой сюрприз для своих пользователей. Однако обнаружить этот милый секрет не так уж и просто.

Вот пошаговая инструкции о том, как это сделать:

Сначала перейдите в раздел «Настройки» и выберите раздел «О телефоне» или «О планшете» (этот сюрприз есть, как на смартфоне, так и на планшете). Быстро коснитесь Android –версии несколько раз, и когда на экране появится маленький зефир, быстро нажмите еще раз, на экране должна открыться специальная мини-игра, эдакий маленький приятный подарок пользователям.

7 единиц измерения CSS, о которых вы могли не знать

Легко ограничиться техниками CSS, которые нам хорошо знакомы. Но это ставит нас в невыгодное положение при появлении проблем, с которыми мы не сталкивались.

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

К этому относится и знание специальных инструментов, тех, что часто не используются, но когда появляется нужда, справится возможно только с их помощью.


Сегодня я познакомлю вас с некоторыми CSS инструментами, о которых вы могли не слышать. Каждый из них является единицей измерения, такой как, например, пиксели или em, но о тех, что я хочу рассказать, вы могли даже и не слышать! Давайте начнем.

Начнем с чего-то, что вам может показаться отдаленно знакомым. em всегда равен font-size . Так что если вы зададите размер шрифта элементу body, значение em каждого вложенного в body элемента будет пропорционально меняться.

Вот, мы задали font-size контейнера div 1,2em . Это в 1.2 раза больше, чем любой заданный размер шрифтп, в этом случае 14px. Результат – 16.8px .

Но что случится, если вы вложите друг в друга контейнеры с размером шрифта, заданным в em? В следующем примере мы использовали тот же CSS код, что и в предыдущем. Каждый div контейнер наследует размер шрифта от своего родителя, тем самым каждый раз увеличая шрифт все сильнее и сильнее.

Когда в некоторых случаях это может быть необходимо, довольно часто хочется, чтобы значение, от которого отталкивается единица измерения, было одним. В такой ситуации подойдет rem . Буква «r» в rem означает root (корень); то есть размер шрифта задается относительно корневого элемента; в большинстве случаев это будет html элемент.

В каждом из трех вложенных элементов в прошлом примере, шрифт будет равен 16.8px .

Удобно в случае с сетками.

Rem удобно использовать не только для установки размера шрифта. Например, вы можете задать размер шрифта целой сетке используя rem , обращаясь к em в некоторых местах. Это даст вам более предсказуемое масштабирование.

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

Могу ли я это использовать?

vh и vw

Адаптивный веб-дизайн полностью полагается на процентные соотношения. Но использование процентов CSS не всегда является лучшим решением. CSS ширина всегда относительна ближайшего родительского элемента. Но что если вы хотите использовать ширину или высоту viewport вместо таковых родительского элемента? Это как раз тот случай, когда стоит использовать vh и vw .

1vh равен 1/100 высоты viewport. Например, если высота браузера 900px , 1vh будет равен 9px. Таким же образом, если ширина равна 750px , то 1vw будет равен 7.5px .

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

Представьте, что вам необходимо сделать заголовок, который займет всю ширину экрана. Чтобы сделать это, следует задать размер шрифта в vw . Этот размер будет увеличиваться вместе с размером экрана.

Могу ли я это использовать?

vmin и vmax

В то время как vh и vm всегда относятся к высоте и ширине viewport, vmin и vmax относятся к минимальной и максимальной ширине или высоте viewport, в зависимотсти от того, какая из величин больше, а какая меньше. Например, если ширина окна браузера задана в 1100px, а высота в 700px, 1vmin будет равен 7px, а 1vmax 11px. Но, если ширина будет установлена в 800px, а высота в 1080px, то vmin будет равен 8px, а vmax – 10.8px .

Итак, как можно воспользоваться этими значениями?

Представьте, что вам нужно создать элемент, который всегда будет находиться в видимой части экрана. Используя значения высоты и ширины vmin , заданные меньше 100, вы сможете это осуществить. Например, элемент квадратной формы, который всегда касается как минимум двух краев экрана может быть задан так:

Если вам нужен квадратный блок, который будет покрывать весь viewport (касаться четырех сторон экрана одновремнно), используйте те же правила, но с vmax .

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

Могу ли я это использовать?

ex и ch

Единицы ex и ch , по аналогии с em и rem , соотносятся с текущим шрифтом и размером шрифта. Но, в отличие от em и rem , они также соотносятся c font-family .

ch или character является продвинутой единицей измерения ширины от нуля, 0 . Наиболее интересные обсуждения того, что это может значить, можно найти в блоге Эрика Мейерса. Вкратце, если мы возьмем моноширинный шрифт, контейнер с шириной из N букв, тогда, например, width: 40ch; всегда будет содержать выражение из 40 единиц этого конкретного шрифта. Когда стандартным использованием этого правила является пример шрифта Брайля, возможности творческого подхода существенно расширяют его функционал.

ex обозначается как «x-высота текущего шрифта ИЛИ половина 1em «. x-height выбранного шрифта называется высота буквы x нижнего регистра этого шрифта. Часто эта высота оказывается срединной точки всей высоты шрифта.

X-высота; высота буквы x нижнего регистра (читайте больше про структуру веб типографики)

Для этой единицы измерения существует множество вариантов использования, большинство из них являются небольшими дополнениями к основной типографике. Например, элемент sup , который обозначает надстрочные символы, может быть приподнят относительно своей позиции, если ему задать position: relative и значение свойства bottom 1ex. Таким же образом вы можете опустить подстрочные буквы еще ниже. Стандартные настройки браузера использует свои правила vertical-align надстрочных и подстрочных символов. Но если вам нужна более тонкая настройка, вы можете сделать ее следующим образом:

Могу ли я это использовать?

Единица ex существует примерно со времен CSS1, а вот для ch такой поддержки вы не найдете. Для ознакомления со спецификацией по поддержке свойств, ознакомьтесь со значениями и единицами CSS в блоге Эрика Мейерса.

Заключение

Следя за постоянным развитием и расширением CSS, важно быть в курсе всех возможностей, которые доступны на текущий момент. Возможно вам встретится нетипичная проблема, которая будет требовать от вас нетипичного решения с использованием одной из этих малопонятных единиц измерения. Самое время почитать про новые спецификации. Подписывайтесь на рассылки от таких замечательных ресурсов, как, например, cssweekly. И не забывайте подписываться на еженедельные обновления, курсы, бесплатные уроки, такие как этот, по веб-дизайну на Tuts+!

7 вещей, о реальном предназначении которых вы, возможно, не знали (7 фото)

Давайте посмотрим на знакомые всем вещи и узнаем некоторые их особенности, которых вы, возможно, не знали.
Итак, 7 историй вещей, которые смогу Вас удивить.

1. Шапка с помпоном

Помпоны кажутся веселым предметом декора головных уборов. Однако, их история начинается в 18 веке. Помпоны появились на униформе французских матросов. Их функция – не дать ударится члену команды головой о низкий потолок при входе в каюту.

2. Квадратное отверствие на палочке чупа-чупса

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

3. Брюки со стрелками

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

Топ-пост этого месяца:  Использование wordpress внутри ramdisk

4. Цвет полоски на тюбике зубной пасты

Ходят слухи, что черная полоска на тюбике с пастой говорит о химии в составе пасты, а вот зеленая — о натуральности товара. Это не правда. Цвет линий связан исключительно с особенностями упаковочных машин, чтобы те могли контролировать тюбик во время процесса изготовления, и знать в каком месте туба должна быть обрезана. В зависимости от цвета упаковки — устанавливается и нужный цвет. Максимально контрастный цвет конвейер считывает лучше.

5. Кармашек на трусах

Называется кармашек ластовица — элемент нижнего белья из натуральной ткани. Он всегда есть, чтобы у чувствительной кожи в интимной зоне не было раздражения. Но его сложно вшить двумя потайными швами, поэтому получается карманчик.

6. Ромбик на рюкзаке

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

7. Небольшое отверстие в навесном замке

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

7 секретов известных вещей, о которых мы не подозревали (8 фото)

Загадочный зигзаг трамвая

Если присмотреться к трамвайным путям, можно заметить, что контактный провод висит не по прямой, а зигзагом.
На крыше трамвая располагается токоприемник. Верхняя часть токоприемника соприкасается с проводом и при движении изнашивается. Чтобы он не протирался в одном месте, провод укладывают не строго вдоль пути движения, а небольшим зигзагом. Скользя, он как бы полирует токоприемник, и износ происходит равномерно

Кто убил короля?

В известном дизайне французской колоды у червового короля довольно странное изображение. Мало того что он единственный безусый король, так он еще и метит мечом себе в голову. Есть несколько теорий на этот счет.

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

Другая теория говорит, что червовым королем был Карл VII (король Франции). Он сошел с ума и в страхе от того, что его хотят отравить, занес меч над головой и убил себя.

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

Надежный щит Великобритании

Если сложить британские монетки номиналом 1, 2, 5,10, 20, 50 пенсов, то они образуют «Надежный щит Британии». А вот уже на монете в 1 фунт этот самый щит изображен целиком.

Символ на этикетке — открытая баночка

Открытая баночка, или символ PAO — период после открытия (period-after-opening), обозначает срок, в течение которого продукт можно использовать без вреда, начиная с его вскрытия.
Такой символ изображается на косметике, рядом написано число и стоит буква «М» — месяцы. Это число показывает максимально рекомендованный срок использования, который не принесет вреда потребителю.

Корона статуи Свободы

Все видели статую Свободы. Но, вероятно, вы не знали, что на короне у статуи располагаются ровно 7 шипов, которые символизируют 7 континентов и морей, через которые должна пройти свобода. И весит каждый такой пик ровно 100 кг.

Пустые страницы в книгах

Наверное, вы замечали, что в некоторых книгах в самом конце или в начале есть одна, а то и несколько пустых страниц. Зачем они там нужны?
Дело в том, что страницы для книг обычно печатаются на очень больших листах бумаги, а не на отдельных форматных. Поэтому если произведение не входит на весь этот лист, то лишние страницы остаются пустыми. На некоторых даже пишут «Для заметок» или оставляют другую надпись, чтобы читатели не думали, что это ошибка печати.

Разноцветная зубная паста

Вы не задумывались, почему классическая зубная паста имеет полоски из трех цветов: белого, синего и красного? Оказывается, у каждого цвета разный состав и предназначение.


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

Синий (или зеленый) отвечает за свежесть дыхания и антимикробное действие.

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

Однако нет никакой строгой потребности в разделении этих компонентов. Просто так нагляднее и красивее.

20 обычных вещей, о значении которых вы не задумывались

Даже у таких обычных вещей, как ромбик на рюкзаке и ящик под духовкой, есть свои функции, о которых вы даже не подозреваете.

Привычные вещи, с которыми мы ежедневно имеем дело, полны сюрпризов. Нам кажется, что мы знаем о них всё, но это не так. Лайфхакер собрал самые неожиданные факты о предметах повседневного обихода.

1. Коробочки с азиатским фастфудом

Можно, конечно, тренировать ловкость пальцев, вылавливая палочками лапшу и рис из уголков коробки. А можно развернуть коробку, тогда она станет тарелкой, есть из которой намного удобнее.

2. Цилиндр на проводе

Это ферритовый фильтр, который подавляет высокочастотные помехи в электрических цепях. Благодаря ему улучшается качество цифрового сигнала. Кстати, эти фильтры бывают и съёмными.

3. Пуговица на задней части воротника рубашки

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

4. Углубления на донышках винных бутылок

Когда бутылку закупоривают пробкой, создаётся сильное давление на дно и стенки. Углубление в донышке позволяет распределить его равномерно, за счёт чего бутылка не лопается. Кстати, у бутылок, предназначенных для игристых вин, выемка больше, чем у остальных винных бутылок.

5. Горизонтальная петля для верхней пуговицы рубашки

Почему все петли на планке рубашки расположены вертикально, а верхняя — горизонтально? Ответ прост: в этом месте рубашка чаще всего расстёгивается. Из горизонтальной петли пуговица выскакивает не так легко, как из вертикальной.

6. Дополнительные отверстия для шнуровки кроссовок

Ими мало кто пользуется, а зря: благодаря этим отверстиям можно зашнуровать кроссовки так, что они будут идеально зафиксированы на ноге и никогда не натрут вам пятку во время занятий спортом.

7. Боковые дырочки на кедах

Помимо очевидного ответа «для вентиляции», есть и другая версия. Дело в том, что изначально обувь Converse All Stars производилась для баскетболистов. Кеды шнуровались таким образом, что шнурок проходил и через эти дополнительные отверстия. Благодаря этому обувь сидела очень плотно.

8. Отверстие в ложке для спагетти

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

9. Прорезь в ручке ковша

Она пригодится вам не только для того, чтобы повесить ковш на крючок. Это отверстие можно использовать как держатель для ложки, которой вы перемешиваете блюдо.

10. Отверстие в кончике колпачка шариковой ручки

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

11. Стрелка рядом со значком заправки на приборной панели

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

12. Отверстие в палочке леденца

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

13. Кармашек под ластовицей трусиков

Это, конечно же, не кармашек. Дело в том, что ластовица изготавливается из специальных мягких материалов, отличающихся от основной ткани изделия. Боковые части ластовицы убираются в боковые швы, задний край подшивается внутренним швом. Так как сделать ещё один внутренний шов технически невозможно, передний край ластовицы оставляют непришитым. Получается своеобразный карман, который не предназначен для хранения чего бы то ни было.

14. Квадратная нашивка с прорезями на рюкзаке

Изначально такие нашивки были только на туристических рюкзаках: через прорези пропускались верёвки и карабины. На городские рюкзаки они пришиваются исключительно в декоративных целях.

15. Стрелки на брюках

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

16. Помпоны на головных уборах

Смешные пушистые шарики впервые появились в XVIII веке на шапочках французских моряков, которым надоело биться головой о низкие корабельные потолки и выступы. Позднее помпоны разных форм и цветов появились и на многих других армейских головных уборах. Благодаря им можно было определить, в каких родах войск служат их обладатели.

17. Заглушка на конце канцелярского ножа

Есть несколько способов отламывать затупившиеся секции канцелярского ножа. Можно, рискуя пальцами, делать это вручную, можно воспользоваться плоскогубцами, а можно повнимательнее присмотреться к самому ножу. На конце его рукоятки есть заглушка, которую можно снять, надеть на ненужную секцию лезвия и отломить её.

18. Отверстие на упоре рулетки

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

19. Число 57 на упаковке кетчупа Heinz

Кроме того, что это число — часть рекламного слогана компании Heinz («57 разновидностей»), от этих цифр на бутылке есть и практическая польза. Если кетчуп не льётся, стукните пару раз ладонью по числу 57.

20. Ящик под духовкой

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

Знаете ли вы селекторы?

CSS3-селекторы – фундаментально полезная вещь.

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

Поэтому эти селекторы необходимо знать.

Основные виды селекторов

Основных видов селекторов всего несколько:

  • * – любые элементы.
  • div – элементы с таким тегом.
  • #id – элемент с данным id .
  • .class – элементы с таким классом.
  • [name=»value»] – селекторы на атрибут (см. далее).
  • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

Селекторы можно комбинировать, записывая последовательно, без пробела:

  • .c1.c2 – элементы одновременно с двумя классами c1 и c2
  • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

  • div p – элементы p , являющиеся потомками div .
  • div > p – только непосредственные потомки

Есть и два более редких:

p – правые соседи: все p на том же уровне вложенности, которые идут после div .

  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
  • Добавить комментарий