Кнопки закрытия на CSS
.cl-btn-1 {
margin: 20px;
position: relative;
display: flex;
justify-content: center;
height: 112px;
}
.cl-btn-1 div {
width: 100px;
height: 100px;
position: absolute;
background-image: radial-gradient(#FFF, #BFE2FF);
border-radius: 50%;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
border: 6px solid #337AB7;
cursor: pointer;
}
.cl-btn-1 div > span {
background-color: #337AB7;
display: block;
height: 12px;
border-radius: 6px;
position: relative;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
position: absolute;
top: 50%;
margin-top: -6px;
left: 18px;
width: 64px;
}
.cl-btn-1 div > span span {
display: block;
background-color: #215b8c;
width: 12px;
height: 12px;
border-radius: 6px;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
position: absolute;
left: 0;
top: 0;
}
.cl-btn-1 div > span.left {
transform: rotate(45deg);
transform-origin: center;
}
.cl-btn-1 div > span.left .circle-left {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
margin-left: 0;
}
.cl-btn-1 div > span.left .circle-right {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
margin-left: 52px;
}
.cl-btn-1 div > span.right {
transform: rotate(-45deg);
transform-origin: center;
}
.cl-btn-1 div > span.right .circle-left {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
margin-left: 0;
}
.cl-btn-1 div > span.right .circle-right {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
margin-left: 52px;
}
.cl-btn-1 div:hover > span {
background-color: #215b8c;
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cl-btn-1 div:hover > span span {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
background-color: #337AB7;
}
.cl-btn-1 div:hover > span.left .circle-left {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
margin-left: 52px;
}
.cl-btn-1 div:hover > span.left .circle-right {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
margin-left: 0;
}
.cl-btn-1 div:hover > span.right .circle-left {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
margin-left: 52px;
}
.cl-btn-1 div:hover > span.right .circle-right {
transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
margin-left: 0;
}
На одну картинку меньше. Спецсимвол ×
Автор: Татьяна Шкабко, Александр Головко и Егор Скорняков Дата публикации: 07.10.2010
На многих сайтах есть разнообразные всплывающие окошки. Как правило, они имеют кнопочку «закрыть» — традиционно это крестик. Обычно этот крестик вырезается из макета картинкой, но такой метод имеет определенные минусы:
- Дополнительная картинка — лишнее обращение к серверу.
- Картинка начнет грузиться только в момент открытия окошка, т.е. для пользователя сразу ее не будет, а потом вдруг появиться — не очень красивый эффект. Правда для его устрания можно использовать предварительную загрузку изображений или подклеить картинки для всплывающего окна к картинкам, загружаемым сразу, с помощью спрайтов. В общем дополнительная морока.
- Если окно имеет неравномерный фон, тогда значок закрытия нужно делать полупрозрачным, т.е. использовать формат png24, что приводит к дополнительным проблемам с IE6.
В некоторых случаях от этих минусов можно избавится, используя для закрытия всплывающего окна вместо картинки спецсимвол ×. Подобрав правильный шрифт, размер, жирность и цвет, можно добиться хорошего сходства с макетом.
| Символ × (font-family:Georgia, font-size:20px; font-weight:normal; color:#CE7BE5;) | Символ × (font-family:'Arial Black', font-size:14px; font-weight:bold; color:#000;) |
Для облегчения подбора мы создали специальную табличку.
Тут приведены варианты спецсимвола × для разных начертаний безопасных шрифтов:
Размер шрифта (px): 10px12px14px16px18px20px22px24px26px28px30px32px34px38px38px| font-family | normal | bold | normal italic |
bold italic |
|---|---|---|---|---|
| Arial | × | × | × | × |
| Arial Black | × | × | × | × |
| Comic Sans MS | × | × | × | × |
| Courier New | × | × | × | × |
| Georgia | × | × | × | × |
| Impact | × | × | × | × |
| Times New Roman | × | × | × | × |
| Trebuchet MS | × | × | × | × |
| Verdana | × | × | × |
Плюсы метода:
- Пользователь может закрыть всплывающее окно сразу и не должен ждать загрузки картинки;
- Уменьшается количество картинок — меньше запросов на сервер, быстрее загрузка;
- Не нужно возиться с прозрачностью для IE6.
Минусы:
- Нужно вручную подбирать параметры шрифта, что может занять дополнительное время;
- Не во всех случаях можно подобрать похожий значок.
Заметка
Для того, чтобы указатель мыши имел привычный вид, не забудь прописать cursor: pointer; для крестика.
Вывод
Метод не претендует на универсальнось, каждый отдельный случай требует индивидуального решения. Тем не менее, идея заменить растровую картинку значком заслуживает внимания.
По теме
Скрыть крестик в input в crome , ie | ftask.ru
На полях ввода, которые типа «поиск» в HTML5 браузерах добавляются некоторые маленькие синие «X» в правом верхнем углу, что на самом деле является кнопкой. Эта кнопка очистит ввод поиска пользователя , если пользователь нажимает на «X», или если он нажимает клавишу ESC на клавиатуре. Это , конечно, полезная функция, но для некоторых стилизованных форм поиска она просто не подходит и может выглядеть весьма некрасиво. Всё еще ищите чтобы отключить крестик в хроме?
Вот как это выглядит.
Вот css Для скрытия крестика 1) в ie 2) хроме внутри инпут:
1)
input[type=text]::-ms-clear { display: none; width : 0; height: 0; } input[type=text]::-ms-reveal { display: none; width : 0; height: 0; }
input[type=text]::-ms-clear { display: none; width : 0; height: 0; } input[type=text]::-ms-reveal { display: none; width : 0; height: 0; } |
2)
input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; }
input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration { display: none; } |
Я испытал это в следующих браузерах IE, Firefox, Chrome и Opera. Если суммировать этих 2 кода, то отключим крестик почти во всех браузерах.
есть еще такая модификация кода:
input[type=text]::-ms-clear { display: none; width : 0; height: 0; } input[type=text]::-ms-reveal { display: none; width : 0; height: 0; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; }
input[type=text]::-ms-clear { display: none; width : 0; height: 0; } input[type=text]::-ms-reveal { display: none; width : 0; height: 0; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } |
Создание игры крестики-нолики с использованием только CSS
В этом уроке мы познакомимся с интересными возможностями CSS и создадим игру крестики-нолики на чистом CSS. Эта игра предназначена для двух игроков, играющих поочередно, для крестика нужно нажать один раз, для нолика — два раза.
Основные особенности:
- Для состояний ячеек используются скрытые переключатели-флажки и подписи. Неопределенное состояние означает пустую клетку, отмеченное — крестик, неотмеченное — нолик.
- При запуске небольшой скрипт, единственный JavaScript в этом примере, задает всем переключателям-флажкам неопределенное состояние.
- Используются псевдоклассы :checked (отмеченный) и :indeterminate (неопределенный) и родственные и соседние селекторы для изменения состояний ячеек и вывода информации о победителе.
- Когда кто-то нажимает на переключатель-флажок или в этом случае на его подпись, меняется состояние с неопределенного или на отмеченное, или на неотмеченное, в зависимости от того, сколько раз было нажато.
Как дополнительное преимущество в эти крестики-нолики можно играть с клавиатуры, выбирая клеточку табуляцией и используя пробел для нажатия, хотя, вероятно, эта игра не подойдет для программы — экранного диктора.
Для разметки гораздо лучше подошел бы элемент таблицы, но мы решили пожертвовать в этом случае структурой, чтобы пример стал проще.
Все современные версии браузеров поддерживают неопределенное состояние, но в некоторых старых версиях браузеров наш пример не работает, например, в некоторых старых браузерах на движке Webkit из-за неправильной работы с родственными и соседними селекторами. Эта демонстрация должна работать даже в браузере Internet Explorer версии 9, хотя мы не проверяли.
В некоторых современных браузерах с некоторыми настройками при однократном нажатии появляется не крестик, а нолик, а при двукратном — не нолик, а крестик, но это не ухудшает функциональность игры.
Демонстрация работы
Код HTML
<input type="checkbox" /><label for="a11">Top left</label> <input type="checkbox" /><label for="a12">Top center</label> <input type="checkbox" /><label for="a13">Top right</label> <input type="checkbox" /><label for="a21">Middle left</label> <input type="checkbox" /><label for="a22">Middle center</label> <input type="checkbox" /><label for="a23">Middle right</label> <input type="checkbox" /><label for="a31">Bottom left</label> <input type="checkbox" /><label for="a32">Bottom center</label> <input type="checkbox" /><label for="a33">Bottom right</label> <p>State: </p>
Код JavaScript
var checkboxes = document.getElementsByTagName('input');
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].indeterminate = true;
}
Код CSS
input {
position:absolute;
clip: rect(0,0,0,0);
}
label {
display:block;
width:30px;
height:50px;
padding:10px 20px;
outline:1px solid #bbb;
background:white;
float:left;
color:transparent;
font-size:50px;
line-height:1;
overflow:hidden;
}
input:focus + label {
background:#ffd;
}
label:nth-of-type(3n + 1) {
clear:left
}
label:before {
color:black;
}
input:checked + label:before {
content: '×';
color: green;
}
input:not(:checked) + label:before {
content: '○';
color: blue;
}
input:indeterminate + label:before {
content: ' ';
}
p {
clear:both;
padding:10px 0;
font:150% sans-serif;
}
p:after {
content: 'Tie';
font-weight:bold;
}
input:indeterminate + label ~ p:after {
content: 'Still playing';
}
input:nth-of-type(3n+1):checked + label + input:checked + label + input:checked ~ p:after,
#a11:checked ~ #a21:checked ~ #a31:checked ~ p:after,
#a12:checked ~ #a22:checked ~ #a32:checked ~ p:after,
#a13:checked ~ #a23:checked ~ #a33:checked ~ p:after,
#a11:checked ~ #a22:checked ~ #a33:checked ~ p:after,
#a13:checked ~ #a22:checked ~ #a31:checked ~ p:after {
content: 'X won';
color:green;
}
input:nth-of-type(3n+1):not(:checked):not(:indeterminate) + label + input:not(:checked):not(:indeterminate) + label + input:not(:checked):not(:indeterminate) ~ p:after,
#a11:not(:checked):not(:indeterminate) ~ #a21:not(:checked):not(:indeterminate) ~ #a31:not(:checked):not(:indeterminate) ~ p:after,
#a12:not(:checked):not(:indeterminate) ~ #a22:not(:checked):not(:indeterminate) ~ #a32:not(:checked):not(:indeterminate) ~ p:after,
#a13:not(:checked):not(:indeterminate) ~ #a23:not(:checked):not(:indeterminate) ~ #a33:not(:checked):not(:indeterminate) ~ p:after,
#a11:not(:checked):not(:indeterminate) ~ #a22:not(:checked):not(:indeterminate) ~ #a33:not(:checked):not(:indeterminate) ~ p:after,
#a13:not(:checked):not(:indeterminate) ~ #a22:not(:checked):not(:indeterminate) ~ #a31:not(:checked):not(:indeterminate) ~ p:after{
content: 'O won';
color:blue;
}Автор урока Lea Verou
Перевод — Дежурка
Смотрите также: