Outros

Douglas10009 · Nov 16, 2023 · cffb4a0 · cffb4a0
1 parent 2c877e8
commit cffb4a0
Show file tree

Hide file tree

Showing 4 changed files with 163 additions and 0 deletions.
diff --git a/Fundamentos de CSS/Outros/opacidade.html b/Fundamentos de CSS/Outros/opacidade.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        div{
+            width: 200px;
+            height: 100px;
+            background-color: blueviolet;
+            opacity: .3;
+            border: 4px solid salmon;
+        }
+
+        img{
+            width: 200px;
+            height: 100px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Propriedade <code>opacity</code></h1>
+    <p>Define o nível de opacidade de um elemento</p>
+
+    <div>
+        <img src="https://lp.dio.me/wp-content/uploads/2023/03/LOGO-DIO-COLOR.png">
+    </div>
+</body>
+
+</html>
diff --git a/Fundamentos de CSS/Outros/overflow.html b/Fundamentos de CSS/Outros/overflow.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        div{
+            width: 300px;
+            height: 200px;
+            background-color: chocolate;
+            border: 10px solid gray;
+        }
+
+        .visible{
+            overflow: visible;
+        }
+        .hidden{
+            overflow: hidden;
+        }
+        .scroll{
+            overflow: scroll;
+        }
+        .auto{
+            overflow: auto;
+        }
+        .x-y{
+            overflow-y: hidden;
+            overflow-x: scroll;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Propriedade <code>overflow</code></h1>
+    <p>Define como o conteudo será exibido caso ultrapasse dos limites do conteiner</p>
+
+    <code>overflow:visible</code>
+    <div class="visible">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nobis expedita eaque minus atque provident eveniet voluptatibus, saepe assumenda earum? Illo, sequi in. Ducimus dolorem ex natus quidem ab quibusdam!
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ad, suscipit error non aut illo quae autem similique assumenda dolorem maiores laborum sequi eveniet quam qui ratione nihil blanditiis dolor.
+        <br>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio hic, blanditiis repudiandae excepturi explicabo porro eaque ex, error mollitia sequi asperiores rem animi necessitatibus odit corrupti consequatur veniam itaque!
+    </div>
+
+    <br><br><br><br><br><br><br>
+
+    <code>overflow:hidden</code>
+    <div class="hidden">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nobis expedita eaque minus atque provident eveniet voluptatibus, saepe assumenda earum? Illo, sequi in. Ducimus dolorem ex natus quidem ab quibusdam!
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ad, suscipit error non aut illo quae autem similique assumenda dolorem maiores laborum sequi eveniet quam qui ratione nihil blanditiis dolor.
+        <br>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio hic, blanditiis repudiandae excepturi explicabo porro eaque ex, error mollitia sequi asperiores rem animi necessitatibus odit corrupti consequatur veniam itaque!
+    </div>
+
+    <br><br><br><br><br><br><br>
+
+    <code>overflow:scroll</code>
+    <div class="scroll">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nobis expedita eaque minus atque provident eveniet voluptatibus, saepe assumenda earum? Illo, sequi in. Ducimus dolorem ex natus quidem ab quibusdam!
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ad, suscipit error non aut illo quae autem similique assumenda dolorem maiores laborum sequi eveniet quam qui ratione nihil blanditiis dolor.
+        <br>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio hic, blanditiis repudiandae excepturi explicabo porro eaque ex, error mollitia sequi asperiores rem animi necessitatibus odit corrupti consequatur veniam itaque!
+    </div>
+
+    <br><br><br><br><br><br><br>
+
+    <code>overflow:auto</code>
+    <p>mostra somente os scrolls nescessários</p>
+    <div class="auto">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nobis expedita eaque minus atque provident eveniet voluptatibus, saepe assumenda earum? Illo, sequi in. Ducimus dolorem ex natus quidem ab quibusdam!
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ad, suscipit error non aut illo quae autem similique assumenda dolorem maiores laborum sequi eveniet quam qui ratione nihil blanditiis dolor.
+        <br>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio hic, blanditiis repudiandae excepturi explicabo porro eaque ex, error mollitia sequi asperiores rem animi necessitatibus odit corrupti consequatur veniam itaque!
+    </div>
+
+    <br><br><br><br><br><br><br>
+
+    <code>overflow-x:auto</code>
+    <p>mostra somente os scrolls nescessários</p>
+    <div class="x-y">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nobis expedita eaque minus atque provident eveniet voluptatibus, saepe assumenda earum? Illo, sequi in. Ducimus dolorem ex natus quidem ab quibusdam!
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ad, suscipit error non aut illo quae autem similique assumenda dolorem maiores laborum sequi eveniet quam qui ratione nihil blanditiis dolor.
+        <br>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi distinctio hic, blanditiis repudiandae excepturi explicabo porro eaque ex, error mollitia sequi asperiores rem animi necessitatibus odit corrupti consequatur veniam itaque!
+    </div>
+</body>
+
+</html>
diff --git a/Fundamentos de CSS/Outros/redefinir.html b/Fundamentos de CSS/Outros/redefinir.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        @import url('./reset.css');
+    </style>
+</head>
+
+<body>
+    <h1>Redefinir as propriedades padrões dos navegadores</h1>
+    <p>Reset CSS</p>
+
+    <h1>Titulo 1</h1>
+    <h2>Título 2</h2>
+    <h3> Título 3</h3>
+
+    <hr>
+    <ul>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ul>
+    <hr>
+</body>
+
+</html>
diff --git a/Fundamentos de CSS/Outros/reset.css b/Fundamentos de CSS/Outros/reset.css
@@ -0,0 +1,7 @@
+*{
+    padding: 0;
+    margin: 0;
+    vertical-align: baseline;
+    list-style: none;
+    border: 0;
+}