CSS3 - Obrisi (Outline)

Svojstva outline u CSS-u

CSS svojstva outline omogućavaju vam definisanje područja oko okvira elementa. Outline je linija koja se crta odmah izvan ivice elemenata. Obrisi se obično koriste za označavanje fokusa ili aktivnih stanja elemenata kao što su: dugmad, veze, polja obrazca itd. Sljedeći dio opisuje kako postaviti stil, boju i širinu obrisa.


Obrisi - granica (Outlines Vs Borders)

Outline izgleda vrlo sličan border-u, ali se razlikuje od border-a na sljedeće načine:

  • Outline ne zauzimaju prostor jer se uvijek stavljaju na vrh okvira elementa zbog čega se mogu preklapati s ostalim elementima na stranici.
  • Za razliku od boreder-a, outline nam neće dopustiti da postavimo svaku ivicu na različitu širinu ili da postavimo različite boje i stilove za svaku ivicu. Obris je isti sa svih strana.
  • Outline nemaju uticaje na okolne elemente, osim preklapanja.
  • Za razliku od boreder-a, outline ne mijenjaju veličinu ili položaj elementa.
  • Outline može biti nepravougli, ali ne mogu stvoriti kružne konture.

Razumijevanje različitih stilova outline

Svojstvo stila outline postavlja stil outline elementa kao što su: solid, dotted, itd. Svojstvo outline-style može imati jednu od sljedećih vrijednosti: solid, dashed, dotted, double, inset, outset, groove, i ridge. Sada, pogledajmo sljedeću ilustraciju, ona vam daje osjećaj razlika između tipova stilova outline.





Vrijednost none ne prikazuje konture. Vrijednosti inset, outset, groove i ridge stvaraju efekt sličan 3D-u koji u osnovi zavisi od vrijednosti boje konture. To se obično postiže stvaranjem "sjene" od dvije boje koje su malo svjetlije i tamnije od boje outline. Isprobajmo sljedeći primjer i pogledajte kako to u osnovi funkcioniše: 

h1 {
    outline-style: dotted;
}
p {
    outline-style: ridge;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS outline-style svojstva</title>
<style>      
    p {
        outline-style: double;
        outline-width: 5px;
    }
</style>
</head>
<body>
    <p><strong>Upozorenje:</strong> Internet Explorer 7 i starije 
    verzije ne podržavaju svojstvo outline. IE8 podržava svojstva outline
    samo ako je <code><!DOCTYPE></code> naveden.</p>
</body>
</html>

Postavljanje širine konture

Svojstvo outline-width specifikuje širinu outline koji se dodaje elementu. Isprobajmo sljedeći primjer da biste razumjeli kako to zapravo radi: 

p {
    outline-style: dashed;
    outline-width: 10px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS outline-width svojstva</title>
<style>      
    p {
        outline-style: dotted;
        outline-width: thick;
    }
</style>
</head>
<body>
    <p><strong>Upozorenje:</strong> IInternet Explorer 7 i starije 
    verzije ne podržavaju svojstvo obrisa. IE8 podržava svojstva obrisa 
    samo ako je <code><!DOCTYPE></code> naveden.</p>
</body>
</html>

Određivanje boje outline-a

Svojstvo outline-color postavlja boju outline. Ovo svojstvo prihvata iste vrijednosti kao one koje se koriste za svojstvo boje. Sljedeća pravila stila dodaju čvrst outline plave boje oko paragrafa. 

p {
    outline-style: solid;
    outline-color: #0000ff;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PrimjerCSS outline-color svojstva</title>
<style>      
    p {
        outline-style: solid;
        outline-color: #0000ff;
    }
</style>
</head>
<body>
    <p><strong>Upozorenje:</strong> Internet Explorer 7 i starije 
    verzije ne podržavaju svojstvo outline. IE8 podržava svojstva outline
    samo ako je naveden <code><!DOCTYPE></code>.</p>
</body>
</html>

Okvirna stenografska svojstva

Svojstvo outline skraćeno je svojstvo za postavljanje jednog ili više pojedinačnih svojstava outline-a style-outline, outline-width i outline-color u jednom pravilu. Pogledajmo sljedeći primjer da bismo razumjeli kako to funkcioniše: 

p {
    outline: 5px solid   #ff00ff;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer skraćenice svojstva CSS outline</title>
<style>      
    p {
        outline: 5px solid #9acd32;
    }
</style>
</head>
<body>
    <p>Volim da učim CSS3 uz IT TUTORIJALE.</p>
</body>
</html>

Ako je vrijednost za pojedinačno svojstvo outline izostavljena ili nije navedena tokom postavljanja kratkog svojstva outline, umjesto njega će se koristiti zadana vrijednost za to svojstvo, ako postoji. Na primjer, ako vrijednost za svojstvo outline-color nedostaje ili nije navedena prilikom postavljanja outline, svojstvo boje elementa koristiće se kao vrijednost za boju outline. U sljedećem primjeru, outline će biti puna zelena linija širine 5px: 

p {
    color: green;
    outline: 5px solid;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer skraćenice svojstva CSS outline</title>
<style>      
  p {
    color: black;
    outline: 5px solid;
  }
</style>
</head>
<body>
    <p>Boja outlne ovog pasusa ista je kao i boja teksta.</p>
</body>
</html>

Ali, u slučaju outline-style, izostavljanje vrijednosti uzrokovaće da se uopšte ne prikaže outline, jer nije zadana vrijednost za ovo svojstvo. U sljedećem primjeru neće biti puna zelena linija. 

p {
    outline: 5px #00ff00;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer skraćenice svojstva CSS outline</title>
<style>      
  p {
        outline: 5px #00ff00;
    }
</style>
</head>
<body>
    <p>Ovaj odlomak nema outline.</p>
</body>
</html>

Uklanjanje outline oko aktivnih linkova

Svojstvo outline široko se koristi za uklanjanje outline oko aktivnih linkova. Međutim, preporučuje se da primijenite neki alternativni stil koji ukazuje na to da linkovi imaju fokus. Isprobajmo sljedeći primjer i pogledajte kako to u osnovi funkcioniše: 

a, a:acive, a:focus {
    outline: none;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer uklanjanja isprekidane crte oko aktivne veze</title>
<style>      
    a {
        outline: 0;
    }
</style>
</head>
<body>
    <p><a href="https://www.ittutorijali.net/" target="_blank">Posjeti sajt IT TUTORIJALI</a></p>
</body>
</html>