Creación de formas con CSS para texto y subtexto

Dhampire · 24 Mar 2017

Buenos dias.

Es posible crear esta forma con CSS?

<div class="descripcion sombras">
<h3>Texto 1</h3>
<span>Subtexto</span>
</div>

estebancito · 24 Mar 2017

Hola. No tanto con CSS, pero si con Canvas y JavaScript

- - - Actualizado - - -

estebancito dijo:
Hola. No tanto con CSS, pero si con Canvas y JavaScript

Con CSS tendrías que agregar una imagen de fondo al div contenedor:

Insertar CODE, HTML o PHP:

div {
background-image:url("ruta-imagen");
background-repeat: no-repeat;
/* Demás propiedades que necesites ...*/
}

kanikase · 24 Mar 2017

Border-radius

Enviado desde mi XT1097 mediante Tapatalk

estebancito · 24 Mar 2017

kanikase dijo:
Border-radius

Enviado desde mi XT1097 mediante Tapatalk

Si señor. Estaba absolutamente equivocado.

Dhampire · 24 Mar 2017

kanikase dijo:
Border-radius

Enviado desde mi XT1097 mediante Tapatalk

Si podría ser.
Pero llega hasta cierto punto y no sigue haciendo la curva.

estebancito dijo:
Hola. No tanto con CSS, pero si con Canvas y JavaScript

- - - Actualizado - - -

Con CSS tendrías que agregar una imagen de fondo al div contenedor:

Insertar CODE, HTML o PHP:

div { background-image:url("ruta-imagen"); background-repeat: no-repeat; /* Demás propiedades que necesites ...*/ }

Si, estuve pensando en esa opción. Pero para optimizar quisiera hacerlo con algo de codigo

ZoroRoronoa · 24 Mar 2017

un Ejemplo bro.
Edit fiddle - JSFiddle

estebancito · 24 Mar 2017

ZoroRoronoa dijo:
un Ejemplo bro.
Edit fiddle - JSFiddle

Míra:

Código HTML

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="content-background">
        <div class="content-text">
          <h2>Ola ke ace</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Código CSS

Insertar CODE, HTML o PHP:

.container{
  width: 450px;
  height:150px;
}

.content-background{
  position: relative;
  background-color: blue;
  border-radius: 50%;
  box-shadow: 3px 3px 12px 2px;
  width: 100%;
  height: 100%;
  top:-100px;
}

.content-text{
  width: 100%;
  height: 100%;
  position: relative;
  top: 100px;
  color: white;
  text-align: center;
}

Espero que te sirva. Obvio, ya lo organizas a tus necesidades.

ZoroRoronoa · 24 Mar 2017

estebancito dijo:

Míra:

Código HTML

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://forobeta.com/style.css">
  </head>
  <body>
    <div class="container">
      <div class="content-background">
        <div class="content-text">
          <h2>Ola ke ace</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Código CSS

Insertar CODE, HTML o PHP:

.container{
  width: 450px;
  height:150px;
}

.content-background{
  position: relative;
  background-color: blue;
  border-radius: 50%;
  box-shadow: 3px 3px 12px 2px;
  width: 100%;
  height: 100%;
  top:-100px;
}

.content-text{
  width: 100%;
  height: 100%;
  position: relative;
  top: 100px;
  color: white;
  text-align: center;
}

Espero que te sirva. Obvio, ya lo organizas a tus necesidades.

He?
Se te agradace el aporte, pero...
1.- Yo no soy el que lo necesita
2.- Hay mil y un formas de hacerlo, No creo que mi codigo sea mejor, No creo que tu codigo sea mejor.
Simplemente de mil maneras llegas al mismo resultados. :encouragement::encouragement::encouragement:

estebancito · 24 Mar 2017

ZoroRoronoa dijo:
He?
Se te agradace el aporte, pero...
1.- Yo no soy el que lo necesita
2.- Hay mil y un formas de hacerlo, No creo que mi codigo sea mejor, No creo que tu codigo sea mejor.
Simplemente de mil maneras llegas al mismo resultados. :encouragement::encouragement::encouragement:

Hola Compañero de Foro Beta.

1. Si, me equivoqué al hacer la cita. Qué pena.

2. No sé porqué todos aquí se toman las cosas a mal. Mi aporte no fue con la intención de presumir sobre mi código y mucho menos menos preciar el tuyo. Estoy absolutamente de acuerdo que existen mil maneras de hacer y que mi código no es el mejor.

Recibe un saludo cordial y de verdad, no lo hice con la intención de ofender.

ZoroRoronoa · 24 Mar 2017

estebancito dijo:
Hola Compañero de Foro Beta.

1. Si, me equivoqué al hacer la cita. Qué pena.

2. No sé porqué todos aquí se toman las cosas a mal. Mi aporte no fue con la intención de presumir sobre mi código y mucho menos menos preciar el tuyo. Estoy absolutamente de acuerdo que existen mil maneras de hacer y que mi código no es el mejor.

Recibe un saludo cordial y de verdad, no lo hice con la intención de ofender.

Espero que te sirva.
No lo tome a mal, pero se sintió un tono como: "El tuyo está mal, toma esté, espero te sirva".
De igual manera, uno aprende siempre.

Yo use absolute en el div que contiene ese fondo ovalado.
Tu usas todo relativo, en fin, distintas maneras... Uno aprende y aprende día a día.
Y no... no lo tome a mal de ti hacia mi persona a ningún sentido.

Un saludo también de mi parte, y esperemos ambos aportes le sirvan al creador del tema.
Pues no se ha aparecido hasta ahora.

estebancito · 24 Mar 2017

ZoroRoronoa dijo:
Espero que te sirva.
No lo tome a mal, pero se sintió un tono como: "El tuyo está mal, toma esté, espero te sirva".

De verdad, que pena. Pero esa no era mi intención.

Las mejores energías y si, en este mundillo siempre se aprende. :encouragement:

Dhampire · 25 Mar 2017

Buenas, disculpas.

Estuve probando ambas opciones. Sobre todo por el tema de responsive, voy ir probando con las dos opciones.
Gracias

OLMID · 28 Mar 2017

Te dejo otro ejemplo con ese código html que has dejado

Ovalo - JSFiddle

Saludos 🙂

Dhampire · 28 Mar 2017

OLMID dijo:
Te dejo otro ejemplo con ese código html que has dejado

Ovalo - JSFiddle

Saludos 🙂

Muchas gracias, me sirve de mucho 🙂
Gracias

Ramzy · 30 Mar 2017

Puedes usar canvas

Dhampire · 31 Mar 2017

Ramzy dijo:
Puedes usar canvas

.... Como?

Usuario eliminado 174876 · 4 Abr 2017

Hola,

Yo te voy a dar mi más sincera opinión personal.

Para crear esa forma, tienes que utilizar las propiedades background-color, border-radius y box-shadow.
El problema en sí no es ese, sino que el principal problema que veo yo es que tienes que crear una serie de cajas o contenedores tipo div para ocultar la circunferencia que vas a dibujar (es decir, el circulito azul) y dejar sólo la parte inferior de la misma visible.

Así que luego ya tendrías que utilizar una propiedad de visibilidad (visibility), y otra para trabajar en planos o capas (z-index).

Vamos, que te renta mucho más coger una imagen parecida, que andar construyendo cajas y asignando reglas css para cada una de ellas.

Es mi opinión personal...

jearj · 12 Abr 2017

Quizás esto sea lo mas que te puedes aproximar a lo que quieres.
Si no te convence puedes usar una imagen de fondo en el div container como te han dicho, y te ahorras el div contenido.

Codigo HTML:

HTML:

<div class="container">
<div class="contenido">
¡Hola Mundo! ¡Piensa bien!<br><span style="font: bold 15px/15px Arial;">¿Cuantos planetas tienes para desperdiciar?<span></div></div>

Codigo css:

HTML:

.container {
   display:block;
   width:626px;
   height:95px;
   background: -prefix-linear-gradient(top, #aaa, #ddd 9%);
   background: linear-gradient(to bottom, #aaa, #ddd 9%);
   border-top:1px solid #444;
   margin: 0 auto;
}
.contenido {
   display:block;
   width:540px;
   height:70px;
   background: -prefix-linear-gradient(top, #0066ff, #00aaff 9%);
   background: linear-gradient(to bottom, #0066ff, #00aaff 9%);
   -webkit-box-shadow:0 6px 6px 0 rgba(1,70,90,0.2);
   -moz-box-shadow:0 6px 6px 0 rgba(1,70,90,0.2);
   -ms-box-shadow:0 6px 6px 0 rgba(1,70,90,0.2);
   -o-box-shadow:0 8px 6px 0 rgba(1,70,90,0.3);
   box-shadow:0 6px 12px 0 rgba(1,70,90,0.4);
   -webkit-border-radius: 0 0 50% 50% / 0 0 100% 100%; /* bug en Safari*/
   border-radius: 0 0 50% 50% / 0 0 100% 100%;

   font: bold 25px/25px Arial;
   font-weight:500;
   color: #fff;
   text-align: center;
   padding-top:5px;
   margin: 0 auto;
}

Creación de formas con CSS para texto y subtexto

Dhampire

estebancito

kanikase

estebancito

Dhampire

ZoroRoronoa

estebancito

ZoroRoronoa

estebancito

ZoroRoronoa

estebancito

Dhampire

OLMID

Dhampire

Ramzy

Dhampire

Usuario eliminado 174876

jearj

Temas similares