Css крестик: Крестик закрыть на чистом CSS – Attention Required! | Cloudflare

Кнопки закрытия на 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

24.04.2017 Автор:alex

На полях ввода, которые типа «поиск» в 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

Перевод — Дежурка

Смотрите также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *