Tips CSS: Ocultar el Outline y poner el logo con H1

Aquí les dejo unos pequeños tips para su CSS, imagino se han dado cuenta que al poner un enlace y hacer click sobre el mismo aun le hallan puesto la propiedad border:0; le aparece un borde punteado alrededor esto sucede cuando el objeto a tiene asignada la propiedad display:block; como evitar esto?.

CSS Tutorial, Outline y logos protegidos

Bueno pues las siguiente lineas te enseñaran la manera de evitar esto y a parte poner un logo que al oprimirle con el botón derecho encima no les aparezca ni Guardar Imagen.. y tampoco Ver imagen de fondo… y aparte sea un enlace.

Primer paso:

Generar codigo html, usaremos H1 para incluso ayudar al SEO de nuestro sitio:
[code lang=”html4strict”]



[/code]


Podemos poner un texto dentro de la etiqueta h1 que por default tiene la propiedad block y aparte este texto es el que nos servira para el SEO.

Segundo Paso:

Creamos el CSS:
[code lang=”css”]
.orig_header_logo{
background:url(ubuntulogo.png) no-repeat;
width:202px;
height:55px;
display:block;
font-weight:bold;
color:#333333;
font-size:28px;
font-family:Arial, Verdana, Tahoma, Serif;
margin:0 auto;
}
[/code]
Aquí va la descripción de esto, la primera propiedad background únicamente define la imagen de fondo de la etiqueta a con class orig_header_logo la siguiente width y height es para definir el tamaño exacto del bloque según el tamaño de la imagen de fondo, display:block tal vez esta de mas ponérselo, la siguientes si son de mas únicamente le dan formato al texto y la ultima margin:0 auto; ayudan a centrar el bloque en la pagina esto para Firefox si lo desean centrar con IE a la etiqueta body deben asignarle la propiedad text-align:center; hasta aqui aun no hemos mucho, el resultado es el que ven en la imagen de arriba el primer ejemplo.
[code lang=”css”]
.outline_header_logo{
background:url(ubuntulogo.png) no-repeat;
width:202px;
height:55px;
display:block;
font-weight:bold;
color:#333333;
font-size:28px;
font-family:Arial, Verdana, Tahoma, Serif;
text-indent:-5000px;
margin:0 auto;
}
[/code]
Ahora con el siguiente CSS si se fijan no cambia mucho la única propiedad que se añadió es text-indent:-5000px; esta propiedad lo que hace que el texto en esta caso la palabra ubuntu contenido dentro del bloque sea movida 5000 pixeles hacia la izquierda sacándola de cuadro completamente, el resultado lo pueden ver en la imagen de arriba es el segundo ejemplo.
[code lang=”css”]
.header_logo{
background:url(ubuntulogo.png) no-repeat;
width:202px;
height:55px;
display:block;
font-weight:bold;
color:#333333;
font-size:28px;
font-family:Arial, Verdana, Tahoma, Serif;
text-indent:-5000px;
margin:0 auto;
outline:none;
}
[/code]
Y ahora el completamente y resultado final el siguiente CSS solo se le añade la propiedad outline:none; esto para evitar el mencionado borde punteado que aparece al hacer click sobre la imagen, el resultado lo pueden ver siempre en la imagen de arriba es el ultimo ejemplo, con esto ya tenemos nuestro logo insertado usando un Header 1 (H1) para el SEO y con el texto Ubuntu fuera de cuadro.

Ver ejemplo

comment ¿Que opinas?

Artículos recientes

close

5 Diseños y propuestas de empaques creativos

El día de hoy quiero compartir con ustedes una pequeña recopilación de propuestas y diseños de packaging; los cuales, han sido creados con diferentes fines: comerciales, estudiantiles, etc. Estos geniales diseños son una buena fuente…

close

Diseñador crea un refugio secreto para trabajar oculto bajo un puente

El diseñador autodidacta Fernando Abellanas ha creado un refugio de trabajo perfecto; el cual, se encuentra perfectamente escondido bajo un puente de la ciudad de Valencia, España. Este genial estudio es un ambiente perfecto de…

close

Creativos posters de terror inspirados en la saga de Harry Potter

El artista Dylan Pierpont ha realizado un magnifico trabajo con estas ilustraciones, las cuales, muestran como seria la saga de Harry Potter si esta cambiara de genero para ser una de terror. Estas ilustraciones muestran como se…

close

Fotógrafo muestra las diferencias entre Corea del Norte y Corea del Sur

Corea del Norte y Corea del Sur son dos países totalmente diferentes, los cuales, solo tienen como similitud el “Corea del” en sus nombres, así lo deja en evidencia el fotógrafo Jacob Laukaitis, el cual, ha…

close

#HEYTWITTER, una denuncia social contra Twitter y los tweets de odio

Shahak Shapira es un activista y artista reconocido por sus peculiares campañas sociales, las cuales, evidencian algunos de los grandes problemas de la sociedad actual. En esta ocasión Shapira ha creado una campaña/denuncia social en…

close

10 Ejemplos de vandalismo como una actividad creativa

Aveces el vandalismo deja huellas de mal gusto en el panorama urbano del mundo, no obstante, existen creativos que crean obras bastante llamativas y amables a la vista. Estas obras están inspiradas en su mayoría…

notifications Recién publicamos
close