Archivo de la categoría: Diseño

Aplicar estilo a multiples elementos excepto unos

La semana pasada en Selección múltiple con patrones en CSS explicaba como aplicar estilos a multiples elementos por medio de patrones. Pero ¿que sucede si dentro de ese grupo de elementos hay algunos a los cuales no queremos que se aplique ese estilo? Voy a poner un ejemplo donde nos podemos encontrar con esa situación, supongamos que estamos utilizando bootstrap 3 en nuestra web, y tenemos un formulario en el cual queremos poner un asterisco rojo delante de todos los elementos obligatorios, una manera sencilla y rápida para hacerlo es con CSS, aplicando un simple estilo

label.required:before   {
    content: "*";
    color: red;
}

Con esta regla lo que hacemos es antes de cada label(con el pseudo selector before, si quisiéramos que fuera después lo sustituiríamos por :after) que sea de la clase required le agregamos un * de color rojo. Según como tengamos diseñado el formulario, y si estamos usando elementos radio, nos podemos encontrar que delante de cada etiqueta de radio nos ha puesto el asterisco, para solucionar esto podemos usar el pseudo selector :not de la siguiente manera:

label:not(.radio).required:before   {
    content: "*";
    color: #ff3b30;
}

Espero que os sea de utilidad.

Anuncios

Selección múltiple con patrones en CSS

Es posible que alguna vez cuando estamos diseñando una pagina web, nos encontremos que estamos nombrado elementos los cuales tienen el nombre bastante parecido, por ejemplo, email1, email2, email3,…

Imaginemos que estos elementos son campos input y queremos aplicarles a todos estos el mismo estilo, sin que este afecte al resto de inputs. Una primera opción es directamente aplicarles a estos elementos la misma clase y crear una regla con esta, eso si esta opción supondría que tenemos que ir uno a uno y agregarles la clase a cada uno, y en este caso tenemos 3, pero ¿y si tenemos 30?, ¿o 100?, ¿y si esa clase, por casualidad le damos un nombre que reescribe alguna hoja de estilos superior?. Una manera sencilla de crear una solución sin tocar el HTML que tenemos es utilizando patrones en nuestra hoja de estilo.

Seleccionar todos los atributos que comienzan por un valor. [attributo^=valor] 

Por ejemplo queremos seleccionar todos los valores que su id comienza por la palabra email usaríamos:

[id^="email"] {...}

Este selector se aplicaría a email1, email2, email3, email_loquesea.

Seleccionar todos los atributos que finalizan por un valor[attributo$=valor]

Si por ejemplo queremos seleccionar todos los valores que su id finaliza por la palabra usuario:

[id$="usuario"] {...}

Este selector se aplicaría a nombre_usuario, apellidos_usario, loquesea_usuario.

Seleccionar todos los atributos que contengan un valor: [attributo*=valor]

En este caso si queremos seleccionar todos los id que contengan la palabra usuario:

[id*="usuario"] {...}

Este selector se aplicaría a nombre_usuario, usuario_nombre, loquesea_usuario_loquesea.

+ Información Selectores de atributos en W3.org

Creative Tim – Dale un look profesional a tu web

Buscando inspiración y recursos para el desarrollo de nuevos proyectos di con la web de Creative Tim y sus diseños y plantillas para web son muy buenos. Dentro de los temas que nos ofrecen destacaria el Paper Kit, Get Shit Done Kit y Awesome Landing Page.
Estos Kits son gratuitos para uso personal, y en el caso que seas desarrollador tiene un coste de 19€ cada uno.
Yo os recomendaria descargar las versiones gratuitas primero y enredar con ellas. Tengo que decir que la documentación y los ejemplos que hay en las descargas dan mucha ayuda a la hora de realizar tus desarrollos. Decir que todos los temas estan basados en Bootstrap 3, y si tienes un poco de experiencia con el, no vas a tener problemas a la hora de integrarlos.

Para poder descargarlos hay que registrarse en la web, y uno de los primeros correos que te envian, por lo menos en mi caso, es un codigo de descuento para comprar uno de sus temas.

Unsplash – Imagenes expectaculares gratuitas

Si buscais imagenes expectaculares y de calidad  para usarlas donde querais y para lo que querais Unsplash es uno de los primeros sitios donde teneis que buscar. Todas las imagenes estan licenciadas bajo Creative Commons Cero, y puede hacer con ellas lo que quieras y para lo que quieras. Os dejo una muestra, espero que os gusten.

Required en radio o checkbox multiple

A veces cuando diseñamos un formulario tenemos que incluir en este elementos radio o checkbox, y queremos que estos sean obligatorios, en el resto de elementos lo podemos tener claro le ponemos el atributo “required” y ya, pero estos elementos sueles dar multiples opciones, entonces que hacemos, lo ponemos en todos el atributo “required”, pues si, esa es una de las soluciones, pero hay otra mas sencilla, que es ponerlo solo en el ultimo.


<input type='checkbox' name='opcion' value='si' required>

<input type='checkbox' name='opcion' value='no' required>


<input type='checkbox' name='opcion' value='si'>

<input type='checkbox' name='opcion' value='no' required>

Ejemplo: http://www.sacredheartprimary.co.uk/macss-js/webforms2/testsuite/021.html

Crea libros de programación y ejercicios con GitBook

Este es un proyecto con el cual podemos crear nuestros libros de cursos de programación o webs con ejercicios. Os recomiendo que veais el ejemplo de curso de Javascript

Generador de botones CSS

Buscando por internet he encontrado esta pagina en la cual podemos crear nuestros botones personalizados y generar el código para usarlos en nuestra web.