soy Kseso y esto EsCSS

Échale huevos a tu Css: border-radius orgánico

Échale huevos a tu Css: border-radius orgánico

·Por Kseso ✎ 1

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.

avatar del Editor del blog

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 Don Kseso Kseso