Created
June 4, 2019 12:02
-
-
Save tiagomatosweb/2945edfa63ffde4fbe604b0f18f1181c to your computer and use it in GitHub Desktop.
Criando um efeito fade no bloco do texto apenas com CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Assista o vídeo dessa aula: https://youtu.be/ZdI_AEUgApw | |
| Se inscreva no canal: https://youtube.com/tiagomatosweb | |
| - | |
| Valeu jovem | |
| TM ;) | |
| --> | |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" | |
| content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Fade 1</title> | |
| <style> | |
| .company { | |
| position: relative; | |
| max-height: 200px; | |
| overflow: hidden; | |
| } | |
| .company__read-more { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| width: 100%; | |
| margin: 0; | |
| padding: 40px 0; | |
| text-align: center; | |
| background-image: linear-gradient(to bottom, transparent, white); | |
| } | |
| .company__read-more a { | |
| font-size: 14px; | |
| color: #FFF; | |
| background-color: #00B1E1; | |
| padding: 5px 20px; | |
| border-radius: 4px; | |
| text-decoration: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="company"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas finibus erat vitae molestie. Aenean porttitor metus id fringilla hendrerit. Nunc in erat leo. Sed maximus, urna et congue viverra, ipsum est ultricies massa, vitae lacinia neque augue et quam. Donec massa turpis, dapibus eget justo in, egestas tincidunt magna. Sed ullamcorper ipsum non dui ornare malesuada. In ut dolor sit amet quam volutpat auctor.</p> | |
| <div class="company__read-more"> | |
| <a href="">Leia Mais</a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment