Z miško označeno besedilo na spletni strani

oznaceno_besedilo_thumb
S tem vodičem se boste naučili urejati besedilo, ki ga obiskovalci označijo z miško. Besedilu lahko določite svoje barvno ozadje in svojo barvo besedila in se s tem znebite privzete temno modre barve. V vodiču so prikazani trije različni načini uporabe.

 

PRIKAZ - z miško označite besedilo v posamezni vrstici

 

 

HTML in CSS koda:

 

<html>
<head>
<style type="text/css">
::selection { background: #3399ff; color: #fff; }
::-moz-selection { background: #3399ff; color: #fff; }

p::selection { background: #000; color: #fff; }
p::-moz-selection { background: #000; color: #fff; }

.rdeca::selection { background: #ff0000; color: #fff; }
.rdeca::-moz-selection { background: #ff0000; color: #fff; }
</style>
</head>

<body>

Besedilo Besedilo ...
<br />
<p>Besedilo Besedilo ... </p>
<br />
<p class="rdeca">Besedilo Besedilo ... </p>
</body>
</html>

 

PRIKAZ zgornje kode

 

Razlaga kode:

::selection je koda, ki se uporablja za brskalnik Safari, medtem, ko se ::-moz-selection uporablja za brskalnik Firefox. Kot si verjetno lahko mislite Internet Explorer še ne podpira te CSS možnosti (tipično).

 

Če uporabimo le ::selection in ::-moz-selection določimo ozadje in barvo vsemu besedilu na strani (ko je označeno).

 

Če uporabimo p::selection in p::-moz-selection določimo ozadje in barvo vsemu besedilu na strani, ki je med značkama <p> in </p>, se pravi vsem odstavkom (ko je besedilo označeno).

 

Če uporabimo poseben razred (npr. rdeca) .rdeca::selection in .rdeca::-moz-selection pa določimo ozadje in barvo le HTML elementom, ki imajo določen razred (npr. class="rdeca").

 

 

S tem CSS trikom lahko še popestrite svojo spletno stran in jo naredite še bolj pestro.

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.