Échale huevos a tu Css: border-radius orgánico 27.4.12
Échale huevos a tu Css: border-radius orgánico
Que las esquinas se pueden redondear con border-radius no merece ni mencionarse.
Que las cajas tienes 4 esquinas también es obvio, y que en cada esquina se pueden definir 2 radios quizás no tanto: los 2 lados del ángulo.
Así que la conclusión es evidente: en border-radius puedes definir hasta 8 valores.
Pues jugando con esa posibilidad y las proporciones (alto/ancho) de la caja puedes hacer aparecer de la nada objetos en puro css tales como huevos o limones. Mira:
Huevos css:
Css de los huevos
.huevo {
display:block;
width:126px; /* el 70% de height */
height:180px;
-webkit-border-radius:63px 63px 63px 63px/ 108px 108px 72px 72px; /* bug en Safari*/
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.2) inset,
-5px -5px 15px rgba(0, 0, 0, 0.1) inset;
float: left;/*sólo para ponerlos juntos ;-) */
}
Y para tener dónde escoger, si blancos o morenos, una pincelada de color:
.moreno {
background-color:#FFE4AC;
}
.blanco {
background-color:#F8F8F8;
transform: rotate(90deg);
}
Limón Css
Basado en el mismo principio, border-radius y proporción en las medidas, un limón en puro css:
.limon {
background: #FF0;
border: 1px solid #EED900;
border-radius: 8px 100px 30px 100px;
height: 150px; width: 150px;
box-shadow:0 0 70px rgba(0, 0, 0, 0.3) inset,
5px -5px 15px rgba(0, 0, 0, 0.3) inset
}
Puedes ver otras figuras en puro css en esta entrada.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Tu sitio es genial, salu2
ResponderEliminar