Как сделать кнопку прозрачным в css

Добавлено: 18.08.2017, 13:33 / Просмотров: 35592

[w3.org]

visibility: visible | hidden | collapse | inherit

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

ВНИМАНИЕ! Не все примеры работают в браузере Google Chrome. Мне было лень прописывать свойству animation префиксы -webkit-.

Демонстрация Занимаемое пространство Видимость потомков Доступность Поддержка transition и animation <div>div <b>вложенный</b></div> <div></div>

div вложенный

div {visibility: hidden;} div b, div:hover {visibility: visible;} + + -+ div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {visibility: hidden;} }

div вложенный

div {opacity: 0;} div:hover {opacity: 1;} + - + div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {opacity: 0;} }

div вложенный

div {transform: scale(0, 0);} div:hover {transform: none;} + - - div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {transform: scale(0, 0);} }

div вложенный

div {height: 0;} div:hover {height: 3em;} -+ + -+ div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {height: 0;} }

div вложенный

div { clip: rect(0, 0, 0, 0); position: absolute; } div:hover {clip: auto;} - - - div {animation: animaciya 8s infinite; position: absolute;} @keyframes animaciya { 0% {clip: rect(0, 100px, 3em, 0);} 80%, 100% {clip: rect(0, 0, 0, 0);} }

div вложенный

div {display: none;} div:hover {display: block;} - - - div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {display: none;} }
С opacity: 0; элемент полностью прозрачен. Дочерние теги, как и сам родитель, доступны, они, например, могут получать фокус.

С transform: scale(0, 0); элемент полностью сужен, а значит и недоступен. Он продолжает занимать то же пространство, что и при transform: scale(1, 1);.

С height: 0; коробка блока равна сумме margin + padding + border [см. боксовая модель HTML]. Если они не заданы, у блока останется его блочность, иначе говоря, строчные элементы, следующие после него, будут писаться с новой строки. Содержимое тега доступно, но, поскольку блок не имеет высоты, на него наезжают нижестоящие элементы (см. тут второй пример). Скрыть содержимое можно с помощью свойства overflow.

Свойство clip работает только в паре с position: absolute;. При clip: rect(0, 0, 0, 0); элемент обрезан со всех сторон и аналогичен display: none;.

При display: none; веб-страница формируется так, словно элемента вместе с его содержимым нет.

Из перечисленных transition и animation не работает с display, height: auto; и clip: auto;.

На CSS можно добиться поставленного результата несколькими способами. Так, например, отображения, аналогичного display: none;, коли добавить position: absolute; или position: fixed;.

навестинавести

<div class="kak-display">навести<div></div>навести</div>

Как сделать текст невидимым на HTML странице

И Google, и Яндекс наказывают за текст, который пользователи никогда не увидят. У них есть свои браузеры, а значит технология, которая позволяет выявить это. То есть нужно подумать каким образом и в каком случае скрытый текст будет виден посетителю веб-проекта, например, в результате нажатия на кнопку (см. как сделать такую кнопку) или в виде всплывающего сообщения.

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

Следует учесть, что скрытый текст не всегда добавляется с целью обмана. Например, если на вашем сайте имеется контент, к которому сложно получить доступ поисковым системам (JavaScript, изображения, Flash-файлы и т. п.), вы можете добавить текстовое описание для этих элементов, чтобы сделать сайт более удобным для индексирования. [support.google.com]

В любом случае, нужно прописать изображению атрибут alt. По нему Google тоже передаёт анкорный вес.

Помимо способов, описанных выше, текст можно сделать прозрачным. Его можно выделить:

div будет прозрачным div

div b {color: blue;}

div будет прозрачным div

div b {color: blue;}

Или очень маленьким:

div невидимый текст div

div b {font-size: medium;}

visibility: collapse; для таблицы и нет. Есть ли разница?

visibility: collapse; для всех элементов, кроме тегов таблицы работает аналогично visibility: hidden;, что полезно для долгого transition. Этим способом был реализован этот вариант таб-вкладок.

исчезающий текст

<style> #raz div { visibility: collapse; transition: 0s 999999s; } #raz input:nth-of-type(1):focus div { visibility: visible; transition: 0s; } #raz input:nth-of-type(2):focus div { visibility: hidden; transition: 0s; } </style> <div id="raz"><input type="button" value="вкл"/><input type="button" value="выкл"/><div>исчезающий текст</div></div>

visibility: collapse; для тегов tr, col, thead, tfoot, tbody перестраивает таблицу, при этом учитывая размеры удалённых элементов. Не поддерживается Гугл Хром. Для остальных могут быть проблемы, когда между ячейками одна и та же граница.

1_1 1_2 1_3 2_1 2_2 2_3 Длинная строка 3_1 Длинная предлинная строка 3_2 3_3 4_1 4_2 4_3 <table class="demotable1"> <tr><td>1_1<td>1_2<td>1_3 <tr><td>2_1<td>2_2<td>2_3 <tr><td>Длинная строка 3_1<td>Длинная предлинная строка 3_2<td>3_3 <tr><td>4_1<td>4_2<td>4_3 </table>

Если объединить ячейки столбца и строки

1_1 1_2 1_3 1_4 2_1 2_2 2_4 3_1 3_4 4_1 4_4 5_1 5_2 5_3 5_4 <table class="demotable2"> <tr><td>1_1<td>1_2<td>1_3<td>1_4 <tr><td>2_1<td rowspan="3" colspan="2">2_2<td>2_4 <tr><td>3_1<td>3_4 <tr><td>4_1<td>4_4 <tr><td>5_1<td>5_2<td>5_3<td>5_4 </table>

Аналогично для col

1_1 1_2 1_3 2_1 Высокая
превысокая
строка
2_2 2_3 3_1 3_2 3_3 <table class="demotable4"> <col> <col> <tr><td>1_1<td>1_2<td>1_3 <tr><td>2_1<td>Высокая<br>превысокая<br>строка<br>2_2<td>2_3 <tr><td>3_1<td>3_2<td>3_3 </table>
Источник: http://shpargalkablog.ru/2012/12/display-visibility-css.html


Закрыть ... [X]

Форма обратной связи для сайта с отправкой на почту Как приготовить красивый торт своими руками


Как сделать кнопку прозрачным в css Фоновая картинка
Как сделать кнопку прозрачным в css Gif, Png или Jpg
Как сделать кнопку прозрачным в css Cached
Как сделать кнопку прозрачным в css M Гид покупателя. Выбираем внешний
Как сделать кнопку прозрачным в css Umaker профессиональная школа диджеинга
Как сделать кнопку прозрачным в css Букет из мягких игрушек и конфет своими руками. Мастер-класс с
Букеты из мягких игрушек и конфет Дача своими руками Идеи для дачного строительства и Инструкция как сделать аквариум из оргстекла своими руками Как оформить палисадник перед домом своими Как сделать красивую прическу самой себе: 18 причесок