Skip to content

Instantly share code, notes, and snippets.

View gmcusaro's full-sized avatar

Giovanni Maria Cusaro gmcusaro

4 followers · 11 following
View GitHub Profile
@gmcusaro
gmcusaro / resize-logo.css
Last active January 17, 2023 11:54
Resizing e styling logo
img .logo {
width: 15%;
aspect-ratio: 3/2;
object-fit: contain;
mix-blend-mode: color-burn;
}
@gmcusaro
gmcusaro / full-width-section.html
Created November 30, 2022 14:29
Full width content section
<html>
<head>
<style>
body {
--mainBG: #000;
margin: 0;
padding: 0;
}
section {
padding: 1em;
@gmcusaro
gmcusaro / not-has.html
Created November 30, 2022 09:25
use :has() for when an element doesn't have some other element as a child
<html>
<head>
<title>:has not</title>
<style>
.card {
padding: 2rem;
border-radius: 10px;
border: 1px solid Highlight;
}
.card:not(:has(h3)) {
@gmcusaro
gmcusaro / shorthand-width.css
Created July 26, 2022 06:14
Shorthand width property
.container {
border: 5px solid red;
width: 100%;
max-width: 600px;
padding: 0 1em;
margin: 0 auto;
}
/* this can become */
@gmcusaro
gmcusaro / glitch-shadows.css
Created July 18, 2022 19:31
Glitch shadow
.glitch {
color: #000000;
text-shadow: red -2px 0, cyan 2px 0;
}
@gmcusaro
gmcusaro / custom-path.css
Created June 22, 2022 07:05
Custom background path
.custom-path {
clip-path: polygon(
0% 0%,
100% 0%,
100% calc(100% - 2em),
0% 100%
);
}
@gmcusaro
gmcusaro / is-pseudo-class.css
Created June 16, 2022 08:51
:is() pseudo class
.section h1,
.section .text,
.section p {
/* your code*/
}
/* can be simplified as */
.section :is(h1, .text, p) {
/*your code*/
}
@gmcusaro
gmcusaro / card-border-animation.css
Created April 21, 2022 07:57
Card color border animation
.card {
position: relative;
background-color: #fff;
padding: 20px;
border-radius: 5px;
margin: 20px;
}
.card::before {
content: '';
position: absolute;
@gmcusaro
gmcusaro / rainbow-button.css
Created April 2, 2022 19:57
Rainbow button
html, body {
height: 100%;
overflow: hidden;
}
body {
background: #191919;
display: flex;
align-items: center;
justify-content: center;
}
@gmcusaro
gmcusaro / dot-spinner.css
Created January 25, 2022 21:19
Dot spinner
.spinner {
width: 40px;
height: 40px;
position: relative;
}
.spinner .dot {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;