Archivo de la categoría: CSS

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.

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.

CodePen – Comparte tus ejemplos HTML CSS JS

CodePen es un editor HTML, CSS y Javascript en nuestro navegador el cual nos permite generar vistas previas de nuestros ejemplos, ademas podemos compartir estos. Aparte de esto es también una red social y colaborativa de proyectos y nos permite probar nuestros desarrollos en distintos dispositivos.

http://codepen.io

25 diseños para webs de eventos

Necesitáis algo de inspiración para realizar una web de eventos. En el siguiente enlace hay unos cuantos ejemplos muy buenos http://inspirationfeed.com/inspiration/websites-inspiration/25-well-designed-event-websites/

Temas gratuitos Bootstrap

BootstrapBootstrap, como muchos de vosotros ya conocéis, es uno de los frameworks para diseño de paginas web mas usado hoy en día. Esto hace que los recursos que podemos encontrar para personalizarlo a nuestro gusto son numerosos. En la entrada de Bootswhatch ya veíamos unos cuantos temas para usar gratuitamente tanto en la versión 2 como en 3 de Bootstrap, en la pagina de Black Tie podemos encontrar una gran colección de temas, destinados para la versión 3 para poder aplicar según la temática de nuestra web.