coding: display

Показаны сообщения с ярлыком display. Показать все сообщения

суббота, 7 марта 2020 г.

Плавное появление элемента из display:none в inline

#html #jquery #css #transform #display


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



body {
  font-family: "Roboto";
  font-weight: 100px;
}

.cat-block {
  position: relative;
  display: inline-block;
}

.cat-block .category {
  background-color: rgba(255, 255, 255, 0);
  padding: 3px 8px 3px 8px;
  box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25);
  float: left;
  -webkit-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
  margin: 0;
  z-index: 3;
}

.cat-block .category img {
  width: 13px;
  padding-right: 5px;
  display: none;
}


.cat-block .category:hover img {
  display: inline;
}

.cat-block .category a {
  font-size: 16px;
  font-weight: 300;
  color: #3b3b3b;
  text-align: right;
  text-decoration: none;
}


.cat-block .category:hover {
  box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25);
  background-color: rgba(255, 255, 255, 1);
}

.cat-block .category:active {
  background-color: rgba(255, 255, 255, 1);
}

.cat-block .category:nth-of-type(1) {
  border-radius: 10px 0 0 10px;
  padding-left: 14px;

}

.cat-block .category:nth-of-type(4) {
  border-radius: 0 10px 10px 0;
  padding-right: 14px;
}



#первый
#последующий
#следующий
за ним
#последний

Ответы

Ответ 1


@andrey-fedorov прав, сделать плавность с помощью css/display:none невозможно, это
можно сделать при помощи jQuery например. А вот если изменять ширину от 0 до заданной,
то с помощью css это сделать можно вот так:



body {
  font-family: "Roboto";
  font-weight: 100px;
}

.cat-block {
  position: relative;
  display: inline-block;
}

.cat-block .category {
  background-color: rgba(255, 255, 255, 0);
  padding: 3px 8px 3px 8px;
  box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25);
  float: left;
  -webkit-transition: .2s ease-out;
  -o-transition: .2s ease-out;
  -moz-transition: .2s ease-out;
  transition: .2s ease-out;
  margin: 0;
  z-index: 3;
}

.cat-block .category img {
  width: 0;
  padding-right: 5px;
  transition: .3s;
}


.cat-block .category:hover img {
  width:13px
}

.cat-block .category a {
  font-size: 16px;
  font-weight: 300;
  color: #3b3b3b;
  text-align: right;
  text-decoration: none;
}


.cat-block .category:hover {
  box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25);
  background-color: rgba(255, 255, 255, 1);
}

.cat-block .category:active {
  background-color: rgba(255, 255, 255, 1);
}

.cat-block .category:nth-of-type(1) {
  border-radius: 10px 0 0 10px;
  padding-left: 14px;

}

.cat-block .category:nth-of-type(4) {
  border-radius: 0 10px 10px 0;
  padding-right: 14px;
}



#первый
#последующий
#следующий
за ним
#последний





Ответ 2


Важно понимать, что есть свойства, которые не анимируются через transition. Прежде
всего это свойства со значениями в виде текста, например display: none. С другой стороны,
свойства имеющие численные значения, например, opacity: 1 являются анимируемыми.

Исходя из этого вам нужно так переделать свой код, чтобы появление иконки было задано
анимируемыми свойствами. Например можно задать отрицательный margin-left, а по наведению
мыши задавать ему нулевое значение. Тогда иконка будет как бы выезжать слева.

Надеюсь принцип понятен?

четверг, 23 января 2020 г.

Как ведут себя inline-block элементы

#html #display


Здравствуйте, у меня возник вопрос по поводу поведения элементов на странице, с чередованием
свойства display:block;и display:inline-block;. Я создал 3 дива и в каждый поместил
еще по 3 div, нужно сделать так, что бы было возможно распологать как угодно внутренние
div, но что бы внешние div не меняли свою позицию. Собственно я думал, что в этом никаких
проблем не будет, но почему-то при разных комбинациях этого самого display: внешние
div блоки начали вмещаться по вертикали, почему это происходит, ведь если я правильно
понимаю, display:inline-block должен везти себя просто как строка и не зависеть от
того, что в нем находится, аналогично с просто display:block. Что я упускаю? Как же
все таки ведут себя блоки, стилизованные таким образом?



.container {
  width: 200px;
  height: 200px;
  display: inline-block;
}
.content {
  width: 20%;
  height: 20%;
  display: inline-block;
}
body,
div {
  margin: 0px;
  padding: 0px;
}

Ответы

Ответ 1


Чтобы исправить, задайте vertical-align для контейнеров, например, top.



.container {
  width: 200px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}
.content {
  width: 20%;
  height: 20%;
  display: inline-block;
}
body,
div {
  margin: 0px;
  padding: 0px;
}

четверг, 2 января 2020 г.

Конфликт двух input и display: none

#html #css #input #display


Сделал табы (вкладки) через inputы типа radio потом, внутри этих вкладок, есть input
уже типа text. Так вот, первые инпуты скрыл через display:none, проблема в том, что
скрылись и вторые инпуты, которые тип текст имеют. 



/*Табы*/
/* Базовый контейнер табов */
.tabs {
  min-width: 30%;
  max-width: 80%;
  padding: 0px;
  margin: 0 auto; 
}
/* стили секций с содержанием */
section {
  display: none;
  padding: 15px;
  background: #fff;
  border-top: 5px solid #3498db;
  width: 100%;
}
.tabs input {
  display: none;
}
/* стили вкладок (табов) */
.tabs label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #aaa;
}
/* шрифт-иконки от Font Awesome в формате Unicode */
.tabs label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}
.tabs label[for*="1"]:before {
  content: "\f0e0";
}
.tabs label[for*="2"]:before {
  content: "\f155";
}
.tabs label[for*="3"]:before {
  content: "\f09d";
}

/* изменения стиля заголовков вкладок при наведении */
.tabs label:hover {
  color: #888;
  cursor: pointer;
}
/* стили для активной вкладки */
.tabs input:checked + label {
  color: #fff;
  border: none;
  border-top: 1px solid #009933;
  border-bottom: 1px solid #fff;
  background: #3498db;
}
/* активация секций с помощью переключателя :checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}
/* медиа запросы для различных типов носителей */  
@media screen and (max-width: 680px) {
  .tabs label {
    font-size: 0;
  }
 
  .tabs label:before {
    margin: 0;
    font-size: 18px;
  }
}
@media screen and (max-width: 400px) {
  .tabs label {
    padding: 15px;
  }
}

/*Работаем с формами*/
#form1 {
margin:1em 0;
padding-top:1%;

}
#form1 fieldset {
margin:0;
padding:0;
float:left;
display:inline;
width:40%;
margin-left:5%;
background: #fff;
border: none;
}		
#form1 p {margin:.5em 0;}
#form1 label {display:inline-block; border: none;}
#form1 input, #form1 textarea {
width:25%;
border:1px solid #777777;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
border-radius:.3em;
background:#fff;
padding:3px;
}
#form1 textarea {
height:5%;
overflow:auto;
}
#form1 p.submit {
clear:both;
padding:0 25px 20px 25px;
margin:0;
text-align:right;
}
#form1 button {
width:15%;
height:6%;
line-height:100%;
border:none;
background: #3498db;
color:#fff;
cursor:pointer;
text-align:center;
margin-left: 30%;
}

#form1 button:hover {
	background: #fff;
	color: #3498db;
	border: solid;
}

    			
    			Email
 
    			
    			Bank account
 
    			
    			Card
 				
 				
        			
					
           			Email adress:
                	
                	
					
					
				  
    			
        			
					
           			Name
                 	
           			Bank
                 	
					
					
    			 
    			
        			
					
           			Number
                 	
           			Type card
                 	
					
            		Message:

Ответы

Ответ 1


Вы скрываете все input'ы в блоке tabs:

.tabs input {
    display: none;
}


А нужно только дочерние (если я правильно понял):

.tabs > input {
    display: none;
}


Ответ 2


Скрывайте только радиокнопки

.tabs input[type=radio] {
    display: none;
}

четверг, 5 декабря 2019 г.

Как получить точную плотность пикселей на Android

#java #android #screen #display #dpi


Как можно на Android получить точную плотность пикселей?

Сейчас использую следующий код:

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
double x = Math.pow(dm.widthPixels / dm.xdpi, 2);
double y = Math.pow(dm.heightPixels / dm.ydpi, 2);
double screenInches = Math.sqrt(x + y);
Log.d("debug", "Screen inches : " + screenInches); 


Его минус в том, что dm.xdpi и dm.ydpi возвращают не точные значения плотности, а
табличную плотность, к которой наиболее близка реальная плотность.

В моем случае телефон 5 дюймов 720*1280, реальная плотность 294, но код выдает мне
плотность на уровне 320 и, как следствие, неверный размер экрана в дюймах. 

Как мне получить реальную плотность?

Ответы

Ответ 1


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

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


Ответ 2


Ох уж это разнообразие размеров экранов... 

Давайте разбираться как работает AIDA64. Нужно отдать им должное, у них очень большая
база устройств с еще не менее малым числом уточнений для конкретных моделей. У меня
получилось высчитать такие же значения для тестового телефона Xiaomi Redme Note 3 Pro.
Вот что у меня получилось:

    float my_LCD_Diagonal = 5.5f;

    WindowManager windowManager = activity.getWindowManager();
    Resources res = activity.getResources();
    Display display = null;
    DisplayMetrics displayMetrics = null;

    if(windowManager != null) {
        display = windowManager.getDefaultDisplay();
    }

    if(res != null) {
        displayMetrics = res.getDisplayMetrics();
    }

    if(display != null && displayMetrics != null) {
        float xdpi = displayMetrics.xdpi;
        float ydpi = displayMetrics.ydpi;

        if (Build.VERSION.SDK_INT >= 17) {
            Point point = new Point();
            display.getRealSize(point);
            screenWidthPx = point.x;
            screenHeightPx = point.y;
        }

        int roundedXdpi = Math.round(xdpi);
        int roundedYdpi = Math.round(ydpi);

        float diagonal_ppi= ((float)(Math.sqrt(((double)(screenWidthPx * screenWidthPx
+ screenHeightPx * screenHeightPx))) / (((double)SystemInfo.DB_LCD_Diagonal))));
        if(diagonal_ppi> 1f) {
            ydpi = diagonal_ppi;
            xdpi = diagonal_ppi;
        }

        if(screenWidthPx > 0 && screenHeightPx > 0 && xdpi > 1f && ydpi > 1f) {
            float xmm = (((float)screenWidthPx)) / xdpi * 25.4f;
            float ymm = (((float)screenHeightPx)) / ydpi * 25.4f;
            float diagonal_in_inch = (((float)Math.sqrt(((double)(xmm * xmm + ymm
* ymm))))) / 25.4f;
            String res_dpi = String.format(Locale.getDefault(), "%d %s", Math.round((((float)Math.sqrt(((double)(screenWidthPx
* screenWidthPx + screenHeightPx * screenHeightPx))))) / diagonal_in_inch), "dpi");
        }
   }


P.S. В результате получилось значение в res_dpi "401 dpi".

P.P.S. Ввел данные, которые привел автор вопроса, получил значение "294 dpi". Но
этот алгоритм будет работать не для всех моделей телефонов!!! Потому как должны быть
внесены поправки.

среда, 22 мая 2019 г.

Плавное появление элемента из display:none в inline

Интересует такая штука – как заставить блок расширяться плавно при наведении, то есть иконка становится видимой по мере того, как в течение анимации до конца выезжает кнопка справа?
body { font-family: "Roboto"; font-weight: 100px; } .cat-block { position: relative; display: inline-block; } .cat-block .category { background-color: rgba(255, 255, 255, 0); padding: 3px 8px 3px 8px; box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25); float: left; -webkit-transition: .2s ease-out; -o-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; margin: 0; z-index: 3; } .cat-block .category img { width: 13px; padding-right: 5px; display: none; } .cat-block .category:hover img { display: inline; } .cat-block .category a { font-size: 16px; font-weight: 300; color: #3b3b3b; text-align: right; text-decoration: none; } .cat-block .category:hover { box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25); background-color: rgba(255, 255, 255, 1); } .cat-block .category:active { background-color: rgba(255, 255, 255, 1); } .cat-block .category:nth-of-type(1) { border-radius: 10px 0 0 10px; padding-left: 14px; } .cat-block .category:nth-of-type(4) { border-radius: 0 10px 10px 0; padding-right: 14px; }

Ответ

@andrey-fedorov прав, сделать плавность с помощью css/display:none невозможно, это можно сделать при помощи jQuery например. А вот если изменять ширину от 0 до заданной, то с помощью css это сделать можно вот так:
body { font-family: "Roboto"; font-weight: 100px; } .cat-block { position: relative; display: inline-block; } .cat-block .category { background-color: rgba(255, 255, 255, 0); padding: 3px 8px 3px 8px; box-shadow: 0px 0px 35px 0px rgba(1, 2, 4, 0.25); float: left; -webkit-transition: .2s ease-out; -o-transition: .2s ease-out; -moz-transition: .2s ease-out; transition: .2s ease-out; margin: 0; z-index: 3; } .cat-block .category img { width: 0; padding-right: 5px; transition: .3s; } .cat-block .category:hover img { width:13px } .cat-block .category a { font-size: 16px; font-weight: 300; color: #3b3b3b; text-align: right; text-decoration: none; } .cat-block .category:hover { box-shadow: 0px 0px 21px 0px rgba(1, 2, 4, 0.25); background-color: rgba(255, 255, 255, 1); } .cat-block .category:active { background-color: rgba(255, 255, 255, 1); } .cat-block .category:nth-of-type(1) { border-radius: 10px 0 0 10px; padding-left: 14px; } .cat-block .category:nth-of-type(4) { border-radius: 0 10px 10px 0; padding-right: 14px; }

среда, 13 марта 2019 г.

Как ведут себя inline-block элементы

Здравствуйте, у меня возник вопрос по поводу поведения элементов на странице, с чередованием свойства display:block;и display:inline-block;. Я создал 3 дива и в каждый поместил еще по 3 div, нужно сделать так, что бы было возможно распологать как угодно внутренние div, но что бы внешние div не меняли свою позицию. Собственно я думал, что в этом никаких проблем не будет, но почему-то при разных комбинациях этого самого display: внешние div блоки начали вмещаться по вертикали, почему это происходит, ведь если я правильно понимаю, display:inline-block должен везти себя просто как строка и не зависеть от того, что в нем находится, аналогично с просто display:block. Что я упускаю? Как же все таки ведут себя блоки, стилизованные таким образом?
.container { width: 200px; height: 200px; display: inline-block; } .content { width: 20%; height: 20%; display: inline-block; } body, div { margin: 0px; padding: 0px; }

Ответ

Чтобы исправить, задайте vertical-align для контейнеров, например, top
.container { width: 200px; height: 200px; display: inline-block; vertical-align: top; } .content { width: 20%; height: 20%; display: inline-block; } body, div { margin: 0px; padding: 0px; }

пятница, 11 января 2019 г.

Конфликт двух input и display: none

Сделал табы (вкладки) через inputы типа radio потом, внутри этих вкладок, есть input уже типа text. Так вот, первые инпуты скрыл через display:none, проблема в том, что скрылись и вторые инпуты, которые тип текст имеют.
/*Табы*/ /* Базовый контейнер табов */ .tabs { min-width: 30%; max-width: 80%; padding: 0px; margin: 0 auto; } /* стили секций с содержанием */ section { display: none; padding: 15px; background: #fff; border-top: 5px solid #3498db; width: 100%; } .tabs input { display: none; } /* стили вкладок (табов) */ .tabs label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #aaa; } /* шрифт-иконки от Font Awesome в формате Unicode */ .tabs label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px; } .tabs label[for*="1"]:before { content: "\f0e0"; } .tabs label[for*="2"]:before { content: "\f155"; } .tabs label[for*="3"]:before { content: "\f09d"; } /* изменения стиля заголовков вкладок при наведении */ .tabs label:hover { color: #888; cursor: pointer; } /* стили для активной вкладки */ .tabs input:checked + label { color: #fff; border: none; border-top: 1px solid #009933; border-bottom: 1px solid #fff; background: #3498db; } /* активация секций с помощью переключателя :checked */ #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3 { display: block; } /* медиа запросы для различных типов носителей */ @media screen and (max-width: 680px) { .tabs label { font-size: 0; } .tabs label:before { margin: 0; font-size: 18px; } } @media screen and (max-width: 400px) { .tabs label { padding: 15px; } } /*Работаем с формами*/ #form1 { margin:1em 0; padding-top:1%; } #form1 fieldset { margin:0; padding:0; float:left; display:inline; width:40%; margin-left:5%; background: #fff; border: none; } #form1 p {margin:.5em 0;} #form1 label {display:inline-block; border: none;} #form1 input, #form1 textarea { width:25%; border:1px solid #777777; -moz-border-radius:.3em; -webkit-border-radius:.3em; border-radius:.3em; background:#fff; padding:3px; } #form1 textarea { height:5%; overflow:auto; } #form1 p.submit { clear:both; padding:0 25px 20px 25px; margin:0; text-align:right; } #form1 button { width:15%; height:6%; line-height:100%; border:none; background: #3498db; color:#fff; cursor:pointer; text-align:center; margin-left: 30%; } #form1 button:hover { background: #fff; color: #3498db; border: solid; }

Email Bank account Card

Ответ

Вы скрываете все input'ы в блоке tabs
.tabs input { display: none; }
А нужно только дочерние (если я правильно понял):
.tabs > input { display: none; }

coding

Страницы

Поиск по вопросам

суббота, 7 марта 2020 г.

Плавное появление элемента из display:none в inline

Ответы

Ответ 1

Ответ 2

четверг, 23 января 2020 г.

Как ведут себя inline-block элементы

Ответы

Ответ 1

четверг, 2 января 2020 г.

Конфликт двух input и display: none

Ответы

Ответ 1

Ответ 2

четверг, 5 декабря 2019 г.

Как получить точную плотность пикселей на Android

Ответы

Ответ 1

Ответ 2

среда, 22 мая 2019 г.

Плавное появление элемента из display:none в inline

Ответ

среда, 13 марта 2019 г.

Как ведут себя inline-block элементы

Ответ

пятница, 11 января 2019 г.

Конфликт двух input и display: none

Ответ

Страницы

Поиск по вопросам

суббота, 7 марта 2020 г.

Ответы

Ответ 1

Ответ 2

четверг, 23 января 2020 г.

Ответы

Ответ 1

четверг, 2 января 2020 г.

Ответы

Ответ 1

Ответ 2

четверг, 5 декабря 2019 г.

Ответы

Ответ 1

Ответ 2

среда, 22 мая 2019 г.

Ответ

среда, 13 марта 2019 г.

Ответ

пятница, 11 января 2019 г.

Ответ

суббота, 7 марта 2020 г.

четверг, 23 января 2020 г.

четверг, 2 января 2020 г.

четверг, 5 декабря 2019 г.

среда, 22 мая 2019 г.

среда, 13 марта 2019 г.

пятница, 11 января 2019 г.