Necesito ayuda con bordes circulares en mi página web

  • Autor Autor telepliz oficial
  • Fecha de inicio Fecha de inicio
telepliz oficial

telepliz oficial

Delta
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
necesito ayuda para poner borde circulares en la siguiente pagina dejo captura:
1726902330712.webp


una idea de como quiero los borde circulares dejo captura:
1726902433017.webp
 
Puedes agregar bordes circulares estableciendo la propiedad CSS "border-radius" a un 50%. Por ejemplo:

HTML: 
<style>
.tuclase {
  border-radius: 50%;
}
</style>
Solo reemplaza "tuclase" con el nombre de tu clase. Asegúrate de agregar tu CSS en la sección correcta de tu archivo HTML.
 
BotBeta dijo:
Puedes agregar bordes circulares estableciendo la propiedad CSS "border-radius" a un 50%. Por ejemplo:

HTML: 
<style>
.tuclase {
  border-radius: 50%;
}
</style>
Solo reemplaza "tuclase" con el nombre de tu clase. Asegúrate de agregar tu CSS en la sección correcta de tu archivo HTML.
Hacer clic para expandir...
me lo puedes amplificar mas ?
 
telepliz oficial dijo:
me lo puedes amplificar mas ?
Hacer clic para expandir...
Claro, aquí está la versión ampliada:

Primero, necesitas identificar el elemento al que deseas darle un borde circular. Esto puedes hacerlo a través de su clase o su ID.

Luego vas a tu hoja de estilos CSS. Aquí es donde defines cómo se verán los elementos en tu página. Buscas la clase o el ID de tu elemento.

HTML: 
<style>
    .tuClase {
        /* Otros estilos */
    }
</style>

En lugar de "tuClase", pon el nombre de la clase o el ID del elemento al que quieras agregar el borde circular.

Ahí vas a agregar la propiedad "border-radius" y vas a darle un valor de 50%.

HTML: 
<style>
    .tuClase {
        border-radius: 50%;
        /* Otros estilos */
    }
</style>

Con eso, cualquier imagen dentro de ese elemento tendría bordes circulares. Si tu imagen no se vuelve completamente circular, puede que tenga que ver con su tamaño original. Intenta asegurarte de que la imagen sea cuadrada para obtener un círculo perfecto.
 
BotBeta dijo:
Claro, aquí está la versión ampliada:

Primero, necesitas identificar el elemento al que deseas darle un borde circular. Esto puedes hacerlo a través de su clase o su ID.

Luego vas a tu hoja de estilos CSS. Aquí es donde defines cómo se verán los elementos en tu página. Buscas la clase o el ID de tu elemento.

HTML: 
<style>
    .tuClase {
        /* Otros estilos */
    }
</style>

En lugar de "tuClase", pon el nombre de la clase o el ID del elemento al que quieras agregar el borde circular.

Ahí vas a agregar la propiedad "border-radius" y vas a darle un valor de 50%.

HTML: 
<style>
    .tuClase {
        border-radius: 50%;
        /* Otros estilos */
    }
</style>

Con eso, cualquier imagen dentro de ese elemento tendría bordes circulares. Si tu imagen no se vuelve completamente circular, puede que tenga que ver con su tamaño original. Intenta asegurarte de que la imagen sea cuadrada para obtener un círculo perfecto.
Hacer clic para expandir...
me puedes recomendar algún [ CSS ] que le ponga a las entradas bordes de color negro automáticamente ?
 
telepliz oficial dijo:
me puedes recomendar algún [ CSS ] que le ponga a las entradas bordes de color negro automáticamente ?
Hacer clic para expandir...
Claro, puedes usar la propiedad "border" de CSS. Aquí te dejo un ejemplo:

HTML: 
<style>
.entrada {
   border: 1px solid black;
}
</style>

En este ejemplo, reemplaza "entrada" con la clase o el ID de las entradas de tu blog. Esto añadirá automáticamente un borde de color negro a todas las entradas. Ajusta el '1px' a tu gusto para hacer el borde más grueso o más delgado.
 
BotBeta dijo:
En este ejemplo, reemplaza "entrada" con la clase o el ID de las entradas de tu blog
Hacer clic para expandir...
pero en blogger no lleva style, va dentro de <b:skin>
al menos que se lo ponga dentro de <body>
 
Puko dijo:
pero en blogger no lleva style, va dentro de <b:skin>
al menos que se lo ponga dentro de <body>
Hacer clic para expandir...
Cierto, en Blogger los estilos CSS van dentro de la etiqueta <b:skin>. Debes insertar tus estilos de esta manera:

XML: 
<b:skin>
<![CDATA[
/*<![CDATA[*/
.entrada {
   border: 1px solid black;
}
/*]]>*/
]]>
</b:skin>

Recuerda reemplazar "entrada" con el nombre de la clase o el ID de las entradas de tu blog.
 
BotBeta dijo:
Cierto, en Blogger los estilos CSS van dentro de la etiqueta <b:skin>. Debes insertar tus estilos de esta manera:

XML: 
<b:skin>
<![CDATA[
/*<![CDATA[*/
.entrada {
   border: 1px solid black;
}
/*]]>*/
]]>
</b:skin>

Recuerda reemplazar "entrada" con el nombre de la clase o el ID de las entradas de tu blog.
Hacer clic para expandir...
que significa border:none; ?
 
BotBeta dijo:
La propiedad "border: none;" en CSS significa que el elemento no tendrá ningún borde. Básicamente, elimina cualquier borde que pudiera tener el elemento.
Hacer clic para expandir...
como lo activo o desactivo para que salga el border ?
 
telepliz oficial dijo:
como lo activo o desactivo para que salga el border ?
Hacer clic para expandir...
Para activar el borde, necesitas definir la propiedad de borde en tu CSS. Puedes hacer algo como esto:

HTML: 
.entrada {
   border: 1px solid black; /* Esto activa el borde */
}

Para desactivarlo, utiliza "none":

HTML: 
.entrada {
   border: none; /* Esto desactiva el borde */
}

Simplemente cambia entre estas propiedades según necesites activar o desactivar el borde.
 
telepliz oficial dijo:
la verdad nose del tema y a la final tuve que contratar a alguien de confianza para que me haga el trabajo por eso les recomiendo al usuario de fotobeta a continuación @Miguel infante​
Hacer clic para expandir...

solo era usar "inspeccionar" para saber el id o class del contenedor de las imágenes
que lo más seguro es .post-thumb o .post-body a img, etc.
y ponerlo asi, dentro de <b:skin>:

<b:skin>
...
.post-thumb {
border-radius: 50%;
}
...
</b:skin>

pero asi le cambiara los bordes en el inicio y entradas, etc
para que solo le cambie los bordes solo en la portada/inicio
tenias que ponerlo dentro de la condicional "solo inicio" pero ahora abajo de ]]></b:skin>

por ejemplo :

]]></b:skin>
...
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post-thumb {
border-radius: 50%;
}
</style>
</b:if>

y eso de activar o desactivar o quitarlo poniendo "borde 0", mejor lo borras o se lo pones
 
Última edición:
Puko dijo:
solo era usar "inspeccionar" para saber el id o class del contenedor de las imágenes
que lo más seguro es .post-thumb o .post-body a img, etc.
y ponerlo asi, dentro de <b:skin>:

<b:skin>
<![CDATA[
/<![CDATA[/
.post-thumb {
border-radius: 50%;
}
/*]]>*/
]]>
</b:skin>

pero asi le cambiara los bordes en el inicio y entradas, etc
para que solo le cambie los bordes solo en la portada/inicio
tenias que ponerlo dentro de la condicional "solo inicio" pero ahora abajo de ]]></b:skin>

por ejemplo :

]]></b:skin>
...
<b:if cond='data:blog.url == data:blog.homepageUrl'>
.post-thumb {
border-radius: 50%;
}
</b:if>

y eso de activar o desactivar o quitarlo poniendo "borde 0", mejor lo borras o se lo pones
Hacer clic para expandir...
Excelente explicación, has proporcionado un método efectivo para ajustar los estilos solo en la página de inicio mediante el uso de una condición en código Blogger. Y estás correcto, para desactivar un estilo, es más eficiente borrar la regla entera en lugar de establecer su valor a cero. ¡Gracias por tu aportación!
 
Puko dijo:
solo era usar "inspeccionar" para saber el id o class del contenedor de las imágenes
que lo más seguro es .post-thumb o .post-body a img, etc.
y ponerlo asi, dentro de <b:skin>:

<b:skin>
...
.post-thumb {
border-radius: 50%;
}
...
</b:skin>

pero asi le cambiara los bordes en el inicio y entradas, etc
para que solo le cambie los bordes solo en la portada/inicio
tenias que ponerlo dentro de la condicional "solo inicio" pero ahora abajo de ]]></b:skin>

por ejemplo :

]]></b:skin>
...
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post-thumb {
border-radius: 50%;
}
</style>
</b:if>

y eso de activar o desactivar o quitarlo poniendo "borde 0", mejor lo borras o se lo pones
Hacer clic para expandir...
enmanuel0309 dijo:
www.ciudadblogger.com

Ciudad Blogger: Efectos de bordes redondeados en las imágenes

Trucos y tutoriales para tu blog de blogspot (Blogger)
www.ciudadblogger.com www.ciudadblogger.com
Ahí te dejo un link por si puede resolver los que anda buscando
Hacer clic para expandir...
gracias por dejar sus ayudas pero ya no tengo el problema este post se dejara activo por si a futuro alguien tiene el mismo problema y solicite alguna ayuda por aqui​
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

telepliz oficial
Necesito ayuda con acortador Exe.io para enlaces de mi web
2
Respuestas
22
Visitas
960
telepliz oficial
telepliz oficial
melonidas
  • Cerrado
Se solicita Necesito ayuda para crear mi web de dropshipping para vender productos de Modaq
Respuestas
1
Visitas
31
PapoX
PapoX
RenzoSEO
  • Cerrado
Subasta 🥇Web Amazon Sierras Circulares🥇 | Gran Autoridad y Margen de mejora
Respuestas
2
Visitas
181
RenzoSEO
RenzoSEO
DreadPirateRoberts
  • Cerrado
Se solicita Necesito ayuda: Mi pagina web no está convirtiendo
Respuestas
0
Visitas
56
DreadPirateRoberts
DreadPirateRoberts
melonidas
  • Cerrado
Se solicita Necesito ayuda para desarollar una web de comics nopor
Respuestas
8
Visitas
585
Edrien
Edrien
Atrás
Arriba