Окно сообщения внизу слева - PullRequest
Новая
       2

Окно сообщения внизу слева

0 голосов
/ 23 февраля 2019

Я только недавно действительно пытался научиться веб-разработке, и причина, по которой я на самом деле увлекся этим, заключалась в том, что мне было невероятно любопытно, как это сделать: https://imgur.com/a/dvghHmD. Нечат, но в левом нижнем углу, вы можете увидеть, что я смотрю.Я бы очень хотел сделать что-то похожее, с тенью.На данный момент вот что я получил: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

}
<style>
.rectangle {
  height: 100px;
  width: 400px;
  background-color: #FFFFF;
  border-radius: 15px;
  position: fixed;
  bottom: 0;
  margin-bottom: 2.5%;
  margin-left: 2.5%;
}
.rectangle {
-webkit-box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
-moz-box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
box-shadow: 0px 0px 53px 0px rgba(0,0,0,0.24);
}
.rectangle class = "full-height"
#rectangle {

}
</style>
<style>
.text {
color: #151515;
text-align: left;
width: 300px;
font-family: 'Roboto', sans-serif;
  position: absolute;
  bottom: 0;
  margin-bottom: 2%;
  margin-left: 6%;


</style>
</head>
<body>

<div class="rectangle"></div>
<div class="text"> </div>
 <div class="text"><span class="text"> <h2 style="font-size:21px"> This is a test text! This text is quite fine. I have no idea what I'm doing.  <h2> </span>
  </div>

</body>
</html>

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

  • Как сделать так, чтобы окно, подобное этому, всегда отображалось в зависимости от размера экрана?
  • Как сделать «родительский» текст дляполе, чтобы текст масштабировался в соответствии с полем, а не независимо?Я не знаю, как лучше это описать.
  • Был бы более эффективный способ сделать это (или были созданы какие-либо депозитарии Github, которые уже сделали это, чтобы я мог взглянуть на этот код)?

Любой из вас, кто видит это, большое спасибо за чтение.Я действительно ценю любую помощь!

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Прежде чем погрузиться в CSS, сначала правильно структурируйте свой HTML.Вы спрашиваете о родительских элементах, и это делается с помощью упаковки элементов с открывающими / закрывающими тегами:

HTML: 

<div id="message_container">
  <div id="message_content">message</div>
</div>

CSS:

С вашим собственным HTML, вы работаете над стилем: 

#message_container {

  /* to position it at bottom-left (dependent on the parent) */
  position: absolute;
  bottom: 2em;
  left: 2em;

  /* to position the contents within the box (ie the message text) */
  display: flex;
  justify-content: center;
  align-items: center;

  /* to style the message box in particular ways */
  padding: 2em;
  border-radius: 40px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 200px;
}

Отзывчивая оптимизация:

После того, как ваша структура (HTML) и стиль (CSS)Твердые, то вы можете думать об отзывчивости.Для этого вам нужно изучить правила CSS @media, чтобы изменить свойства стиля рамки в соответствии с некоторыми условиями (например, шириной экрана).Все это субъективно, так что вы должны сами пробовать и вносить ошибки, чтобы очистить макет на разных размерах экрана.

Например: 

/* for screens smaller than 320px width */
@media (max-width: 320px) {

  /* make the message slimmer, and center it */
  #message_container {
    padding: 0.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    left: 50%;
    transform: translate(-50%,0);
  }

  /* make the message text smaller */
    #message_content {
        font-size: 0.9em;
    }
}

Управление коробкой:

Если вы хотите, чтобы это поле появлялось и исчезало в соответствии с различными событиями (например, через 2 секунды после полной загрузки страницы или когда пользователь щелкает что-то в другом месте), вы будете использоватьJavascript.Для этого есть множество учебных пособий.

Это общий процесс.

Codepen 

#message_container {

  /* to position it at bottom-left (dependent on the parent) */
  position: absolute;
  bottom: 2em;
  left: 2em;

  /* to position the contents within the box (ie the message text) */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* to style the message box in particular ways */
  padding: 2em;
  border-radius: 40px;
  box-shadow: 4px 4px 20px rgba(0,0,0,0.3);
  width: 100%;
  max-width: 200px;
}

@media (max-width: 320px) {
  
  #message_container {
    padding: 0.5em;
    padding-top: 1em;
    padding-bottom: 1em;
    left: 50%;
    transform: translate(-50%,0);
  }
  
    #message_content {
        font-size: 0.9em;
    }
}
<div id="message_container">
  <div id="message_content">message</div>
</div>
0 голосов
/ 23 февраля 2019

Вы можете использовать относительное расположение для определения размера поля в соответствии с экраном

ИЛИ

Вы можете использовать 'Responsive Media Queries' (https://www.w3schools.com/css/css_rwd_mediaqueries.asp)

Для масштабирования текста в соответствии с всплывающим окном вы можете использовать единицу «rem» - CSS. Что он в основном делает, так это масштабирует ваш текст в соответствии с размером родительского элемента.

Проверьте эту ссылку: (https://css -tricks.com / almanac / properties / f / font-size / )

Надеюсь, это поможет.:)

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

Нет похожих вопросов

...