Posts

Showing posts with the label CSS3

Blog renewal and cleanup - New syntax highlighting

Spanish version / Versión en Español After switching to a more modern Blogger theme, I lost the syntax highlighting provided by Alex Gorbatchev's Syntax Highlighter , a project which is still alive and kicking but for some reason, doesn't play nice with Blogger's dynamic themes. Researching a bit, I stumbled upon Highlight JS , and I liked its simplicity and versatily. It lacks line numbers, but as the author explains , they are not a deal breaker and the code looks very nice. To install and use Highlight JS on Blogger, 3 simple steps are required: Go to Theme-Edit HTML and add links to Highlight JS' CSS and JS files inside <head>. For example, using CDNJS links for version 9.10: <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/tomorrow-night.min.css' rel='stylesheet'/> <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/> I am using a c...
Post a Comment
Keep reading

Renovación y limpieza del blog - Nuevo coloreado de sintaxis

Versión en inglés / English version Al pasar a un tema de Blogger más moderno, perdí el coloreado de sintaxis provisto por el plugin Syntax Highlighter de Alex Gorbatchev , proyecto que sigue vivo al día de hoy pero por alguna razón que no logré dilucidar, no funciona con los nuevos temas dinámicos de Blogger. Investigando un poco, me topé con Highlight JS , y me gustó su simpleza y versatilidad. No tiene números de línea, pero como su creador explica , no son imprescindibles y realmente se ve mucho mejor. Para instalar Highlight JS en un blog de Blogger, se requieren 3 simples pasos: Ir a Tema-Editar HTML y agregar links al CSS y JS de HighlightJS dentro de <head>. Por ejemplo, usando los de CDNJS para la versión 9.10: <link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/tomorrow-night.min.css' rel='stylesheet'/> <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js...
Post a Comment
Keep reading

Cross-browser radio buttons and checkboxes using only CSS3

Spanish version / Versión en Español Each browser gives input elements the look and feel it desires, and it cannot be customized directly on every browser. For radio buttons and checkboxes, we can get around this issue by using only CSS3; no need to bring in extra dependencies. The trick is to use CSS to hide the native input element, and then add an empty span element as the first child of the input's label. Having a label associated to an input allows us to use the CSS3 + syntax to select those specific cases, and then we can select the child empty span to generate our custom look for the input element. So, if we wanted to customize our radio buttons, first, in HTML, we need to add the dummy span and use labels. For example: <!doctype html> <html> <div> <input type="radio" id="radio01" name="radio" /> <label for="radio01"><span></span>Radio Button 1</label> </div> ...
Post a Comment
Keep reading

Radio buttons y checkboxes iguales en todos los navegadores usando sólo CSS3

Versión en inglés / English version Cada navegador le da a los elementos de tipo input la apariencia que ellos definen, y dicha apariencia no puede ser personalizada de forma directa en todos los navegadores. Para radio buttons y checboxes, es posible resolver esta limitación usando sólo CSS3; no es necesario agregar dependencias a nuestro proyecto. El truco es usar CSS para esconder el elemento input nativo, y luego agregar un elemento span vacío como el primer hijo de la label del input. Tener una label asociada al input nos permite usar la sintaxis "+" de CSS3 para seleccionar esos casos particulares, y luego seleccionar el elemento span hijo del label para darle la apariencia personalizada que reemplazará al radio button. De esta manera, si deseáramos personalizar nuestros radio buttons, primero, en HTML, es preciso agregar labels y un elemento span vacío dentro de cada una. Por ejemplo: <!doctype html > <html> <div> <input type="...
Post a Comment
Keep reading