In dieser kleinen CSS Serie zeige ich euch in den nächsten Tagen wie ihr mit ein paar CSS und HTML Codezeilen schöne und einfache Hintergründe erstellen könnt.
Wenn ihr also mehr über Radial-Gradient, Linear Gradient, Transform etc in CSS lernen wollt – dann spitzt die Ohren und passt gut auf 🙂
Video
CSS Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| * {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #6e529d 0%,#d97b93 100%);
}
div {
border: 1px solid rgba(255,255,255,.1);
width: 10em;
height: 10em;
transform: rotate(45deg);
margin: 2em;
float: left;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
} |
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(to bottom, #6e529d 0%,#d97b93 100%);
}
div {
border: 1px solid rgba(255,255,255,.1);
width: 10em;
height: 10em;
transform: rotate(45deg);
margin: 2em;
float: left;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
}
HTML Code
Folgen
0 Kommentare