Архивы css

Затененный задний фон для модального окна

28.03.2024 Павел Грибов WEB

Довольно часто встречающаяся задача: затененный задний фон модального окна или элемента веб страницы.Решается задача довольно просто, с использованием псевдоэлементов :before и :after. Обращаю внимание, что их можно использовать только в парных тегах вида <div></div>, и соответственно нельзя в тегах вида input (т.е. не парных). Еще одним нюансом является то, что значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block.

Например задача получить страницу вида:

Решается примерно так: сначала определим стили CSS:

.application:before {
   content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;
  background-size: cover;
    filter: blur(2px);
}

.application:after {
  content: '';
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
}
.select_area_color_lent_tag{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-around;
  z-index: 20;    
}

.application:before {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url(http://ultraimg.com/images/Ho6hQWs.jpg) center no-repeat;

background-size: cover;

filter: blur(2px);

}

.application:after {

content: '';

position: fixed;

z-index: 2;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: rgba(0,0,0,.5);

}

.select_area_color_lent_tag{

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width: 250px;

height: 250px;

background-color: white;

border: 1px solid black;

padding: 20px;

display: flex;

flex-wrap: wrap;

text-align: center;

justify-content: space-around;

z-index: 20;

}

HTML для этих стилей может выглядеть таким:

        <div class="application" style="display: none">            <div class="select_area_color_lent_tag">            </div>        </div>

1	<div class="application" style="display: none"> <div class="select_area_color_lent_tag"> </div> </div>

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

$(".application").show()

1	$(".application").show()

А здесь можно посмотреть еще много советов по работе с CSS

Оставить комментарий css, html, затененный задний фон

Краткое выделение всей строчки при клике в radiobutton

28.01.2022 Павел Грибов WEB

Проблема обнаруживается в webview приложений на android. А именно, если где-то в коде есть radiobutton обёрнутый чем угодно, то при клике по нему, кратковременно (на долю секунды) выделяется вся строчка целиком.

Решение: достаточно добавить в стилевое оформление этого элемента cursor:default

Update: достаточно применить к body -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

Оставить комментарий android, css, radiobutton, webview

CSS: Выравнивание содержимого блоков по вертикали

05.03.2021 Павел Грибов WEB

Чтобы получилось нечто подобное:

HTML:

    <div class="tile2">
        <div class="icons_left"><img height="32px" src="/images/list.png"></div>
        <div class="icons_right" ><img height="32px" src="/images/heart.png"></div>
    </div>

</div>

CSS:

.tile2{
    grid-template-columns: 50% 50%;
    display: flex;
    height: 100%;    
}
.tile2>.icons_left {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: end;
    margin:  auto;
    cursor: pointer;
} 
.tile2>.icons_right {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: left;
    margin:  auto;
    cursor: pointer;
}

.tile2{

grid-template-columns: 50% 50%;

display: flex;

height: 100%;

}

.tile2>.icons_left {

color: #003264;

font-weight: bold;

font-size: xx-large;

text-align: end;

margin: auto;

cursor: pointer;

}

.tile2>.icons_right {

color: #003264;

font-weight: bold;

font-size: xx-large;

text-align: left;

margin: auto;

cursor: pointer;

}

Оставить комментарий css, vertical-alling, выравнивание по вертикали

Символ рубля на сайте

15.12.2020 Павел Грибов WEB

Шел конец 2020 года, а мы всё еще не умеем штатно отображать символ рубля. Вот одно из решений:

1) Устанавливаем вот этот шрифт в css:

@font-face { 
    font-family: "rouble";
    src: url("/fonts/rouble.otf") format("opentype");
}
.rub { font-family: "rouble"; }

@font-face {

font-family: "rouble";

src: url("/fonts/rouble.otf") format("opentype");

}

.rub { font-family: "rouble"; }

2) В коде прописываем:

<span class="rub">i</span>

1	<span class="rub">i</span>

Оставить комментарий css, html, символ рубля

1 2 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Затененный задний фон для модального окна

Bootstrap: модальное окно в модальном

Краткое выделение всей строчки при клике в radiobutton

CSS: Выравнивание содержимого блоков по вертикали

Символ рубля на сайте