Inicia sesión


Elipse - Ellipse en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite una forma en Elipse - Ellipse en CSS3...
En general, usamos el border-radius para lograr el efecto de redondeo más a menudo. De hecho, border-radius es capaz de especificar sus ejes semiprincipales y semicortados por separado, solo necesita usar "/" para dividir. A través de esta propiedad, podemos implementar fácilmente gráficos comunes, como semicírculos, semi-elipses, círculos de círculos y círculos de círculos.
<style>
  main {
    width: 100%;
    padding: 60px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  div {
    width: 200px; height: 150px;
    background: #b4a078;
    margin-bottom: 30px;
  }
  .ellipse:nth-of-type(1) {
    width: 300px; height: 150px; 
    border-radius: 50% / 100% 100% 0 0;
  }
  .ellipse:nth-of-type(2) {
    width: 150px; height: 150px;
    border-radius: 100% 0 0 0;
  }
  .ellipse:nth-of-type(3) {
    border-radius: 50% / 100% 100% 0 0;
  }
  .ellipse:nth-of-type(4) {
    width: 100px;
    border-radius: 100% 0 0 0;
  }
  .ellipse:nth-of-type(5) {
    width: 300px;
    border-radius: 50% / 0 100%;
  }
  .ellipse:nth-of-type(6) {
    width: 300px;
    border-radius: 50% / 100% 0;
  }
</style>

<main>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
    <div class="ellipse"></div>
</main>
Ver resultado


  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-09
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial