html - irregular - Cree un diseño de rayo(como The Flash)
shapes html (9)
Estoy tratando de recrear el símbolo del rayo de The Flash (DC Comics) (o la camiseta usada por Sheldon Cooper de Big Bang Theory ) en CSS.
Esto va a actuar como un sistema de clasificación de estrellas, solo un ''sistema de clasificación de rayos''.
Sin embargo, como estoy tratando de mantener el HTML al mínimo, me gustaría diseñar esto solo en CSS.
He llegado a la etapa de:
html,
body {
margin: 0;
height: 100%;
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
.wrap {
height: 50vw;
width: 50vw;
position: relative;
margin: 0 auto;
}
.circ:hover{
background:gray;
}
.circ:hover .bolt{
background:gold;
}
.circ {
height: 50%;
width: 50%;
background: white;
border: 5px solid black;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow:0 0 10px 2px black;
}
.bolt {
position: absolute;
top: 5%;
left: 50%;
height: 70%;
width: 30%;
background: yellow;
border: 2px solid black;
border-bottom: none;
transform: perspective(200px) skewX(-10deg) rotateX(15deg);
}
.bolt:before {
content: "";
position: absolute;
top: 90%;
left: 20%;
height: 50%;
width: 100%;
background: inherit;
border: 2px solid black;
transform: ;
}
/*
.bolt:after{
content:"";
position:absolute;
top:-40%;left:20%;
height:50%;
width:100%;
background:inherit;
transform:perspective(50px) skewX(-10deg) rotateX(45deg);
}*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="wrap">
<div class="circ">
<div class="bolt"></div>
</div>
</div>
pero no se como continuar desde aquí.
He intentado utilizar la propiedad de
perspective
, aunque todavía no creo tener un buen control, principalmente porque estoy un poco confundido sobre lo que está haciendo a las propiedades
:before
y
:after
cuando Se aplica a los padres.
Elegí CSS para esto, ya que el fondo blanco y el color del perno cambiarán con el clic, y porque sé cómo hacerlo con CSS.
(Sé que SVG puede ser una mejor opción aquí, pero no he podido aprender esto debido a restricciones de tiempo, por lo que preferiría usar ''lo que sé cómo usar'', que es CSS)
Descargo de responsabilidad: recomiendo SVG para estos, pero eso no significa que no debamos divertirnos con CSS. Use esto para el aprendizaje pero no para la implementación de producción.
Aquí hay un método para lograr la forma con un solo elemento (+ un par de pseudos) y algunos
linear-gradients
fondo.
La forma se puede escalar sin distorsiones.
Explicación sobre cómo se logró la forma:
-
El círculo blanco con el borde negro es un círculo CSS normal creado usando
border-radiusen un pseudo-elemento (:after). -
Se agrega otro pseudo-elemento (
:before) y está sesgado a lo largo de los ejes X e Y para dar a las partes del perno una apariencia sesgada. -
El tornillo se crea apilando múltiples
linear-gradientsuno encima del otro. Implica 6 imágenes de degradado, donde 3 son para la parte amarilla interior del perno y las otras 3 son para los bordes grises. - El tamaño de las imágenes de fondo (gradientes) está determinado por el tamaño del rayo y cada una de ellas está posicionada de tal manera que producen la apariencia de un rayo.
- La parte central del perno en realidad solo tiene un color sólido, pero todavía se produce usando un degradado porque no podemos controlar el tamaño de los fondos de color sólido.
Nota: La escala funciona bastante bien si se usa
transform: scale(...)
lugar de un cambio de altura / anchura + transición.
.lightning {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
margin: 50px auto;
}
.lightning:after,
.lightning:before {
position: absolute;
content: '''';
height: 100%;
width: 100%;
top: 0%;
left: 0%;
}
.lightning:after {
background: white;
border: 2px solid;
border-radius: 50%;
z-index: -1;
}
.lightning:before {
background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
background-repeat: no-repeat;
backface-visibility: hidden;
transform: skewY(-30deg) skewX(-30deg);
z-index: 2;
}
/* Just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
transition: all 1s;
}
.lightning:hover {
transform: scale(1.5);
}
<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lightning"></div>
Con animación para Bolt:
.lightning {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
margin: 50px auto;
}
.lightning:after, .lightning:before {
position: absolute;
content: '''';
height: 100%;
width: 100%;
top: 0%;
left: 0%;
}
.lightning:after {
background: white;
border: 2px solid;
border-radius: 50%;
z-index: -1;
}
.lightning:before {
background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 43%, gray 43%, gray 44%, transparent 44%), linear-gradient(to top left, transparent 56%, gray 56%, gray 57%, yellow 57%), linear-gradient(transparent 0%, gray 0%), linear-gradient(to top left, gray 51%, transparent 51%), linear-gradient(to top left, transparent 49%, gray 49%);
background-size: 20% 40%, 22% 42%, 22% 42%, 23% 42%, 23% 42%, 23% 42%;
background-position: 50% 50%, 32% 5%, 70% 100%, 50% 50%, 33% 7%, 69% 98%;
background-repeat: no-repeat;
backface-visibility: hidden;
transform: skewY(-30deg) skewX(-30deg);
z-index: 2;
}
/* Just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
transition: all 1s;
}
.lightning:hover:before {
animation: boltstrike 1s;
}
@-webkit-keyframes boltstrike {
25% {
transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
}
50% {
transform: translateX(7.5%) translateY(-7.5%) skewY(-30deg) skewX(-30deg);
}
100% {
transform: skewY(-30deg) skewX(-30deg);
}
}
@keyframes boltstrike {
25% {
transform: translateX(-5%) translateY(5%) skewY(-30deg) skewX(-30deg);
}
50% {
transform: translateX(5%) translateY(-5%) skewY(-30deg) skewX(-30deg);
}
100% {
transform: skewY(-30deg) skewX(-30deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lightning"></div>
Haga clic aquí para obtener una demostración completa con animación, cambio de color al hacer clic, etc.
Versión anterior sin borde:
.lightning {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
}
.lightning:after,
.lightning:before {
position: absolute;
content: '''';
height: 100%;
width: 100%;
top: 0%;
left: 0%;
}
.lightning:after {
background: white;
border: 2px solid;
border-radius: 50%;
z-index: -1;
}
.lightning:before {
background: linear-gradient(transparent 0%, yellow 0%), linear-gradient(to top left, yellow 50%, transparent 50%), linear-gradient(to top left, transparent 50%, yellow 50%);
background-size: 20% 40%, 20% 40%, 20% 40%;
background-position: 50% 50%, 30% 5%, 70% 100%;
background-repeat: no-repeat;
backface-visibility: hidden;
transform: skewY(-30deg) skewX(-30deg);
z-index: 2;
}
/* Just for demo */
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.lightning {
transition: all 1s;
}
.lightning:hover {
height: 250px;
width: 250px;
}
<!-- Script used only for avoidance of prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="lightning"></div>
Descargo de responsabilidad: use SVG para imágenes complejas. Sin embargo, todavía podemos divertirnos un poco con CSS, solo use esto para el aprendizaje y no para la implementación de producción.
¿Es esto posible con un solo elemento HTML?
¡Sí! ... con limitaciones, principalmente sin borde en el perno ... pero, ¡oye, HTML mínimo!
-
Las secciones superior e inferior se crean con el
truco del triángulo del borde transparente
en
:beforey:after -
El tornillo central se crea con la
box-shadowdebox-shadowde:before
Ejemplo muy tosco
Nota:
Este ejemplo usa un
<div>
, ya que requiere pseudo-elementos secundarios.
body {
background: #F00;
}
div {
height: 300px;
width: 300px;
background: #FFF;
border-radius: 50%;
border: solid 5px #000;
margin-top: 200px;
position: relative;
}
div:before,
div:after {
content: '''';
position: absolute;
transform: skewY(-30deg) rotate(20deg);
}
div:before {
border-right: solid 70px yellow;
border-top: solid 160px transparent;
box-shadow: 50px 100px yellow;
left: 50%;
margin-left: -50px;
top: -70px;
}
div:after {
border-right: solid 70px transparent;
border-top: solid 160px yellow;
bottom: -30px;
left: 100px;
}
<div></div>
SVG
Aquí tienes
@ Professor.CSS
.
@ jbutler483
Un circulo
Y polígono
svg {
background-color: red;
}
<svg width="100px" height="200px" viewBox="0 0 100 150">
<circle fill="white" stroke="black" cx="50" cy="75" r="50"></circle>
<polygon stroke="gray" fill="yellow" points="100,0 67,50 90,45 47,100 70,95 0,150 27,110 12,113 50,70 30,73 100,0" />
</svg>
o css
Son solo elementos
::before
y
::after
en la iluminación.
drop-shadow
sobre el contenedor de iluminación.
body {
background-color: red;
}
.container {
-webkit-filter: drop-shadow(2px 2px 0px gray);
}
.circle {
display: inline-block;
border-radius: 50%;
background-color: white;
border: 5px solid black;
border-color: black;
}
.lightning {
position: relative;
margin: 50px;
width: 30px;
height: 50px;
transform-origin: 50% 50%;
transform: skewX(-30deg) skewY(-30deg) rotate(10deg);
background-color: yellow;
}
.lightning:before {
position: absolute;
border-style: solid;
border-width: 0 0 40px 30px;
border-color: transparent transparent yellow transparent;
top: -39px;
left: -17px;
content: "";
}
.lightning:after {
position: absolute;
border-style: solid;
border-width: 0 0 40px 30px;
border-color: transparent transparent transparent yellow;
bottom: -39px;
right: -17px;
content: "";
}
<div class="circle">
<div class="container">
<div class="lightning"></div>
</div>
</div>
Puede lograr un rayo de iluminación ligeramente diferente con símbolos html . Tenga en cuenta que no todos los navegadores los admiten a todos.
Aquí hay un ejemplo rápido de lo que puede hacer con solo css / html.
.circle {
border-radius: 50%;
border: 4px solid black;
width: 100px;
height: 100px;
font-size: 70px;
text-align: center;
display: table-cell;
vertical-align: middle;
background: white;
}
.square{
border: 4px solid red;
width: 106px;
height: 106px;
background: red;
}
<div class="square">
<div class="circle">⚡</div>
</div>
La ventaja de este es que es simple, no requiere nada. La desventaja es que el perno es ligeramente diferente y que no todos los navegadores pueden admitir el símbolo.
Si necesita una imagen exacta, generarla en SVG y agregar como un svg o una fuente.
Lamentablemente, parece que el signo no es visible en las ventanas, pero en macos (cromo) se ve de esta manera:
En ubuntu también es visible, pero tiene un aspecto diferente.
Sé que no quieres SVG, pero es realmente fácil y mucho más rápido que hacerlo con css:
- Haz una captura de pantalla de tu rayo.
- Vaya a: http://www.base64-image.de/ cargue la imagen (jpg, png, gif).
- Obtenga el código de imagen de fondo css
Se las arregló para completar esto usando sesgos CSS y rota con cierto posicionamiento.
No es el más limpio y tampoco es excelente para la capacidad de respuesta o para cambiar el tamaño, pero funciona y es lo más cercano que podría obtener con mi corto espacio de tiempo.
El código está abajo:
#lightning {
position: relative;
height: 1000px;
width: 600px;
background: red;
}
.above,
.below {
height: 100%;
width: 100%;
position: absolute;
top: 100px;
}
.above .middle {
background: yellow;
position: absolute;
top: 300px;
left: 100px;
height: 125px;
width: 400px;
-webkit-transform: rotate(111deg) skew(35deg);
transform: rotate(111deg) skew(35deg);
}
.above .toptri {
position: absolute;
height: 200px;
width: 0px;
padding: 0px;
top: -175px;
left: 300px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 50px solid transparent;
border-right: 128px solid transparent;
border-bottom: 284px solid #FFFF00;
-webkit-transform: rotate(350deg) skew(141deg);
transform: rotate(350deg) skew(141deg);
}
.above .bottri {
position: absolute;
height: 200px;
width: 0px;
padding: 0px;
top: 400px;
left: 125px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 50px solid transparent;
border-right: 128px solid transparent;
border-bottom: 284px solid #FFFF00;
-webkit-transform: rotate(170deg) skew(141deg);
transform: rotate(170deg) skew(141deg);
}
.below .middle {
background: grey;
position: absolute;
top: 280px;
left: 80px;
height: 165px;
width: 440px;
-webkit-transform: rotate(111deg) skew(35deg);
transform: rotate(111deg) skew(35deg);
}
.below .toptri {
position: absolute;
height: 160px;
width: 0px;
padding: 0px;
top: -200px;
left: 265px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 80px solid transparent;
border-right: 158px solid transparent;
border-bottom: 370px solid grey;
-webkit-transform: rotate(350deg) skew(141deg);
transform: rotate(350deg) skew(141deg);
}
.below .bottri {
position: absolute;
height: 200px;
width: 0px;
padding: 0px;
top: 400px;
left: 125px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 50px solid transparent;
border-right: 128px solid transparent;
border-bottom: 284px solid #FFFF00;
-webkit-transform: rotate(170deg) skew(141deg);
transform: rotate(170deg) skew(141deg);
}
.below .bottri {
position: absolute;
height: 160px;
width: 0px;
padding: 0px;
top: 380px;
left: 100px;
-webkit-transform: rotate(0deg) skew(141deg);
transform: rotate(0deg) skew(141deg);
border-top: 0px transparent;
border-left: 80px solid transparent;
border-right: 158px solid transparent;
border-bottom: 370px solid grey;
-webkit-transform: rotate(170deg) skew(141deg);
transform: rotate(170deg) skew(141deg);
}
<div id="lightning">
<div class="below">
<div class="toptri"></div>
<div class="middle"></div>
<div class="bottri"></div>
</div>
<div class="above">
<div class="toptri"></div>
<div class="middle"></div>
<div class="bottri"></div>
</div>
</div>
Sugiero usar el mágico Drawsvg web Drawsvg que le permite liberar su imaginación y dibujar libremente sus objetos SVG sin ningún requisito previo o habilidad.
Cuando termine de dibujar, solo tiene que hacer clic en el botón Guardar y obtendrá su código SVG. El código para el ejemplo de la imagen anterior:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="200px" viewBox="0 0 100 200" preserveAspectRatio="xMidYMid meet" >
<rect id="svgEditorBackground" x="0" y="0" width="100" height="200" style="stroke: none;" fill="red"/>
<circle id="e1_circle" cx="50.9398" cy="93.985" stroke="black" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" r="48.5487" fill="white" transform="matrix(1 0 0 1 -1.12782 4.13534)"/><g id="e4_group" fill="yellow" style=""/>
<polyline stroke="black" id="e5_polyline" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" points="67.1053 21.8045 33.6466 74.812 50.188 69.5489 25 114.286 45.6767 106.767 14.8496 158.271 70.8647 92.8571 45.3008 97.7444 69.3609 56.391 50.188 62.0301 66.7293 21.8045" fill="yellow"/>
</svg>
Espero que esto ayude.
CSS
CSS solo usando
:before
y
:after
pseudo elements, CSS triangles y
transform
.
Sería difícil hacer que esta solución en particular responda dado el uso de triángulos CSS ya que los
border
no pueden estar basados en porcentajes.
Esta solución utiliza dos
div
como base del rayo y su contorno.
El perno se crea de la siguiente manera:
-
La mitad del tornillo se especifica en
.boltOuter/.boltInner. Es un rectángulo sesgado en los ejes X e Y para convertirlo en un rombo inclinado. -
Las "púas" son los pseudoelementos
:beforey:afterposicionados relativamente al contenedor.boltOuter/.boltInner -
Las "púas" están hechas con triángulos CSS (elementos de
heightywidthcero conborderselectivos). Los triángulos se giran para obtener el ángulo deseado. -
Todos los elementos de
.boltInnerse hacen más pequeños y se compensan de.boltOuterpara permitir que.boltOuteractúe como el contorno plateado
body {
background-color: red;
}
.circle {
background-color: white;
border: 5px solid black;
border-radius: 50%;
height: 400px;
left: 100px;
position: relative;
top: 200px;
width: 400px;
}
.boltOuter, .boltInner {
position: absolute;
}
.boltOuter:before, .boltOuter:after, .boltInner:before, .boltInner:after {
content: "";
display: block;
height: 0;
position: absolute;
transform: rotateY(-60deg);
width: 0;
}
.boltOuter {
background-color: silver;
height: 300px;
left: 140px;
top: 50px;
transform: skewX(-10deg) skewY(-20deg);
width: 110px;
z-index: 2;
}
.boltOuter:before, .boltOuter:after {
border: 150px solid transparent;
z-index: 1;
}
.boltOuter:before {
border-bottom-color: silver;
border-right-color: silver;
left: -150px;
top: -200px;
}
.boltOuter:after {
border-left-color: silver;
border-top-color: silver;
bottom: -200px;
right: -150px;
}
.boltInner {
background-color: gold;
height: 290px;
left: 5px;
top: 5px;
width: 100px;
z-index: 4;
}
.boltInner:before, .boltInner:after {
border: 140px solid transparent;
z-index: 3;
}
.boltInner:before {
border-bottom-color: gold;
border-right-color: gold;
left: -143px;
top: -190px;
}
.boltInner:after {
border-top-color: gold;
border-left-color: gold;
bottom: -190px;
right: -143px;
}
<div class="circle">
<div class="boltOuter">
<div class="boltInner"></div>
</div>
</div>
JS Fiddle: https://jsfiddle.net/o7gm6dsb/
Un método CSS diferente que puede obtener el resultado con un solo
div
.
Este método utiliza una fuente de icono personalizada generada usando http://fontello.com/ , el beneficio de esto es que una fuente es escalable con poco esfuerzo o código requerido.
-
La fuente se incluye usando
@font-face. En este ejemplo, la fuente se incrusta directamente en el archivo CSS -
.boltse usa para dibujar el círculo contenedor usandoborder-radius: 50%; -
El pseudo elemento
:beforese usa para el perno, posicionado relativamente a.bolty centrado para permitir que salga de los bordes del círculo -
En los navegadores webkit más nuevos
-webkit-text-stroke: 3px silver;se puede usar para proporcionar un contorno al perno -
Si no se
-webkit-text-stroketext-shadowse puede utilizar para proporcionar un borde improvisado
@font-face {
font-family: ''fontello'';
src: url(''data:application/octet-stream;base64,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'') format(''woff''),
url(''data:application/octet-stream;base64,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'') format(''truetype'');
}
body {
background-color: red;
}
.bolt {
background-color: white;
border: 5px solid black;
border-radius: 50%;
height: 100px;
margin: 50px;
position: relative;
text-align: center;
width: 100px;
}
.bolt:before {
-webkit-text-stroke: 3px silver;
color: gold;
content: ''/e800'';
display: block;
font-family: "fontello";
font-size: 200px;
line-height: 100px;
position: absolute;
text-shadow: 2px 0 0 silver, -2px 0 0 silver, 0 2px 0 silver, 0 -2px 0 silver, 1px 1px silver, -1px -1px 0 silver, 1px -1px 0 silver, -1px 1px 0 silver;
width: 100%;
}
<div class="bolt"></div>