Interfața utilizator CSS
În acest capitol sunt tratate două proprietăți CSS de interfață utilizator:
resizeoutline-offset
Redimensionare CSS
Dacă utilizatorii pot redimensiona un element și în ce direcție depinde de proprietatea resize.
Îi poți da oricare dintre aceste valori:
horizontal— utilizatorul poate schimba doar lățimeavertical— utilizatorul poate schimba doar înălțimeaboth— utilizatorul poate schimba atât lățimea, cât și înălțimeanone— elementul își păstrează dimensiunea, iar redimensionarea nu este permisă
Redimensionare doar pe lățime
Utilizatorul poate redimensiona doar lățimea acestui element <div>.
Prompt
Creați o pagină cu un element div pe care utilizatorul îl poate redimensiona doar pe orizontală (lățime). Div-ul trebuie să aibă o bordură, un anumit padding și text de exemplu. Folosiți proprietatea CSS resize setată la horizontal cu overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Horizontal</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Horizontal</h1>
<div>
<p>You can resize this div element horizontally. Click and drag the bottom-right corner to change the width.</p>
</div>
</body>
</html>
Redimensionare doar pe înălțime
Utilizatorul poate redimensiona doar înălțimea acestui element <div>.
Prompt
Creați o pagină cu un element div pe care utilizatorul îl poate redimensiona doar pe verticală (înălțime). Div-ul trebuie să aibă o bordură, un anumit padding și text de exemplu. Folosiți proprietatea CSS resize setată la vertical cu overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Vertical</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Vertical</h1>
<div>
<p>You can resize this div element vertically. Click and drag the bottom-right corner to change the height.</p>
</div>
</body>
</html>
Redimensionare atât pe lățime, cât și pe înălțime
Utilizatorul poate redimensiona liber acest element <div> atât pe lățime, cât și pe înălțime.
Prompt
Creați o pagină cu un element div pe care utilizatorul îl poate redimensiona atât pe orizontală, cât și pe verticală. Div-ul trebuie să aibă o bordură, un anumit padding și text de exemplu. Folosiți proprietatea CSS resize setată la both cu overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Both</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Both</h1>
<div>
<p>You can resize this div element both horizontally and vertically. Click and drag the bottom-right corner.</p>
</div>
</body>
</html>
Dezactivarea redimensionării în textarea
Browserele fac de obicei un <textarea> redimensionabil în mod implicit, iar proprietatea resize poate dezactiva acest lucru.
Prompt
Creați o pagină cu un element textarea a cărui posibilitate de redimensionare implicită este dezactivată folosind proprietatea CSS resize setată la none. Includeți o etichetă (label) pentru textarea.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Disable Textarea Resize</title>
<style>
textarea {
resize: none;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h1>Disable Resize in Textarea</h1>
<label for="myTextarea">This textarea cannot be resized:</label><br>
<textarea id="myTextarea">This textarea has resize set to none. You cannot resize it.</textarea>
</body>
</html>
Decalajul conturului CSS
outline-offset pune un spațiu transparent între un contur și marginea sau bordura unui element.
Notă: Conturile și bordurile diferă. Un contur se află în afara bordurii, se poate suprapune peste alt conținut și nu intră în dimensiunea elementului, așa că lățimea și înălțimea totale ale acestuia rămân aceleași.
Exemplu
Aici, outline-offset deschide un spațiu între bordură și contur.
Prompt
Creați o pagină cu două elemente div care demonstrează proprietatea outline-offset. Primul div are o bordură neagră continuă de 1px, un contur roșu continuu de 4px și un outline-offset de 15px. Al doilea div are o bordură neagră continuă de 1px, un contur albastru punctat de 5px și un outline-offset de 5px. Ambele au margini și un anumit conținut de text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Outline Offset</title>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
padding: 10px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Outline Offset</h1>
<div class="ex1">This div has a 15px outline offset with a solid red outline.</div>
<br>
<div class="ex2">This div has a 5px outline offset with a dashed blue outline.</div>
</body>
</html>