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

Mockups de bolsas de compra para descargar gratis

El día de hoy quiero compartir con ustedes estos geniales Mockups; que pueden servirte si estas buscando promocionar o modelar alguna marca en Shopping Bags. Sin duda, son un elemento imprescindible para aquellos que están…

close

Google Nik Collection, el software de edición para fotógrafos profesionales ahora es gratis

Google Nik Collection, es una herramienta de edición de fotografía que muchos conocen; este software que resultaba únicamente disponible para aquellos que pagasen por tal. No obstante, Google ha mostrado una vez más su generosidad…

close

play_circle_outline Este es el nuevo trailer de Spider-Man: Homecoming

Una agradable sorpresa para aquellos fanáticos del universo de Marvel y sobre todo para los seguidores del universo de las pelicular de los Vengadores; pues el día de hoy se dio a conocer el nuevo adelanto…

close

Estos son los primeros ganadores del Sony World Photography Awards 2017

El día de hoy se dieron a conocer algunos de los ganadores del Sony World Photography Awards 2017; estos ganadores pertenecen a las categorías Open y National; por lo que aún restan los ganadores de…

close

Mockups gratis para presentar publicidad exterior

Les comparto una selección de útiles mockups gratuitos perfectos para presentar diseños de publicidad exterior, todos los mockups son de diferentes formatos para algunos de los medios de publicidad exterior más populares que puedes ver en…

close

Mira esta colección de logotipos animados para tu inspiración

Los logotipos son fuentes de inspiración únicas; esto debido a que para su realización se utiliza una gran gama de técnicas y estilos; las cuales son apreciables para los ojos entrenados que andan en busca…

notifications Recién publicamos
close