Fundaluri

1. Fundaluri și umplutură

Codul în HTML
< p class="pad">Un paragraf.< /p> < p class="padded">Un paragraf captusit< /p>
Codul în CSS
< style type="text/css"> body {max-width: 50em;} p {background-color: #AEA;} p.padded {padding: 1em;} < /style>
Rezultat:
Un paragraf. Un paragraf captusit

2. Rezultatele unei foi de stil mai complicate

Codul în HTML
< h1>Despre Background< /h1> < p> Proprietatea < a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">CSS prescurtata< /a> de fundal setează simultan toate proprietățile stilului de fundal, cum ar fi culoarea, imaginea, originea și dimensiunea sau metoda de repetare. Proprietățile < a href="https://www.w3schools.com/css/css_background.asp">componentelor< /a> care nu sunt setate în declarația prescurtată a valorii proprietății sunt setate la valorile implicite background < /p>
Codul în CSS
< style type="text/css"> h1, h2 {color: yellow; background-color: rgb(0,51,0);} p {color: #555;} a:link {color: black; background-color: silver;} a:visited {color: gray; background-color: white;} < /style>
Rezultat:
Despre Background Proprietatea CSS prescurtata de fundal setează simultan toate proprietățile stilului de fundal, cum ar fi culoarea, imaginea, originea și dimensiunea sau metoda de repetare. Proprietățile componentelorcare nu sunt setate în declarația prescurtată a valorii proprietății sunt setate la valorile implicite background

3. Cele trei tipuri de tăiere a fundalului orientate spre cutie

Codul în HTML
< div id="ex01"> < p>background-clip: border-box;< /p> < /div> < div id="ex02"> < p>background-clip: padding-box;< /p> < /div> < div id="ex03"> < p>background-clip: content-box;< /p> < /div>
Codul în CSS
< style type="text/css"> body {width: 70em; display: flex;} div[id] {color: navy; background: #CCC; min-width: 30%; font-size: 1.5em; padding: 1em; margin: 1em; border: 0.5em dashed;} div[id] p {margin: 0;} #ex01 {background-clip: border-box;} #ex02 {background-clip: padding-box;} #ex03 {background-clip: content-box;} < /style>
Rezultat:
background-clip: border-box; background-clip: padding-box; background-clip: content-box;

4. Decuparea fundalului în text

Codul în HTML
< div id="ex01"> < p>Paragraf cu o < img src="chrome.jpg"> imagine < /p> < /div> < div id="ex02"> < p>Paragraf cu o < img src="chrome.jpg"> imagine < /p> < /div> < div id="ex03"> < p>Paragraf cu o < img src="chrome.jpg"> imagine < /p> < /div>
Codul în CSS
< style type="text/css"> body {width: 1200px; display: flex;} div[id] img {height: 1.75em; width: 1.75em;} div[id] {color: red; background: rgb(0,0,255); padding: 0 1em; margin: 1.5em 1em; border: 10px dashed; font-weight: bold; font-size: 20px;} #ex03 {-webkit-background-clip: text;} #ex02 {-webkit-background-clip: text; color: rgba(255,0,0,0.5);} #ex01 {-webkit-background-clip: text; color: transparent;} < /style>
Rezultat:
Paragraf cu o imagine Paragraf cu o imagine Paragraf cu o imagine

5. Aplicarea unei imagini de fundal în CSS

Codul în HTML
< h1>Despre Background< /h1> < p> Proprietatea < a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">CSS prescurtata< /a> de fundal setează simultan toate proprietățile stilului de fundal, cum ar fi culoarea, imaginea, originea și dimensiunea sau metoda de repetare. Proprietățile < a href="https://www.w3schools.com/css/css_background.asp"> componentelor< /a>care nu sunt setate în declarația prescurtată a valorii proprietății sunt setate la valorile implicite background < /p>
Codul în CSS
< style type="text/css"> body {width: 800px;} body {background-image: url(bg23.gif);} < /style>
Rezultat:
Despre Background Proprietatea CSS prescurtata de fundal setează simultan toate proprietățile stilului de fundal, cum ar fi culoarea, imaginea, originea și dimensiunea sau metoda de repetare. Proprietățile componentelorcare nu sunt setate în declarația prescurtată a valorii proprietății sunt setate la valorile implicite background

6. Adăugarea pictogramelor de legătură ca imagini de fundal

Codul în HTML
< ol> < li>< a href="test.doc">Document word< /a>< /li> < li>< a href="test.pdf">Document pdf< /a>< /li> < li>< a href="mailto:nobody@example.org">Trimite un email< /a>< /li> < /ol>
Codul în CSS
< style type="text/css"> ul, ol {margin: 2em 0; list-style: none;} li {margin: 0.5em 0;} ul li + li {font-style: italic;} a[href] {padding-left: 20px; background: no-repeat center left;} a[href$=".pdf"] {background-image: url(pdf-icon.png);} a[href$=".doc"] {background-image: url(msword-icon.png);} a[href^="mailto:"] {background-image: url(email-icon.png);} a:hover {color: red;} < /style>
Rezultat:
Document word Document pdf Trimite un email

7. Ce ar face fundalurile moștenite pentru aspect

Codul în HTML
< h1>Despre Background< /h1> < p> Proprietatea < a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">CSS prescurtata< /a> de fundal setează simultan toate proprietățile stilului de fundal, cum ar fi culoarea, imaginea, originea și dimensiunea sau metoda de repetare. Proprietățile < a href="https://www.w3schools.com/css/css_background.asp"> componentelor< /a>care nu sunt setate în declarația prescurtată a valorii proprietății sunt setate la valorile implicite background < /p>
Codul în CSS
< style type="text/css"> body {width: 800px;} * {background-image: url(yinyang.png);} < /style>
Rezultat:
Despre Background Proprietatea CSS prescurtata de fundal setează simultan toate proprietățile stilului de fundal, cum ar fi culoarea, imaginea, originea și dimensiunea sau metoda de repetare. Proprietățile componentelorcare nu sunt setate în declarația prescurtată a valorii proprietății sunt setate la valorile implicite background

8. Centrarea unei singure imagini de fundal

Codul în HTML
< h1>Despre Background< /h1> < p> Proprietatea < a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">CSS prescurtata< /a> de fundal setează simultan toate proprietățile stilului de fundal, cum ar fi culoarea, imaginea, originea și dimensiunea sau metoda de repetare. Proprietățile < a href="https://www.w3schools.com/css/css_background.asp"> componentelor< /a>care nu sunt setate în declarația prescurtată a valorii proprietății sunt setate la valorile implicite background < /p>
Codul în CSS
< style type="text/css"> html {background: white;} body {width: 800px; background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center; border: 1px dotted silver; padding: 1px;} < /style>
Rezultat:
Despre Background Proprietatea CSS prescurtata de fundal setează simultan toate proprietățile stilului de fundal, cum ar fi culoarea, imaginea, originea și dimensiunea sau metoda de repetare. Proprietățile componentelorcare nu sunt setate în declarația prescurtată a valorii proprietății sunt setate la valorile implicite background

9. Diferite poziții procentuale

Codul în HTML
< div id="ex01">< div>0% 0%< /div>< /div> < div id="ex02">< div>0% 50%< /div>< /div> < div id="ex03">< div>0% 100%< /div>< /div> < div id="ex10">< div>25% 75%< /div>< /div> < div id="ex04">< div>50% 0%< /div>< /div> < div id="ex05">< div>50% 50%< /div>< /div> < div id="ex06">< div>50% 100%< /div>< /div> < div id="ex11">< div>75% 25%< /div>< /div> < div id="ex07">< div>100% 0%< /div>< /div> < div id="ex08">< div>100% 50%< /div>< /div> < div id="ex09">< div>100% 100%< /div>< /div> < div id="ex12">< div>33% 75%< /div>< /div>
Codul în CSS
< style type="text/css"> body {margin: 0; display: flex; flex-wrap: wrap; max-width: 720px;} body > div {position: relative; height: 150px; width: 150px; margin: 15px; border: 1px none red; background-image: url(frame-sq.png), url(focus-hi.svg), url(chrome.jpg); background-size: 100% 100%, 100% 100%, 50px 50px; background-origin: padding-box; background-repeat: no-repeat; background-color: #EEE;} div:nth-child(4n+1) {clear: left;} div > div {width: 150px; position: absolute; top: 100%; left: 0; width: 100%; text-align: center; text-align: center; font: 13px Consolas, Andale Mono, monospace; line-height: 2;} #ex01 {background-position: 0% 0%, calc(0% - 75px) calc(0% - 75px);} #ex02 {background-position: 0% 50%, calc(0% - 75px) 50%;} #ex03 {background-position: 0% 100%, calc(0% - 75px) calc(100% + 75px);} #ex04 {background-position: 50% 0%, 50% calc(0% - 75px);} #ex05 {background-position: 50% 50%, 50% 50%;} #ex06 {background-position: 50% 100%, 50% calc(100% + 75px);} #ex07 {background-position: 100% 0%, calc(100% + 75px) calc(0% - 75px);} #ex08 {background-position: 100% 50%, calc(100% + 75px) 50%;} #ex09 {background-position: 100% 100%, calc(100% + 75px) calc(100% + 75px);} #ex10 {background-position: 25% 75%, calc(25% - 37px) calc(75% + 37px);} #ex11 {background-position: 75% 25%, calc(75% + 37px) calc(25% - 37px);} #ex12 {background-position: 33% 75%, calc(33% - 25px) calc(75% + 37px);} < /style>
Rezultat

10. Cele trei tipuri de origini de fundal

Codul în HTML
< div id="ex01"> < p>background-origin: border-box< /p> < /div> < div id="ex02"> < p>background-origin: padding-box< /p> < /div> < div id="ex03"> < p>background-origin: content-box< /p> < /div>
Codul în CSS
< style type="text/css"> body {width: 800px;} div[id] {color: navy; background: silver; background-image: url(i/yinyang.png); background-repeat: no-repeat; padding: 1em; margin: 1em; border: 5px dashed;} #ex01 {background-origin: border-box;} #ex02 {background-origin: padding-box;} #ex03 {background-origin: content-box;} < /style>
Rezultat:
background-origin: border-box background-origin: padding-box background-origin: content-box

11. Cele trei tipuri de origini de fundal, redux

Codul în HTML
< div id="ex01"> < p>background-origin: border-box< /p> < /div> < div id="ex02"> < p>background-origin: padding-box< /p> < /div> < div id="ex03"> < p>background-origin: content-box< /p> < /div>
Codul în CSS
< style type="text/css"> body {width: 800px;} div[id] {color: navy; background: silver; background-image: url(yinyang.png); background-repeat: no-repeat; background-position: bottom right; padding: 1em; margin: 1em; border: 5px dashed;} #ex01 {background-origin: border-box;} #ex02 {background-origin: padding-box;} #ex03 {background-origin: content-box;} < /style>
Rezultat:
background-origin: border-box background-origin: padding-box background-origin: content-box

12. Când originea și tăierea diferă

Codul în HTML
< div id="ex01"> < p>background-origin: padding-box; background-clip: content-box< /p> < /div> < div id="ex02"> < p>background-origin: content-box; background-clip: padding-box;< /p> < /div>
Codul în CSS
body {width: 800px;} div[id] {color: navy; background: silver; background-image: url(yinyang.png); background-repeat: no-repeat; padding: 1em; margin: 1em; border: 5px dashed;} #ex01 {background-origin: padding-box; background-clip: content-box;} #ex02 {background-origin: content-box; background-clip: padding-box;}
Rezultat:
background-origin: padding-box; background-clip: content-box background-origin: content-box; background-clip: padding-box;

13. Mozaicarea verticală a imaginii de fundal

Codul în HTML
< h1>Ecesta este un element h1!< /h1> < p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi tempora nemo excepturi possimus inventore saepe, qui quam. Placeat, sapiente in sunt aliquid voluptatibus, consequatur, qui similique eos aliquam suscipit consectetur. < /p>
Codul în CSS
< style type="text/css"> body {width: 800px;} body {background-image: url(yinyang-sm.png); background-repeat: repeat-y;} < /style>
Rezultat:
Ecesta este un element h1! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi tempora nemo excepturi possimus inventore saepe, qui quam. Placeat, sapiente in sunt aliquid voluptatibus, consequatur, qui similique eos aliquam suscipit consectetur.

14. Placarea imaginii de fundal pe orizontală

Codul în HTML
< h1>Ecesta este un element h1!< /h1> < p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi tempora nemo excepturi possimus inventore saepe, qui quam. Placeat, sapiente in sunt aliquid voluptatibus, consequatur, qui similique eos aliquam suscipit consectetur. < /p>
Codul în CSS
< style type="text/css"> body {width: 800px;} body {background-image: url(yinyang-sm.png); background-repeat: repeat-x;} < /style>
Rezultat:
Ecesta este un element h1! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi tempora nemo excepturi possimus inventore saepe, qui quam. Placeat, sapiente in sunt aliquid voluptatibus, consequatur, qui similique eos aliquam suscipit consectetur.

15. Centrarea imaginii de origine și repetarea acesteia

Codul în HTML
< div class="c1"> < p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio saepe placeat aspernatur temporibus quidem error totam ratione velit assumenda, cum, autem sit ex eveniet exercitationem incidunt? Vero fugiat accusantium laborum.< /p> < /div> < div class="c2"> < p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio saepe placeat aspernatur temporibus quidem error totam ratione velit assumenda, cum, autem sit ex eveniet exercitationem incidunt? Vero fugiat accusantium laborum.< /p> < /div>
Codul în CSS
body {width: 800px; display: flex; gap: 20px;} div {width: 300px;} p {background-image: url(yinyang-sm.png); background-position: center; border: 1px dotted gray;} .c1 p {background-repeat: repeat-y;} .c2 p {background-repeat: repeat-x;}
Rezultat:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio saepe placeat aspernatur temporibus quidem error totam ratione velit assumenda, cum, autem sit ex eveniet exercitationem incidunt? Vero fugiat accusantium laborum. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio saepe placeat aspernatur temporibus quidem error totam ratione velit assumenda, cum, autem sit ex eveniet exercitationem incidunt? Vero fugiat accusantium laborum.

16. Placarea imaginii de fundal cu spațiu de umplere

Codul în HTML
< div id="example"> < p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci alias ab! Dicta maxime necessitatibus blanditiis labore aliquid, veritatis beatae laudantium quis tenetur dolore inventore incidunt tempore eveniet eos dolorem. < /p>
Codul în CSS
< style type="text/css"> div#example {width: 800px; background-image: url(yinyang.png); background-repeat: space; border: 1px dotted gray;} < /style>
Rezultat:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci alias ab! Dicta maxime necessitatibus blanditiis labore aliquid, veritatis beatae laudantium quis tenetur dolore inventore incidunt tempore eveniet eos dolorem.

17. Spațiere de-a lungul unei axe, dar nu și a celeilalte

Codul în HTML
< div id="example"> < p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci alias ab! Dicta maxime necessitatibus blanditiis labore aliquid, veritatis beatae laudantium quis tenetur dolore inventore incidunt tempore eveniet eos dolorem. < /p>
Codul în CSS
< style type="text/css"> div#example {width: 800px; background-image: url(yinyang.png); background-repeat: space; background-position: center; border: 1px dotted gray;} < /style>
Rezultat:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci alias ab! Dicta maxime necessitatibus blanditiis labore aliquid, veritatis beatae laudantium quis tenetur dolore inventore incidunt tempore eveniet eos dolorem.

18. Placarea imaginii de fundal cu scalare

Codul în HTML
< div id="example"> < p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci alias ab! Dicta maxime necessitatibus blanditiis labore aliquid, veritatis beatae laudantium quis tenetur dolore inventore incidunt tempore eveniet eos dolorem. < /p>
Codul în CSS
< style type="text/css"> div#example {width: 800px; background-image: url(yinyang.png); background-repeat: round; border: 1px dotted gray;} < /style>
Rezultat:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci alias ab! Dicta maxime necessitatibus blanditiis labore aliquid, veritatis beatae laudantium quis tenetur dolore inventore incidunt tempore eveniet eos dolorem.

19. Imagini de fundal rotunjite care sunt tăiate

Codul în HTML
< div id="example"> < p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci alias ab! Dicta maxime necessitatibus blanditiis labore aliquid, veritatis beatae laudantium quis tenetur dolore inventore incidunt tempore eveniet eos dolorem. < /p>
Codul în CSS
< style type="text/css"> div#example {width: 800px; background-image: url(yinyang.png); background-repeat: round; background-position: center; background-origin: border-box; background-clip: border-box; border: 1px dotted gray;} < /style>
Rezultat:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum adipisci alias ab! Dicta maxime necessitatibus blanditiis labore aliquid, veritatis beatae laudantium quis tenetur dolore inventore incidunt tempore eveniet eos dolorem.

20. Tăierea din cauza valorilor nepotrivite ale clipului și originii

21. Centrarea continuă să se mențină

Codul în HTML
< p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates < /p>
Codul în CSS
< style type="text/css"> .tot section {height: 10em; width: 25rem; margin-bottom: 1em; border: 1px solid gray; overflow: scroll;} .tot section {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center center; background-size: 100px 100px;} < /style>
Rezultat:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates.

22. Redimensionarea imaginii de origine cu procente

Codul în HTML
< p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates < /p>
Codul în CSS
< style type="text/css"> .tot section {height: 10em; width: 25rem; margin-bottom: 1em; border: 1px solid gray; overflow: scroll;} .tot section {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center center; background-size: 50% 50%;} < /style>
Rezultat:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates.

23. Acoperirea fundalului cu imaginea de origine

Codul în HTML
< p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates < /p>
Codul în CSS
< style type="text/css"> .tot section {height: 10em; width: 25rem; margin-bottom: 1em; border: 1px solid gray; overflow: scroll;} .tot section {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center center; background-size: cover;} < /style>
Rezultat:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates.

24. Conținând imaginea de origine în fundal

Codul în HTML
< p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates < /p>
Codul în CSS
< style type="text/css"> .tot section {height: 10em; width: 25rem; margin-bottom: 1em; border: 1px solid gray; overflow: scroll;} .tot section {background-image: url(yinyang.png); background-repeat: no-repeat; background-position: center center; background-size: contain;} < /style>
Rezultat:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae excepturi nostrum, fugit eius iure temporibus eveniet recusandae, accusamus provident laudantium ullam! Illo laboriosam officia neque, vitae itaque eius similique voluptates.

25. Acoperirea, conținerea, poziționarea și tăierea

26. Mai multe imagini de fundal

Codul în HTML
< section id="example"> < p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi facilis non, aut doloremque, debitis ducimus sapiente velit minima explicabo maiores animi molestias unde recusandae repellat ex saepe obcaecati dolorem tenetur.< /p> < /section>
Codul în CSS
< style type="text/css"> html {background: silver;} body {background: white; width: 800px;} section {background-image: url(bg01.png), url(bg02.gif), url(bg03.jpg); background-repeat: no-repeat; padding: 2em 4em;} < /style>
Rezultat:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi facilis non, aut doloremque, debitis ducimus sapiente velit minima explicabo maiores animi molestias unde recusandae repellat ex saepe obcaecati dolorem tenetur.

27. Poziționarea individuală a imaginilor de fundal

Codul în HTML
< section id="example"> < p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi facilis non, aut doloremque, debitis ducimus sapiente velit minima explicabo maiores animi molestias unde recusandae repellat ex saepe obcaecati dolorem tenetur.< /p> < /section>
Codul în CSS
< style type="text/css"> html {background: silver;} body {background: white; width: 800px;} section {background-image: url(bg01.png), url(bg02.gif), url(bg03.jpg); background-position: top right, left center, 50% 100%; background-repeat: no-repeat; padding: 2em 4em;} < /style>
Rezultat:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi facilis non, aut doloremque, debitis ducimus sapiente velit minima explicabo maiores animi molestias unde recusandae repellat ex saepe obcaecati dolorem tenetur.

28. Plasarea aceleiași imagini în toate cele patru colțuri

Codul în HTML
< section id="example"> < p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi facilis non, aut doloremque, debitis ducimus sapiente velit minima explicabo maiores animi molestias unde recusandae repellat ex saepe obcaecati dolorem tenetur.< /p> < /section>
Codul în CSS
< style type="text/css"> html {background: silver;} body {background: white; width: 800px;} section {background-image: url(box-red.gif), url(box-red.gif), url(box-red.gif), url(box-red.gif); background-position: top left, top right, bottom right, bottom left; background-repeat: no-repeat; padding: 1em 2em;} < /style>
Rezultat:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi facilis non, aut doloremque, debitis ducimus sapiente velit minima explicabo maiores animi molestias unde recusandae repellat ex saepe obcaecati dolorem tenetur.

29. O umbră simplă a cutiei

Codul în HTML
< section class="arena"> < ol> < li>Aceasta este o cutie fără umbră.< /li> < li id="box">Aceasta este o cutie umbrită.< /li> < /ol> < /section>
Codul în CSS
< style type="text/css"> body {background: url(yinyang-sm.png) repeat;} .arena ol {display: flex;} .arena ol li {list-style: none; width: 15ch; margin-right: 30px; padding: 1ch; font: bold 1em sans-serif; background: silver; border: medium solid;} #box{box-shadow: 10px 10px rgba(0,0,0,0.5);} < /style>
Rezultat:
Aceasta este o cutie fără umbră. Aceasta este o cutie umbrită.

30. Diverse umbre estompate și răspândite

Codul în HTML
< section class="arena"> < ol> < li class="box">Aceasta este o cutie umbrită.< /li> < li class="box">Aceasta este o cutie umbrită.< /li> < li class="box">Aceasta este o cutie umbrită.< /li> < li class="box">Aceasta este o cutie umbrită.< /li> < li class="box rounded">Aceasta este o cutie umbrită.< /li> < li class="box rounded">Aceasta este o cutie umbrită.< /li> < li class="box rounded">Aceasta este o cutie umbrită.< /li> < /ol> < /section>
Codul în CSS
< style type="text/css"> .arena ol {display: flex; margin: 2em 0; padding: 0;} .arena ol li {list-style: none; width: 15ch; margin-right: 50px; padding: 2ch 1ch; font: bold 1em sans-serif; background: silver; border: medium solid;} .box.rounded {border-radius: 3ch;} .box:nth-of-type(1) {box-shadow: 1em 1em 2px rgba(0,0,0,0.5);} .box:nth-of-type(2) {box-shadow: 2em 0.5em 0.25em rgba(128,0,0,0.5);} .box:nth-of-type(3) {box-shadow: 0.5em 2ch 1vw 13px rgba(0,128,0,0.5);} .box:nth-of-type(4) {box-shadow: -10px 25px 5px -5px rgba(0,128,128,0.5);} .box:nth-of-type(5) {box-shadow: 0.67em 1.33em 0 -0.1em rgba(0,0,0,0.5);} .box:nth-of-type(6) {box-shadow: 0.67em 1.33em 0.2em -0.1em rgba(0,0,0,0.5);} .box:nth-of-type(7) {box-shadow: 0 0 2ch 2ch rgba(128,128,0,0.5);} < /style>
Rezultat
Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită.

31. Diverse umbre inserate

Codul în HTML
< section class="arena"> < ol> < li class="box">Aceasta este o cutie umbrită.< /li> < li class="box">Aceasta este o cutie umbrită.< /li> < li class="box">Aceasta este o cutie umbrită.< /li> < li class="box">Aceasta este o cutie umbrită.< /li> < li class="box rounded">Aceasta este o cutie umbrită.< /li> < li class="box rounded">Aceasta este o cutie umbrită.< /li> < li class="box rounded">Aceasta este o cutie umbrită.< /li> < /ol> < /section>
Codul în CSS
< style type="text/css"> .arena ol {display: flex; margin: 2em 0; padding: 0;} .arena ol li {list-style: none; width: 15ch; margin-right: 50px; padding: 2ch 1ch; font: bold 1em sans-serif; background: silver; border: medium solid;} .box.rounded {border-radius: 3ch;} .box:nth-of-type(1) {box-shadow: inset 1em 1em 2px rgba(0,0,0,0.5);} .box:nth-of-type(2) {box-shadow: inset 2em 0.5em 0.25em rgba(128,0,0,0.5);} .box:nth-of-type(3) {box-shadow: 0.5em 2ch 1vw 13px rgba(0,128,0,0.5) inset;} .box:nth-of-type(4) {box-shadow: inset -10px 25px 5px -5px rgba(0,128,128,0.5);} .box:nth-of-type(5) {box-shadow: 0.67em 1.33em 0 -0.1em rgba(0,0,0,0.5) inset;} .box:nth-of-type(6) {box-shadow: inset 0.67em 1.33em 0.2em -0.1em rgba(0,0,0,0.5);} .box:nth-of-type(7) {box-shadow: 0 0 2ch 2ch rgba(128,128,0,0.5) inset;} < /style>
Rezultat
Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită. Aceasta este o cutie umbrită.