California Graphics: julio 2013

jueves, 25 de julio de 2013

Redondear una imagen

¿Como Redondear Una Imagen Con Código HTML o CSS?
Utilizaremos "border-radius", Debes Editar 50px Por El Nro Que Deseas {20p, 10px, 7px, etc.}
Ejemplo 1
{Redondear Todas Las Esquinas}

Código:

<img src="URL DE TU IMAGEN" style="-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;padding:0px;"/>

Ejemplo 2
{Seleccionar Las Esquinas A Redondear}

Código:

<img src="URL DE TU IMAGEN" style="-webkit-border-radius: 50px 10px 50px 10px;-moz-border-radius: 50px 10px 50px 10px;border-radius: 50px 10px 50px 10px;padding:0px;"/>

Ejemplo 3
{Imagen Circular}

Código:

<img src="URL DE TU IMAGEN" style="-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;padding:0px;"/>

¿Como Colocar El Efecto En Todas Las Imágenes Del Blog?

Diseño // Edicion HTML // [Ctrl + F] & Buscas ]]></b:skin>
ARRIBA Pega El Código Que Deseas:
Efecto 1

img {
padding:0px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
img:hover {
padding:0px;
border-radius:0px;
}

Efecto 2

img {
padding:0px;
-webkit-border-radius: 50px 10px 50px 10px;
-moz-border-radius: 50px 10px 50px 10px;
border-radius: 50px 10px 50px 10px;
}
img:hover {
padding:0px;
border-radius:0px;
}

El Efecto Numero 3 No Es "Estético" Para Todas Las Imágenes Ya Que Sirve Si La Imagen Posee La Misma Medida De Ancho & Alto.

Centrar la cabecera de tu blog

1. Vamos a la página principal de nuestro blog. Plantilla > Personalizar.

2. Le damos a Avanzado > Añadir CSS y copiamos y pegamos este código:

.header .widget {
text-align:center;}
.header img {margin:0 auto;}

Debería quedar así:

Le damos a Enter, revisamos que todo esté perfecto y Guardar Plantilla.

Creditos a cassia por el tutorial

Cambiar color de seleccion del texto

este tutorial es mas bien para dar un toque de color al blog, sabeis cuando haceis un opia y pega que os sale de color azul? pues es para cambiar esto.

1. Vas a Plantilla > Editar HTML.

2. Le das a Plantilla de Formato y buscas: body {
(para encontrarlo mas rapidamente haces clic a CTRL+F)

3. Justo encima pegas esto:

::selection {
background:#efbbcb;
color:#90022a;
}
::-moz-selection {
background:#efbbcb;
color:#90022a;
}
::-webkit-selection {
background:#efbbcb;
color:#90022a;
}

El background es el fondo de selección (lo que se vería en color azul) y el color es el color de las letras (lo que se vería en blanco).

miércoles, 24 de julio de 2013

Redondear las puntas de todo tu blog

Este tutorial esta pensado para la plantilla "Sencillo". por esto es que si lo prueban en una plantilla distinta a la Sencillo no les va a salir bien :)

1. Vamos a "Plantilla" y entramos en "Editar HTML".
2. Damos clic a "Plantilla de formato" y luego apretamos CTRL+F.

3. Buscamos: .content-outer { y borramos esto que aparece justo debajo:

-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

Fijense que les tiene que quedar la última línea: margin-bottom

4. Inmediatamente después les saldrá .content-inner { Allí agregamos:

-moz-border-radius: 25px;
-goog-ms-border-radius: 25px;
-webkit-border-radius:25px;
border-radius: 25px;

Le pueden cambiar el valor para que quede a su gusto. Recuerden que cuanto más grande sea el valor (hasta 100px) más redondo se verá.

5. Si quieren ponen 'Vista previa' para verificar que todo este bien y luego guardan los cambios.

Pedido de Miss Imperfect

hace ya un tiempo que no tenia pedidos (si no los tengo es porque una vez dije que me enviarais los pedidos y no me lo hicisteis) y bueno Miss imperfect me pidió mas o menos todo un diseño para su blog.
Todo los pedidos ahora los tengo que hacer con picmonkey y porgramas no tan profesionales como el photshop prque en el ordenador donde estoy el photoshop me va mal.
Cabecera: cliquea en la imagen para ver el tamaño real.

Fondo: lo he elegido expressamente para poner en mosaico.

Banner: el baner puede que tengas mas problemas te lo voy a dejar lo mas facil posible.

(este es tu banner)

<a href="http://infinityffeelings.blogspot.com.es/" target="_blank"><img src="http://i44.tinypic.com/k9nj7.gif" border="0" alt="Image and video hosting by TinyPic"></a>

eso de arriba que esta en una caja de color lila es el codigo de tu imagen.

<a href="http://infinityffeelings.blogspot.com.es/" target="_blank"><img src="http://i44.tinypic.com/k9nj7.gif" border="0" alt="Image and video hosting by TinyPic"></a><textarea><a href="http://infinityffeelings.blogspot.com.es/" target="_blank"><img src="http://i44.tinypic.com/k9nj7.gif" border="0" alt="Image and video hosting by TinyPic"></a></textarea>

el codigo que tienes con mas letras veras que tiene un trozo donde pone <textarea> eso es lo que dices tu de lo de la cajita en blanco. esa caja puede ser modificada a tu estilo ( algun tutorial pronto sobre cambiar diseño de esas cosas) el codigo que tiene mas letras es el que tienes que usar para poner en tu blog.

para poner este codigo solo tienes que seguir estos pasos de aqui: http://california-graphics.blogspot.com.es/2013/07/una-entrada-especial-para-clara-oses.html

ahora en blogger cuando yo lo intenté hacer no podias usarlo (la textarea) asi que te recomiendo que debajo de tu cabecera donde tienes eso de ya eres socia y todo eso que hagas un apartado que diga afiliados{+} porque te digo que hagas eso? pues porqeu a parte de que podras poner tus afiliados allí, podras poner tus botones de afiliación y asi no te estorbaran por los gadgets del blog.

ahora te preguntaras como poner el banner con el codigo en ese apartado. pues es muy facil en ese apartado casi solo tendras que usar el HTML, por eso tendras que ir aquí: