style - title html español
Conectando cuadrados redondeados (5)
Aquí hay una respuesta a medias formulada. No estoy seguro si puedes hacer que el desenfoque sea menos translúcido, pero aquí está hasta donde llegué.
body {
background: #eee;
}
.filter {
-webkit-filter: url("#goo");
filter: url("#goo");
}
.block {
border-radius: 4px;
width: 2em;
height: 2em;
position: absolute;
background: #fff;
}
.filter {
height: 4em;
}
.block1 {
-webkit-transform: translate3d(0, 2em, 0);
transform: translate3d(0, 2em, 0);
background: #0076aa;
}
.block2 {
-webkit-transform: translate3d(2em, 0, 0);
transform: translate3d(2em, 0, 0);
background: #0076aa;
}
.block3 {
-webkit-transform: translate3d(2em, 0, 0);
transform: translate3d(2em, 0, 0);
background: #98bd81;
}
.block4 {
-webkit-transform: translate3d(4em, -2em, 0);
transform: translate3d(4em, -2em, 0);
background: #98bd81;
}
<div class="filter">
<div class="block block1"></div>
<div class="block block2"></div>
</div>
<div class="filter">
<div class="block block3"></div>
<div class="block block4"></div>
</div>
<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -7" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
Sé que tienes una respuesta ahora, pero aquí hay otra forma de hacerlo.
¿Cómo creo el logotipo div, según la imagen adjunta a continuación:
Esto es lo que he creado en JsFiddle
El problema principal es cómo conecto las dos cajas con la forma como se muestra en la imagen de abajo. ¿Alguien puede sugerirlo?
body,html {
width: 100%;
height: 100%;
margin: 0;
}
body {
background-color: #efefef;
}
.wrapper {
height: 40px;
width: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -22.5px;
margin-left: -22.5px;
}
ul {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 80px;
height: 80px;
position: relative;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ul li {
width: 2em;
height: 2em;
position: absolute;
/*animation: dance 888ms infinite alternate;
animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);*/
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
animation: dance 888ms infinite alternate;
}
.block-1 {
top: 0;
left: 0;
background: #0076aa;
border-radius: 4px;
}
.block-2 {
top: 0;
right: 0;
background: #98bd81;
border-radius: 4px;
}
.block-3 {
bottom: 0;
right: 0;
background: #98bd81;
border-radius: 4px;
}
.block-4 {
bottom: 0;
left: 0;
background: #0076aa;
border-radius: 4px;
}
<div class=''wrapper''>
<ul class=''blocks''>
<li class=''block-1''></li>
<li class=''block-2''></li>
<li class=''block-3''></li>
<li class=''block-4''></li>
</ul>
</div>
Logré crear el diseño que buscabas agregando algunos pseudo-elementos a tu CSS. Estuve un poco presionado por el tiempo, así que es un poco peligroso, pero espero que sea de alguna ayuda:
body,html{
background-color:#fff;
height:100%;
}
.wrapper{
height:40px;
width:40px;
position:absolute;
top:50%;
left:50%;
margin-top:-22.5px;
margin-left:-22.5px;
}
ul{
list-style-type:none;
margin:0 auto;
padding:0;
width:82px;
height:82px;
position:relative;
transform:rotate(45deg);
}
ul li{
width:2em;
height:2em;
position:absolute;
transform:rotate(-45deg);
}
.block-1{
top:0;
left:0;
background:#0076aa;
border-radius:4px;
}
.block-2{
top:0;
right:0;
background:#98bd81;
border-radius:4px;
}
.block-3{
bottom:0;
right:0;
background:#98bd81;
border-radius:4px;
}
.block-4{
bottom:0;
left:0;
background:#0076aa;
border-radius:4px;
}
.block-1::before,.block-2::before{
background:inherit;
content:"";
top:calc(100% - 5px);
left:-50%;
height:10px;
position:absolute;
transform:rotate(-45deg);
width:100%;
}
.block-3::before,.block-4::before{
background:#fff;
border-radius:50%;
content:"";
height:calc(50% + 3px);
left:50%;
position:absolute;
top:calc(-50% - 3px);
width:calc(50% + 3px);
}
.block-3::after,.block-4::after{
background:#fff;
border-radius:50%;
content:"";
height:calc(50% + 3px);
position:absolute;
right:calc(-50% - 3px);
top:-3px;
width:calc(50% + 3px);
}
<div class=''wrapper''>
<ul class=''blocks''>
<li class=''block-1''></li>
<li class=''block-2''></li>
<li class=''block-3''></li>
<li class=''block-4''></li>
</ul>
</div>
Su mejor opción es utilizar un SVG.
Puede ejecutarlo a través de un convertidor de imagen a SVG que le da un SVG completamente terminado, cree el código SVG a mano o use un programa como Illustrator para lograr el efecto deseado.
Imagen para convertir SVG
Esto está usando una herramienta de conversión SVG en línea para crear el código. Como puedes ver esta bastante lleno
body {
background: lightgrey;
}
<svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 900 904" version="1.1">
<path fill="#0176aa" d=" M 350.14 0.00 L 546.51 0.00 C 557.90 0.78 568.99 5.90 576.59 14.48 C 583.89 22.42 588.07 33.18 587.88 43.98 C 587.88 107.98 587.88 171.99 587.88 235.99 C 588.17 249.96 580.94 263.65 569.60 271.71 C 561.12 277.92 550.43 280.52 540.01 279.83 C 487.44 278.44 434.85 271.78 382.24 276.12 C 362.32 277.82 342.25 280.95 323.63 288.51 C 310.06 294.06 297.18 302.66 289.17 315.19 C 282.70 325.19 279.87 337.18 279.77 349.00 C 279.78 413.00 279.76 477.00 279.78 541.00 C 279.91 547.26 278.86 553.57 276.37 559.33 C 269.95 574.91 253.92 585.94 237.04 586.14 C 176.69 586.22 116.34 586.15 56.00 586.17 C 47.31 586.07 38.35 586.89 30.00 583.93 C 13.22 578.53 0.73 562.25 0.00 544.61 L 0.00 346.86 C 1.21 331.57 10.80 317.30 24.66 310.68 C 30.65 307.78 37.31 306.21 43.97 306.34 C 78.64 306.38 113.32 306.11 147.98 305.13 C 176.85 303.95 205.87 302.67 234.30 297.14 C 250.18 293.88 266.27 289.25 279.60 279.68 C 289.65 272.50 297.23 262.16 301.52 250.61 C 308.30 232.56 309.35 213.05 310.12 193.97 C 310.41 178.31 310.35 162.64 309.88 146.99 C 309.15 112.31 308.05 77.64 308.19 42.95 C 308.23 32.02 312.83 21.27 320.42 13.44 C 328.11 5.34 339.00 0.56 350.14 0.00 Z"/>
<path fill="#98bd82" d=" M 631.90 331.91 C 640.05 323.06 651.95 317.87 663.99 317.91 C 728.00 317.88 792.02 317.89 856.04 317.91 C 873.26 317.68 889.87 328.70 896.45 344.60 C 898.66 349.76 899.86 355.36 899.85 360.98 C 899.86 422.00 899.86 483.02 899.86 544.03 C 899.84 552.43 900.48 561.14 897.25 569.10 C 891.45 585.30 875.35 597.26 858.09 597.69 C 841.41 597.85 824.75 596.63 808.11 595.64 C 766.00 593.26 723.59 590.29 681.55 595.31 C 662.45 597.77 643.15 601.81 626.03 610.97 C 614.00 617.36 603.35 627.05 597.60 639.56 C 593.43 648.42 591.80 658.29 591.75 668.03 C 591.77 731.04 591.73 794.04 591.76 857.05 C 591.92 862.96 591.45 868.98 589.40 874.58 C 583.95 890.84 568.25 902.80 551.17 904.00 L 351.77 904.00 C 336.62 902.43 322.55 892.77 316.15 878.88 C 312.84 872.11 311.79 864.49 311.89 857.02 C 311.92 797.01 311.90 737.00 311.90 676.99 C 311.82 668.81 311.68 660.36 314.76 652.63 C 320.59 636.73 336.31 624.97 353.29 624.28 C 404.78 623.97 456.37 624.47 507.73 620.29 C 528.90 618.29 550.27 615.67 570.40 608.50 C 584.50 603.46 597.97 595.10 606.37 582.42 C 616.43 567.35 619.46 548.95 621.06 531.25 C 623.56 498.87 621.71 466.38 621.22 433.96 C 620.48 409.99 620.21 386.00 620.20 362.01 C 619.94 350.95 624.36 339.95 631.90 331.91 Z"/>
</svg>
SVG codificado a mano
Solo he hecho la mitad de esto y no es perfecto, pero puedes ver a qué me refiero. También es mucho más fácil de leer y entender que la salida del convertidor.
<svg height="400" viewbox="0 0 400 400">
<path fill="blue"
d="M145,0
L200,0
Q220,0 220,20
L220,75
Q220,95 200,95
L185,95
Q145,90 135,110
L135,165
Q135,185 115,185
L60,185
Q40,185 40,165
L40,110
Q40,90 60,90
L75,90
Q115,95 120,70
L120,20
Q120,0 140,0z" />
</svg>
Teniendo en cuenta la molestia de alinear y hacer curvas dobles con CSS , este es claramente un trabajo para SVG. Las curvas son mucho más fáciles de crear y controlar. Aquí hay un ejemplo usando:
- SVG en línea
- curvas de bezier cuadráticas
- transform
- el elemento de uso, por lo que solo hay una aparición de la etiqueta de ruta
svg{ display:block; width:40%; margin:0 auto;}
<svg viewbox="0 0 16 15">
<defs>
<path id="shape" d="M7 0 H10 Q11 0 11 1 V4 Q11 5 10 5 H7 Q5 5 5 7 V9 Q5 10 4 10 H1 Q0 10 0 9 V6 Q0 5 1 5 H4 Q6 5 6 3 V1 Q6 0 7 0z" />
</defs>
<use xlink:href="#shape" fill="#0076AA"/>
<use xlink:href="#shape" fill="#98BD81" transform="translate(5,5)"/>
</svg>
Con una animación de carga:
svg{ display:block; width:40%; margin:0 auto;}
.sq{ animation: opacity .6s infinite alternate; }
.gr{ animation-delay:-.6s;}
@keyframes opacity { to {opacity: 0;} }
<svg viewbox="0 0 16 15">
<defs>
<path id="shape" d="M7 0 H10 Q11 0 11 1 V4 Q11 5 10 5 H7 Q5 5 5 7 V9 Q5 10 4 10 H1 Q0 10 0 9 V6 Q0 5 1 5 H4 Q6 5 6 3 V1 Q6 0 7 0z" />
</defs>
<use class="sq bl" xlink:href="#shape" fill="#0076AA"/>
<use class="sq gr" xlink:href="#shape" fill="#98BD81" transform="translate(5,5)"/>
</svg>
Tenga en cuenta que deberá agregar prefijos de proveedores en la animación y que las animaciones en elementos svg no son compatibles con IE / Edge.
El logotipo ya está desarrollado por un gran desarrollador, pero he hecho pequeños cambios en css para reducir el código y aplicar transform : skew :
body{
background-color: #efefef;
}
ul{
padding: 0;
width: 150px;
height: 150px;
list-style-type: none;
margin: 0 auto;
transform: skewX(-45deg);
}
ul li{
display: inline-block;
height: 60px;
width: 60px;
margin-bottom: 15px;
position: relative;
transform: skewX(45deg);
}
.square{
border-radius: 6px;
}
.bg-odd{
background: #0076aa;
}
.bg-even{
background: #98bd81;
margin-left: 15px;
right: -75px;
top: 75px;
}
li:nth-child(1):before,
li:nth-child(2):before{
content: "";
height: 15px;
left: -60%;
position: absolute;
top: calc(100% - 0px);
transform: skewY(-45deg);
width: 100%;
}
li:nth-child(1):before{
background: #0076aa;
}
li:nth-child(2):before{
background: #98bd81;
}
<div class=''wrapper''>
<ul class=''blocks''>
<li class=''square bg-odd''></li>
<li class=''square bg-even''></li>
<li class=''square bg-odd''></li>
<li class=''square bg-even''></li>
</ul>
</div>