El estilo CSS se puede establecer en un carácter en la mitad vertical o en la mitad horizontal de ambos. Agregue una clase en el texto y la clase contiene estilo CSS para aplicar la mitad del carácter. La accesibilidad del texto principal se conserva con lectores de pantalla para ciegos o deficientes visuales. Debe hacer lo siguiente para aplicar CSS a la mitad de un carácter:
- Procedimiento para dar estilo a la mitad de un carácter o letra.
- Procedimiento para dar estilo a parte de un personaje con CSS/JavaScript.
- Procedimiento para aplicar CSS al 50% de un personaje
- Solo necesita aplicar la clase .halfStyled a cada elemento, que contiene el carácter que desea que tenga medio estilo.
Hay dos formas populares de diseñar la mitad de un personaje.
- Usando HTML y CSS
- Usando HTM, CSS y jQuery
Ejemplo 1: este ejemplo usa HTML y CSS para diseñar la mitad del carácter.
html
<!DOCTYPE html> <html> <head> <title>Half Styled Character</title> <style type="text/css"> .halfStyled { position: relative; font-size: 50px; display: inline-block; color: black; white-space: pre; overflow: hidden; } .halfStyled:before { display: block; position: absolute; z-index: 1; top: 0; left: 0; content: attr(data-content); height: 50%; overflow: hidden; color: green; } </style> </head> <body> <center> <span class="halfStyled" data-content="G">G</span> <span class="halfStyled" data-content="e">e</span> <span class="halfStyled" data-content="e">e</span> <span class="halfStyled" data-content="k">k</span> <span class="halfStyled" data-content="s">s</span> <span class="halfStyled" data-content="f">f</span> <span class="halfStyled" data-content="o">o</span> <span class="halfStyled" data-content="r">r</span> <span class="halfStyled" data-content="g">g</span> <span class="halfStyled" data-content="e">e</span> <span class="halfStyled" data-content="e">e</span> <span class="halfStyled" data-content="k">k</span> <span class="halfStyled" data-content="s">s</span> <h3>A Computer Science Portal for Geeks</h3> </center> </body> </html>
Salida: Ejemplo 2: Este ejemplo usa HTML, CSS y jQuery para diseñar la mitad del carácter.
html
<!DOCTYPE html> <html> <head> <title>Half Styling Character</title> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <style type="text/css"> .halfStyled { position: relative; display: inline-block; font-size: 80px; color: black; overflow: hidden; white-space: pre; } .halfStyled:before { display: block; z-index: 1; position: absolute; top: 0; left: 0; width: 50%; content: attr(data-content); overflow: hidden; color: green; } body { text-align: center; } </style> </head> <body> <span class="geeks">GeeksforGeeks</span> <h3>A Computer Science Portal for Geeks</h3> <script type="text/javascript"> jQuery(function($) { var text, chars, $el, i, output; // Iterate over all class occurrences $('.geeks').each(function(idx, el) { $el = $(el); text = $el.text(); chars = text.split(''); // Set the screen-reader text $el.html('<span style="position: absolute !important;'+ 'clip: rect(1px 1px 1px 1px);' + 'clip: rect(1px, 1px, 1px, 1px);">' + text + '</span>'); // Reset output for appending output = ''; // Iterate over all chars in the text for (i = 0; i < chars.length; i++) { // Create a styled element for each character // and append to container output += '<span aria-hidden="true" class="halfStyled"' + 'data-content="' + chars[i] + '">' + chars[i] + '</span>'; } // Write to DOM only once $el.append(output); }); }); </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Chandu_Siddartha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA