Поиск по этому блогу

пятница, 11 октября 2013 г.

Справочник полезных рецептов для CSS3 и HTML5


1. Как сделать текстовое поле не редактируемым (how make input textfield non-editable)

Для того, чтобы сделать текстовое поле не редактируемым не нужно применять классы CSS, достаточно использовать атрибут readonly (можно писать так readonly="readonly" )
<input type="text" value="some text" class="gray_text" readonly>

2. Как сделать указатель мыши как указатель с пальцем при наведении на объект (how to change cursor to finger pointer when a user hovers over a object)

Есть элемент, при наведении на который необходимо менять курсор мыши на указатель.
<div class="menu_general">
  <p><a id="to_account_and_settings" class="ui-link">
    <img src="img/menu/account_settings.png"/>
  </a></p>
 
  <p><a id="to_expansions_extras" class="ui-link">
    <img src="img/menu/expansions_extras.png"/>
  </a></p>
 
  <p><a id="to_how_to_play" class="ui-link">
    <img src="img/menu/how_to_play.png"/>
  </a></p>
</div>

Для того, чтобы менять курсор необходимо описать в классе ui-link следующее cursor: pointer
.menu_general .ui-link {
    cursor: pointer;
}


3.  Как добавить в конец строки, которая не входит в отведенное ей место, многоточие

Создаем класс, в котором описываем добавление многоточия
.clip {
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    text-overflow: ellipsis; /* Добавляем многоточие */
}

Теперь там, где нам нужно чтобы добавлялось многоточие в конце строки используем этот класс
<p class='clip'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
consequat.</p>

4. Как выровнять div вертикально внутри другого div

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered
    </div>
  </div>
</div>

Пример http://jsfiddle.net/SVJaK/


Комментариев нет:

Отправить комментарий