0

Quisiera saber si me pueden guiar cómo lograr personalizar los bordes de los post de Tumblr. Quisiera lograr un borde ondulado tal como lo muestra en la imagen.

Lo que busco lograr en tumblr con los post

Ya encontré el borde en HTML y CSS en este enlace:

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
  background-color: #fff;
  color: #ffF;
  font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1em;
  line-height: 2em;
  margin: 0;
  padding: 0;
}

.wave {
  text-align: center;
  background: linear-gradient(to bottom, sandybrown, chocolate);
  height: 50px;
  position: relative;
}

.wave::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat-x;
  height: 10px;
  background-size: 20px 20px;
  background-image: radial-gradient(circle at 10px -5px, transparent 12px, white 13px);
}

.wave::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: repeat-x;
  height: 15px;
  background-size: 40px 20px;
  background-image: radial-gradient(circle at 10px 15px, white 12px, transparent 13px);
}

.content {
  color: #333;
  font-size: 0.8em;
  padding: 1em;
}
<div class="wave">Tengo un borde ondulado</div>

<div class="content">
  Con dos pseudo-elementos especiales (before y after) y el poder de repetir gradientes radiales de CSS, este tipo de rizos que parecen olas se pueden hacer si necesidad de una imagen.
</div>

Pero sinceramente tengo conocimientos muy básicos en esto. Sé que tengo que editar el HTML y los estilos del tema, sin embargo no sé qué elemento en el código modificar y qué debo alterar para lograr lo que quiero en la imagen.

¿Cómo podría aplicar un efecto similar al mostrado arriba, pero en los posts de Tumblr?

3
  • ¿Cómo es el código HTML de los posts de Tumblr?
    – Alvaro Montoro
    Commented el 26 jul. 2017 a las 0:32
  • Hola Alvaro, el código HTML del tema de tumbrl es este: drive.google.com/file/d/0B_6j2PXKNZUgNTlzV1VEQkg2N3c/… Pero precisamente no se cómo identificar el que pertenece a los post :( Commented el 26 jul. 2017 a las 2:42
  • Sería mejor que colocaras el código generado y no el código fuente. Y debería ser sólo el código relevante y no el de toda la página.
    – Alvaro Montoro
    Commented el 26 jul. 2017 a las 15:54

1 respuesta 1

2

Lo que necesitas lo puedes lograr usando la propiedad border-image, lo que tendrias que hacer es crearte la imagen del borde, aqui te muestro un ejemplo

#borderimg1 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 round; /* Opera 11-12.1 */
    border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
}

#borderimg2 { 
    border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Safari 3.1-5 */
    -o-border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch; /* Opera 11-12.1 */
    border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;
}
<p id="borderimg1">Usando la propiedad round</p>
<p id="borderimg2">Usando la propiedad stretched</p>

<p>Imagen original</p><img src="https://www.w3schools.com/cssref/border.png">
<p><strong>Nota:</strong> Internet Explorer 10,no soporta border-image property.</p>

1
  • Muchas gracias por tu aporte Marco, ¡lo intentaré! Commented el 11 ago. 2017 a las 5:28

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.