¿Cómo se creó el sitio web cssarrowplease?

Al ver el sitio web en vivo a partir de 2012, me sorprende que el Sr. Shojberg no haya agregado una opción de “radio de borde” para redondear las esquinas de la caja y la punta de la flecha. De hecho, el formulario podría segmentarse aún más para tener diferentes grosores de borde, color, nitidez de esquina, etc. para cada lado del cuadro (4 copias de la mayoría de las entradas de campo existentes) y para cada lado visible de la flecha (otro 3 copias de las entradas de campo).

Mi mejor conjetura es que un script del lado del servidor precarga una matriz serializada de valores que coinciden con cada punto de acceso en el mapa del área de selección de color a un color, por ejemplo, “‘left: 350px; top: 450px’: ‘# ff0000’, ‘left: 350px ; arriba: 451px ‘:’ # fe0000 ‘, …’ izquierda: 351px; arriba: 450px ‘:’ # ff0001 ‘,’ izquierda: 351px; arriba: 451px ‘:’ # fe0001 ‘… ”etc. hasta el final Las luminosidades en escala de grises.
El selector de color parece ser un mapa de área que cambia el color de fondo del div de flecha y el código en el cuadro de salida de acuerdo con los pares clave-valor en la matriz mencionada anteriormente.

Entonces, ¿por qué no sigo adelante y codifico esta versión mejorada? Porque parece funcionar un mecanismo de “recuadro negro”, ya que no veo ningún script del lado del cliente incluido en la fuente de la página. Mientras examinaba las interacciones de la página, concluí tentativamente lo siguiente:

El efecto de triángulo se logra creando un borde sólido, transparente y de 30 píxeles de ancho en tres de los cuatro lados de un div que se adjunta o se agrega al cuadro principal a través de “.arrow_box: after” o “.arrow_box: después del selector “(dependiendo de qué lado del buey desea que aparezca la flecha).

Debido a que solo el lado del div adjunto / pre-pendiente que es inmediatamente adyacente y paralelo al cuadro principal se representa, a través del atributo “border- [top | bottom | left | right] -color”, el comando CSS equivale a, “Dibuje un div sin contenido que tenga un borde de 30 píxeles en cada lado, pero renderice solo el lado que toca el cuadro”.

Por alguna razón, esa página web en particular se analiza de manera que el navegador interprete esto como lo opuesto, por ejemplo, “Ignore el lado visible por completo y renderice los tres lados transparentes del div vacío como si fueran visibles, asegurándose de triangular su representación como si el lado marcado como visible no existiera “.

Digo “esa página web en particular” porque intenté sin éxito replicar los resultados con los estilos generados por el formulario generador. Sin embargo, codifiqué manualmente otro método para representar un triángulo en el que un rectángulo se coloca debajo de otro y se gira de modo que solo una esquina del triángulo sobresalga de un lado del rectángulo superpuesto.

http://JoeOhlerJr.com/CSS_Arrow_ …

PD
Quora revela su nombre cuando le pide a alguien que responda una pregunta que ha publicado de forma anónima. El asunto de la notificación es: “[Nombre] le pidió que respondiera, ‘[Pregunta]'”. ¡Así que tenga cuidado de no preguntar a nadie a quien no quiera conocer su identidad!

Puede consultar el código fuente del sitio web en cssarrowplease (Github).

No he examinado detenidamente el código, pero el sitio ofrece un número finito de configuraciones conocidas para que el usuario pueda elegir. Cada una de las configuraciones (arriba, abajo, izquierda, derecha) tendría una plantilla que utilizaría los valores en los otros cuadros de entrada para el color y el tamaño y generaría el CSS con los valores reemplazados para que coincidan con los valores del cuadro de entrada.

¿Hay alguna funcionalidad particular sobre la que desea preguntar?

También eché un vistazo a la fuente y parece que es .js personalizado, pero estoy bastante seguro de que se puede lograr lo mismo usando angular.js, backbone.js, meteor.js o cualquier otro marco de aplicación web moderno. La respuesta de Anuj presentó los pasos básicos de la funcionalidad. El siguiente paso sería mapear la lógica requerida para hacerlo. Angular proporciona muchos parámetros de plantilla en línea que pueden manejar algo de esto, y como revela el sitio original y su enlace github -> cssarrowplease, todo se puede hacer también en el script .js.

Estoy más familiarizado con Angular. Aquí hay una lista de aplicaciones de ejemplo en las que puede profundizar en la búsqueda de la funcionalidad correcta para su proyecto (angular.js) si elige construir desde cero.

Hago este tipo de cosas todo el tiempo. Aquí hay un paso a paso.

1. Escriba su html y una hoja de estilo base para el objeto que está editando.
2. Luego escriba el código general del sitio web.
3. Ahora vas a hacer variables para cada uno de tus campos. (ejemplo: var size = document.getElementById('size') ). También asigne una variable a su campo de código.
4. Finalmente, necesita escribir sus variables de campo en el código y en el html que se muestra. Puedes hacerlo con JS así:

   document.getElementById('code').innerHTML = ".arrow_box { height:" +size+ ";}";

Espero que tengas la idea de este ejemplo: D. Probablemente desee que todas las definiciones de variables se recopilen en una función, y que esa función se ejecute así:

document.getElementById('cssform').addEventListener ("keyup", yourFunction(), false);

Esto hará que la función se ejecute cuando se agreguen caracteres, lo que la hará “en vivo”, por así decirlo. Aquí hay un ejemplo completo de un solo campo de código:

Entrada HTML

Cuadro de código HTML (puede ser un div o código)

Javascript que contiene nuestro CSS modificado por el campo de entrada:

  document.getElementById ('size'). addEventListener ("keyup", yourFunction (), false);

 function yourFunction () {
    var size = document.getElementById ('size'). value;
    document.getElementById ('código'). innerHTML = ".arrow_box {height:" + size + "px;}";
 }

Esto escribirá en el CSS que se muestra dentro de la etiqueta cada vez que sea un carácter adicional.
Nota: Si agrega la variable fuera de la función, no funcionará.

Puede que esta no sea la mejor manera, pero es lo que he unido para algunos de mis proyectos fáciles.

Esto es lo que sugiero:

1) [implementar el] diseño [del] sitio web. (html / css)
2) use knockout.js para vincular entradas en variables.
3) enlazar (partes de) el código de la derecha a esas variables usando propiedades dinámicas ko.
4) vincula el estilo del cuadro a las propiedades ko.

Todo el proceso no debería tomar más de 4 horas, depende del diseño, por supuesto.