For example, you want to set 40% alpha transparence to #000000
(black color), you need to add 66
like this #66000000
.
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
/*-- | |
- Minimal Theme for Twitter - https://typefully.com/minimal-twitter | |
- Licensed under the MIT license - https://github.com/typefully/minimal-twitter/blob/main/LICENSE | |
- Copyright (c) 2022 Mailbrew Inc. | |
--*/ | |
/* Remove Promoted Posts */ | |
/* Keep article combinator or it will remove all videos as well */ | |
[data-testid='placementTracking'] article, | |
a[href*='quick_promote_web'] { |
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Redundant CSS Example</title> | |
<link rel="stylesheet" href="./styles.css" /> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="toggle-1"> | |
<div class="indicator-1"></div> |
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Redundant CSS Example</title> | |
<link rel="stylesheet" href="./styles.css" /> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="toggle-1"> | |
<div class="indicator-1"></div> |
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
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<link rel="stylesheet" href="./css/style.css" /> | |
<title>CSS is Fun 😀</title> | |
</head> | |
<body> |
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
<div class="container"> | |
<div class="min-container"> | |
<h2>Applying min() to set gap</h2> | |
<div>Item-1</div> | |
<div>Item-2</div> | |
<div>Item-3</div> | |
<div>Item-4</div> | |
<div>Item-5</div> | |
</div> |
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
<div class="container"> | |
<div class="spacer"></div> | |
<h1>Using Spacer Component to add margin</h1> | |
<div class="spacer"></div> | |
<section class="section"> | |
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In ipsa rem laudantium omnis, unde laborum sapiente temporibus. Commodi quam ducimus alias dicta quisquam natus exercitationem quidem, qui atque eligendi quo!</p> | |
</section> | |
<div class="spacer"></div> | |
<section class="section"> | |
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In ipsa rem laudantium omnis, unde laborum sapiente temporibus. Commodi quam ducimus alias dicta quisquam natus exercitationem quidem, qui atque eligendi quo!</p> |
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
<div class="container"> | |
<h2>Normal Buttons</h2> | |
<button class="button">Send the mail</button> | |
<button class="button">Remove changes</button> | |
<h2>Using Abstracted components</h2> | |
<div class="button__container"> | |
<div class="button__item"> | |
<button class="button">Send the mail</button> | |
</div> |
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
<div class="container"> | |
<h1>Margin collapsing in CSS</h1> | |
<!-- Normal container --> | |
<div class="sub-container"> | |
<div class="box-normal"> | |
<h2>Normal Container</h2> | |
<p class="first-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque illo quod praesentium porro hic voluptatibus ex consequatur. Nam, quisquam excepturi.</p> | |
<p class="second-para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque illo quod praesentium porro hic voluptatibus ex consequatur. Nam, quisquam excepturi.</p> | |
</div> |
NewerOlder