CSSを使用してカスタムカーソルを作成する方法
.cur(Internet Explorerの場合)、. gif、.png(Chrome、Firefox、Safariの場合)などの拡張子を持つカスタムカーソルイメージを作成し、CSSカーソルプロパティを使用して要素に適用し、URLに設定することができます。さらに、auto、default、pointerなどの一般的なカーソル値。
解決策
Selector { cursor: url("/*path to custom cursor file*/"), generic cursor; }
例
例を使用してカスタムカーソルを作成する方法を見てみましょう-
<!DOCTYPE html> <html> <head> <title>Custom Cursor Using CSS</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #tech1 { cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto; } #tech2 { cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto; } </style> </head> <body> <form> <fieldset> <legend>Custom Cursor Using CSS</legend> <h1>Learn</h1> <input type="button" id="tech1" value="DBMS"> <input type="button" id="tech2" value="Python"> </fieldset> </form> </body></html>
出力
上記のコードの出力は次のとおりです-
「DBMS」にカーソルを合わせる ボタン-
「Python」にカーソルを合わせる ボタン-
-
CSSを使用してテキストを含むコメントボックスを作成する方法
コメントボックスは、clip-pathプロパティを使用して作成できます 構文 CSSclip-pathプロパティの構文は次のとおりです- Selector { clip-path: /*value*/ } 例 次の例は、CSSを使用してコメントボックスを作成する方法を示しています。 <!DOCTYPE html> <html> <head> <style> .cb {
-
CSSを使用してWebサイトのダーク/ライトモードを作成する方法
ページのテキストの色と背景色を変更することで、Webサイトにダーク/ライトモードを追加できます。 構文 次の構文を使用して、ダークモードを適用できます。 Selector { color: white; background-color: black } 例 <!DOCTYPE html> <html> <head> <style> div {