Chcę utworzyć przycisk zamykania, używając tylko CSS.
Jestem pewien, że nie jestem pierwszym, który to robi, więc czy ktoś wie, która czcionka ma „x” tej samej szerokości co wysokość, aby można było używać jej w różnych przeglądarkach, by wyglądała jak przycisk zamykania?
Lucida Sans Unicode
aArial Unicode MS
także obsługuję takie symbole Unicode. Jeśli nie użyjesz czcionki obsługującej te znaki w niektórych przeglądarkach (zwłaszcza w starym IE), otrzymasz prostokąty wskazujące nieobsługiwane symbole. Do takich symboli używam uproszczonej wersji DejaVu.Co powiesz na użycie w tym celu znaku x (symbol mnożenia)
×
w HTML?„x” (litera) nie powinno być używane do reprezentowania niczego poza literą X.
źródło
×
×
lub×
(to samo) znak mnożenia U + 00D7× ten sam znak o dużej gramaturze czcionki
⨯
⨯
Produkt Gibbs U + 2A2F✖
✖
U + 2716 ciężki znak mnożeniaIstnieje również emoji ❌, jeśli go obsługujesz. Jeśli nie, po prostu zobaczyłeś kwadrat =
❌
Zrobiłem ten prosty przykład kodu na Codepen, kiedy pracowałem z projektantem, który poprosił mnie, żebym pokazał jej, jak to będzie wyglądać, gdy zapytam, czy mogę zastąpić twój przycisk zamykania kodowaną wersją, a nie obrazem.
źródło
HTML
✕
✕
✓✓
✖
✖
✔✔
✗
✗
✘
✘
×
×
×
CSS
Jeśli chcesz użyć powyższych znaków z CSS (jak np .: in
:before
lub:after
pseudo), po prostu użyj uciekającej\
wartości Unicode HEX, na przykład:Użyj przykładów dla różnych języków :
✕
HTML'\2715'
CSS jak np .:.clear:before { content: '\2715'; }
'\u2715'
Ciąg JavaScriptźródło
✕ to kolejny świetny, niezbyt gruby. Kod HTML jest
✕
, lub2715
w hex.źródło
Jak wskazał @Haza, można użyć symbolu czasu. Twitter Bootstrap mapuje to na ikonę zamykania w celu odrzucenia treści, takich jak modały i alerty.
źródło
Wolę Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
Ikona, której szukasz, to
fa-times
. Korzystanie z tego jest tak proste:Fiddle tutaj
źródło
Jest to prawdopodobnie pedanteria, ale jak dotąd nikt tak naprawdę nie podał rozwiązania „utworzenia przycisku zamykającego tylko przy użyciu CSS”. tylko. Proszę bardzo:
http://codepen.io/anon/pen/VaWqYg
źródło
jest jeszcze jeden nie wymieniony tutaj - fajnie cienki - jeśli potrzebujesz tego rodzaju wyglądu dla swojego projektu: ╳
źródło
×
ifont-family: Garamond, "Apple Garamond";
spraw, by było wystarczająco dobre. Czcionka Garamond jest cienka i bezpieczna dla sieciźródło
To mi ładnie działa:
źródło
Zapomnij o czcionce i użyj obrazu tła!
Będzie to bardziej dostępne dla użytkowników odwiedzających stronę za pomocą czytnika ekranu.
źródło
To jest dla ludzi, którzy chcą, aby ich
X
małe / duże i czerwone!HTML:
CSS:
źródło
Możesz użyć tekstu, który jest dostępny tylko dla czytników ekranu, umieszczając go w zakresie, który ukrywasz w przystępny sposób. Umieść x w CSS, który nie może być odczytany przez czytniki ekranu, więc nie pomyli, ale jest widoczny na stronie, a także dostępny dla użytkowników klawiatury.
źródło
Za pomocą nowoczesnych przeglądarek możesz obrócić znak +:
następnie po prostu umieść następujący kod HTML tam, gdzie potrzebujesz:
źródło
×
jest lepiej niż✖
jak✖
zachowuje się dziwnie w EDGE i Internet Explorer (testowane w IE11). Nie ma odpowiedniego koloru i jest zastąpiony przez „emoji”źródło