Skip to content

Instantly share code, notes, and snippets.

@minpeter
Created February 19, 2024 03:03
Show Gist options
  • Save minpeter/5266ebac89783d4a100d559c85b417dc to your computer and use it in GitHub Desktop.
Save minpeter/5266ebac89783d4a100d559c85b417dc to your computer and use it in GitHub Desktop.
vercel style dark blur box test
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lipsum</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
</head>
<body style="
background-color: #111111;
display: flex;
gap: 20px;
flex-direction: column;
align-items: center;
margin: 20px;
">
<div style="
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
background-color: hsla(0,0%,100%,.06);
border: 1px solid #353535;
border-radius: 10px;
padding: 16px 16px 16px 20px;
text-decoration: none;
color: #ddd;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal;
width: 35%;
">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div style="
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
background-color: hsla(0,0%,100%,.06);
border: 1px solid #353535;
border-radius: 10px;
padding: 16px 16px 16px 20px;
text-decoration: none;
color: #ddd;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal;
width: 35%;
">
"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by
the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are
bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same
as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free
hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best,
every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of
duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances
accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures
to secure other greater pleasures, or else he endures pains to avoid worse pains."
</div>
<div style="
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
background-color: hsla(0,0%,100%,.06);
border: 1px solid #353535;
border-radius: 10px;
padding: 16px 16px 16px 20px;
text-decoration: none;
color: #ddd;
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal;
width: 35%;
">
"반면에 우리는 순간의 쾌락의 매력에 너무 속고 사기가 저하된 사람들, 욕망에 너무 눈이 멀어서 뒤따르는 고통과 고난을 예측할 수 없는 사람들을 의분을 가지고 비난하고 싫어합니다. 비난은 의지가 약하여 의무를
이행하지 못하는 자의 것이니 이는 수고와 고통에 움츠러들어 말하는 것과 같으니 이 경우는 아주 단순하고 구별하기 쉬우니라. 우리가 가장 좋아하는 일을 할 수 있는 것을 방해하는 것이 없다면 모든 즐거움을
환영하고 모든 고통을 피해야 합니다. 그러나 특정 상황에서는 의무나 사업상의 의무로 인해 즐거움을 거부해야 하는 경우가 자주 발생합니다. 그러므로 현명한 사람은 이 문제에 있어서 항상 선택의 원칙을
고수합니다. 그는 다른 더 큰 즐거움을 얻기 위해 쾌락을 거부하거나, 그렇지 않으면 더 나쁜 고통을 피하기 위해 고통을 참습니다."
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment