En este artículo, veremos cómo podemos crear una cuadrícula de diamantes usando HTML y CSS. Usaremos la propiedad de posición para alinear imágenes en forma de cuadrícula.
-
Parte HTML del código: en esta sección, crearemos una estructura de nuestra grilla.
Acercarse:
- Cree una lista ordenada usando «ul» y agregue un contenedor de clase.
- Cree seis etiquetas «li» con el nombre de la clase.
- Incluya una etiqueta «div» con el nombre de clase bg .
HTML
<!DOCTYPE html>
<
html
>
<
body
>
<!-- container for holding all images -->
<
ul
class
=
"container"
>
<!-- all li for items -->
<
li
class
=
"item1"
>
<
div
class
=
"bg"
></
div
>
</
li
>
<
li
class
=
"item2"
>
<
div
class
=
"bg"
></
div
>
</
li
>
<
li
class
=
"item3"
>
<
div
class
=
"bg"
></
div
>
</
li
>
<
li
class
=
"item4"
>
<
div
class
=
"bg"
></
div
>
</
li
>
<
li
class
=
"item5"
>
<
div
class
=
"bg"
></
div
>
</
li
>
</
ul
>
</
body
>
</
html
>
-
CSS: Usaremos CSS para establecer la posición y asignar algún estilo.
CSS
/*<!-- changing background to black -->*/
*{
background-color
:
#000
;
}
/* setting position of main container
using general properties of CSS*/
.container {
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform: translate(
-50%
,
-50%
);
margin
:
0
;
padding
:
0
;
width
:
600px
;
height
:
150px
;
}
/*Assigning transform to each element
of container for tilt*/
.container li {
list-style
:
none
;
position
:
absolute
;
width
:
200px
;
height
:
200px
;
background
:
#000
;
transform: rotate(
45
deg);
transition:
0.5
s;
margin
:
-100px
;
overflow
:
hidden
;
opacity:
0.5
;
}
/*Set opacity to one on mouse hover*/
.container li:hover {
opacity:
1
;
}
/*Assigning position individually
to all item of all list*/
.container li.item
1
{
top
:
0
;
left
:
0
;
}
.container li.item
2
{
bottom
:
0
;
left
:
25%
;
}
.container li.item
3
{
top
:
0
;
left
:
50%
;
}
.container li.item
4
{
bottom
:
0
;
left
:
75%
;
}
.container li.item
5
{
top
:
0
;
left
:
100%
;
}
/*Assigning transform to each
div inside li*/
.container li .bg {
width
:
100%
;
height
:
100%
;
transform: scale(
1.1
);
}
/*Setting background image for every item*/
.container li.item
1
.bg {
gstatic.com/
images?q=tbn%
3
AANd
9
GcT
9
lc
92
L
Yah
9098
Udckm
8
qbObhSx
3
cq
TCyEvQ&usqp=CAU);
background-
size
: cover;
background-position
:
center
;
}
.container li.item
2
.bg {
wp-content/
uploads/gfg_
200
X
200
-1
.png);
background-
size
: cover;
background-position
:
center
;
}
.container li.item
3
.bg {
images?q=tbn%
3
AANd
9
GcT
9
lc
92
LYah
9098
Udc
km
8
qbObhSx
3
cqTCyEvQ&usqp=CAU);
background-
size
: cover;
background-position
:
center
;
}
.container li.item
4
.bg {
wp-content/
uploads/gfg_
200
X
200
-1
.png);
background-
size
: cover;
background-position
:
center
;
}
.container li.item
5
.bg {
images?q=tbn%
3
AANd
9
GcT
9
lc
92
LYah
9098
Udc
km
8
qbObhSx
3
cqTCyEvQ&usqp=CAU);
background-
size
: cover;
background-position
:
center
;
}
Código completo:
HTML
<!DOCTYPE html> <html> <style> /* Changing background to black */ * { background-color: #000; } /* setting position of main container using general properties of CSS */ .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: 0; width: 600px; height: 150px; } /* Assigning transform to each element of container for tilt */ .container li { list-style: none; position: absolute; width: 200px; height: 200px; background: #000; transform: rotate(45deg); transition: 0.5s; margin: -100px; overflow: hidden; opacity: 0.5; } /* Set opacity to one on mouse hover */ .container li:hover { opacity: 1; } /* Assigning position individually to all item of all list */ .container li.item1 { top: 0; left: 0; } .container li.item2 { bottom: 0; left: 25%; } .container li.item3 { top: 0; left: 50%; } .container li.item4 { bottom: 0; left: 75%; } .container li.item5 { top: 0; left: 100%; } /* Assigning transform to each div inside li */ .container li .bg { width: 100%; height: 100%; transform: scale(1.1); } /* Setting background image for every item */ .container li.item1 .bg { background: url( https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&usqp=CAU); background-size: cover; background-position: center; } .container li.item2 .bg { background: url( https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png); background-size: cover; background-position: center; } .container li.item3 .bg { background: url( https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&usqp=CAU); background-size: cover; background-position: center; } .container li.item4 .bg { background: url( https://www.geeksforgeeks.org/wp-content/uploads/gfg_200X200-1.png); background-size: cover; background-position: center; } .container li.item5 .bg { background: url( https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcT9lc92LYah9098Udckm8qbObhSx3cqTCyEvQ&usqp=CAU); background-size: cover; background-position: center; } </style> <body> <!-- Container for holding all images --> <ul class="container"> <!-- All li for items --> <li class="item1"> <div class="bg"></div> </li> <li class="item2"> <div class="bg"></div> </li> <li class="item3"> <div class="bg"></div> </li> <li class="item4"> <div class="bg"></div> </li> <li class="item5"> <div class="bg"></div> </li> </ul> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA